JavaScript

Intro

Введение в JavaScript

  • JavaScript — мультипарадигменный язык программирования. Поддерживает стили:

    • объектно-ориентированный

    • императивный

    • функциональный

  • JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.

  • Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

  • JavaScript является интерпретируемым языком

Синтаксис

Инструкции

alert("Вычисление выражения")
var a = 5 + 8
alert(a)
alert("Вычисление выражения"); var a = 5 + 8; alert(a);
alert("Вычисление выражения");
var a = 5 + 8;
alert(a);

Комментарии

// вывод сообщения
alert("Вычисление выражения");
// арифметическая операция
var a = 5 + 8;
alert(a);
// вывод сообщения
/*  вывод сообщения и
 арифметическая операция */
alert("Вычисление выражения");
var a = 5 + 8;
alert(a);

Переменные и константы

Объявление переменных

var myIncome;
// другой вариант
let myIncome2;
// еще вариант
myIncome3;

Объявление переменных

a1 = 1;
console.log(a1);
var a2 = 2;
console.log(a2);
let a3 = 3;
console.log(a3);
1
2
3

Объявление переменных

c = 1;
console.log(c);
var c = 2;
console.log(c);
let c = 2; (0)
console.log(c);
Uncaught SyntaxError: redeclaration of var c

Названия переменных: correct

$commision
someVariable
product_Store
income2
myIncome_from_deposit

Названия переменных: wrong

222lol
@someVariable
my%percent
var for;

Инициализация

var income = 300;
income = 400;
console.log(income);

let price = 76;
price = 54;
console.log(price);
400
54

Константы

const rate = 10;
const rate = 10;
rate = 23; (0)
Uncaught TypeError: invalid assignment to const 'rate'
const rate; (0)
Uncaught SyntaxError: missing = in const declaration

Типы данных

Типы данных

  • Примитивные типы

    • String: представляет строку

    • Number: представляет числовое значение

    • Boolean: представляет логическое значение true или false

    • undefined: указывает, что значение не установлено

    • null: указывает на неопределенное значение

  • object: объектный тип

Числовые данные

  • Целые числа. Диапазон используемых чисел: от -2^53 до 2^53.

  • Дробные числа (числа с плавающей точкой). Для чисел с плавающей точкой используется тот же диапазон: от -2^53 до 2^53.

Строки

var helloWorld = "Привет мир";
var helloWorld2 = 'Привет мир';
var helloWorld = 'Привет мир"; (0)
Uncaught SyntaxError: '' literal not terminated before end of scrip
var companyName = "Бюро \"Рога и копыта\"";
var companyName1 = "Бюро 'Рога и копыта'";
var companyName2 = 'Бюро "Рога и копыта"';

Тип Boolean

var isAlive = true;
var isDead = false;

undefined

var isAlive;
console.log(isAlive);
undefined

null и undefined

  • null: означает, что переменная имеет некоторое неопределенное значение

  • undefined: означает, что переменная не имеет значения (фактически: отсутствие чего-либо)

null и undefined

var isAlive;
console.log(isAlive);
isAlive = null;
console.log(isAlive);
isAlive = undefined; // снова установим тип undefined
console.log(isAlive);
undefined
null
undefined

object

var user = {};
var user = {name: "Tom", age:24};
console.log(user.name);
Tom

Слабая типизация

var xNumber; // тип `undefined`
console.log(xNumber);
xNumber = 45; // тип `number`
console.log(xNumber);
xNumber = "45"; // тип `string`
console.log(xNumber);
undefined
45
45

Слабая типизация

var xNumber = 45; // тип `number`
var yNumber = xNumber + 5;
console.log(yNumber);

xNumber = "45"; // тип `string`
var zNumber = xNumber + 5
console.log(zNumber);
50
455

Операторы

Оператор typeof

var name = "Tom";
console.log(typeof name);
var income = 45.8;
console.log(typeof income);
var isEnabled = true;
console.log(typeof isEnabled);
var undefVariable;
console.log(typeof undefVariable);
string
number
boolean
undefined

Математические операторы

  • +

  • -

  • *

  • /

  • %

  • ++

  • --

Операции присваивания

  • =

  • +=

  • -=

  • *=

  • /=

  • %=

Операторы сравнения

  • == - оператор равенства (значения)

  • === - оператор тождественности (типы и значения)

  • !=

  • !==

  • <

  • >

  • <=

  • >=

Логические операции

  • &&

  • ||

  • !

Конкатенация

var name = "Том";
var surname = "Сойер"
var fullname = name + " " + surname;
console.log(fullname);
Том Сойер

Конкатенация

var name = "Том";
var fullname = name + 256;
console.log(fullname);
Том256

Преобразование данных

Преобразование данных

var number1 = "46";
var number2 = "4";
var result = number1 + number2;
console.log(result);
464

parseInt()

var number1 = "46";
var number2 = "4";
var result = parseInt(number1) + parseInt(number2);
console.log(result);
50

parseFloat()

var number1 = "46.07";
var number2 = "4.98";
var result = parseFloat(number1) + parseFloat(number2);
console.log(result);
51.05

Исключительные случаи

var num1 = "123hello";
var num2 = parseInt(num1);
console.log(num2);
123

NaN и isNaN()

var num1 = "javascript";
var num2 = "22";
var result = isNaN(num1);
console.log(result);

result = isNaN(num2);
console.log(result);
true
false

Другие системы счисления

var num1 = "110";
var num2 = parseInt(num1, 2);
console.log(num2);
6

Массивы

Массивы

var myArray = new Array();
var myArray = [];
var people = ["Tom", "Alice", "Sam"];
console.log(people);
[ "Tom", "Alice", "Sam" ]

Массивы

var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);
undefined

Массивы

var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);
people[7] = "Bob";
console.log(people[7]);
undefined
Bob

Массивы

var objects = ["Tom", 12, true, 3.14, false];
console.log(objects);
[ "Tom", 12, true, 3.14, false ]

spread-оператор

let numbers = [1, 2, 3, 4];
console.log(...numbers);
console.log(numbers);
1 2 3 4
[1, 2, 3, 4]

Многомерные массивы

var numbers1 = [0, 1, 2, 3, 4, 5 ]; // одномерный массив
var numbers2 = [[0, 1, 2], [3, 4, 5]]; // двумерный массив

Условные конструкции

Проверка на наличие значения

var myVar = 89;
if (myVar) {
    // действия
}

Проверка на undefined

if (typeof myVar != "undefined") {
    // действия
}

true или false

true или false?

(undefined) ? true : false
false

true или false?

(null) ? true : false
false

true или false?

(true) ? true : false
true
(false) ? true : false
false

true или false?

(0) ? true : false
false
(NaN) ? true : false
false

true или false?

('') ? true : false
false

true или false?

(new Boolean(false)) ? true : false
true

Циклы

Циклы

  • for

  • while

  • do..while

  • for..in - предназначен для перебора коллекций, например, массивов

  • for..of - предназначен для перебора массивов и объектов

Функции

Функции

function имя_функции([параметр [, ...]]) {
    // Инструкции
}
function display() {
    document.write("функция в JavaScript");
}

Вызов функции

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        function display() {
            document.write("функция в JavaScript");
        }
        display();
    </script>
</body>
</html>

Анонимные функции

var display = function() { // определение функции
    document.write("функция в JavaScript");
}
display();
функция в JavaScript
function goodMorning() {
    document.write("Доброе утро");
}
function goodEvening() {
    document.write("Добрый вечер");
}
var message = goodMorning;
message();
message = goodEvening;
message();
Доброе утро
Добрый вечер

Параметры функции

function display(x) { // определение функции
    var z = x * x;
    console.log(x + " в квадрате равно " + z);
}
display(5); // вызов функции
5 в квадрате равно 25

Параметры функции

function sum(a, b, c) {
    let d = a + b + c;
    console.log(d);
}

sum(1, 2, 3);
let nums = [4, 5, 6];
sum(...nums);
6
15

Необязательные параметры

function display(x, y) {
    if(x === undefined) x = 8;
    if(y === undefined) y = 5;
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);
40
30
24

Необязательные параметры

function display(x = 5, y = 10) {
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);
50
60
24

Необязательные параметры

function display(x = 5, y = 10 + x) {
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);
75
96
24

Неопределенное количество параметров

function display(season, ...temps) {
    console.log(season);
    for (index in temps) {
        console.log(temps[index]);
    }
}
display("Весна", -2, -3, 4, 2, 5);
display("Лето", 20, 23, 31);

Неопределенное количество параметров

Весна
-2
-3
4
2
5
Лето
20
23
31;

Результат функции

var y = 6;
var z = square(y);
console.log(y + " в квадрате равно " + z);

function square(x) {
    return x * x;
}
6 в квадрате равно 36

Функции в качестве параметров

function sum(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

function operation(x, y, func) {
    var result = func(x, y);
    console.log(result);
}

console.log("Sum");
operation(10, 6, sum);
console.log("Subtract");
operation(10, 6, subtract);
Sum
16
Subtract
4

Возвращение функции из функции

function menu(n) {
    if (n == 1)
        return function(x, y) { return x + y;}
    else if(n == 2)
        return function(x, y) { return x - y;}
    else if(n == 3)
        return function(x, y) { return x * y;}
    return undefined;
}

for (var i=1; i < 5; i++) {
    var action = menu(i);
    if (action !== undefined) {
        var result = action(5, 4);
        console.log(result);
    }
}
9
1
20

Область видимости переменных

Область видимости переменных

  • global

  • local

Область видимости переменных

var x = 5; (1)
let d = 8; (1)
function displaySquare() {
    var z = x * d; (2)
    console.log(z);
}
displaySquare()
40

Сокрытие переменных

var a = 89;
function displaySquare() {
    var a = 10;
    console.log(a);
}
displaySquare();
10

let

let b = 10;
function displayZ() {
    let b = 20;
    {
        let b = 30;
        console.log("Block:", b);
    }
    console.log("Function:", b);
}

displayZ();
console.log("Global:", b);
Block: 30
Function: 20
Global: 10

var

var c = 10;
function displaySquare() {
    var c = 20;
    {
        var c = 30;
        console.log("Block:", c);
    }
    console.log("Function:", c);
}
displaySquare()
console.log("Global:", c)
Block: 30
Function: 30
Global: 10

const

const z = 10;
function displayZ() {
    const z = 20;
    {
        const z = 30;
        console.log("Block:", z);
    }
    console.log("Function:", z);
}

displayZ();
console.log("Global:", z);
Block: 30
Function: 20
Global: 10

Необъявленные переменные

function bar() {
    foo = "25";
}
bar();
console.log(foo);
25

Необъявленные переменные

function bar() {
    var foo = "25";
}
bar();
console.log(foo);
Uncaught ReferenceError: foo is not defined

strict mode

"use strict";
function bar() {
    foo = "25";
}

bar();
console.log(foo);
Uncaught ReferenceError: assignment to undeclared variable foo

Замыкания

Функции IIFE

Паттерн Модуль

Рекурсивные функции

Переопределение функций

Hoisting

Hoisting

console.log(foo);
Uncaught ReferenceError: foo is not defined

Hoisting

console.log(foo);
var foo = "Tom";
undefined

Hoisting

var c = a * b;
var a = 7;
var b = 3;
console.log(c);
NaN

Hoisting

display();

function display() {
    console.log("Hello Hoisting");
}
Hello Hoisting

Hoisting

display();

var display = function () {
    console.log("Hello Hoisting");
}
TypeError: display is not a function

Передача параметров по значению и по ссылке

Стрелочные функции

ООП

Строки

Браузерный компонент window

window

Window Objects

window

BOM visualization

BOM

Метод alert()

alert("hello world");

Метод confirm()

var result = confirm("Завершить выполнение программы?");
if (result === true) {
    document.write("Работа программы завершена");
} else {
    document.write("Программа продолжает работать");
}

Метод prompt()

var age = prompt("Введите свой возраст:");
document.write("Вам " + age + " лет");

Метод open()

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');

Метод close()

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');

function closeWindow() {
    popup.close();
}

setTimeout(closeWindow, 10000);

Метод moveTo()

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
popup.moveTo(50, 50);

Метод resizeTo()

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
popup.resizeTo(500, 350); // 500 - ширина и 350 - высота

Таймеры

Функция setTimeout()

var timerId = setTimeout(someFunction, period);
function timerFunction() {
    document.write("выполнение функции setTimeout");
}
setTimeout(timerFunction, 3000);
function timerFunction() {
    document.write("выполнение функции setTimeout");
}
var timerId = setTimeout(timerFunction, 3000);
clearTimeout(timerId);

Функция setInterval()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="time"></div>
    <script>
        function updateTime() {
            document.getElementById("time").innerHTML = new Date().toTimeString();
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

Функция requestAnimationFrame()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #rect {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: #50c878;
        }
    </style>
</head>
<body>
    <div id="rect"></div>
    <script>
        var square = document.getElementById("rect");
        var angle = 0;
        function rotate() {
            angle = (angle + 2) % 360;
            square.style.transform = "rotate(" + angle + "deg)";
            window.requestAnimationFrame(rotate);
        }
        var id = window.requestAnimationFrame(rotate);
    </script>
</body>
</html>

Функция requestAnimationFrame()

window.cancelAnimationFrame(id);

DOM

DOM

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h2>Page Header</h2>
    <div>
        <h3>Block Header</h3>
        <p>Text</p>
    </div>
</body>
</html>

DOM

DOM

Виды узлов (Node)

  • Element: HTML-элемент

  • Attr: атрибут HTML-элемента

  • Document: корневой узел HTML-документа

  • DocumentType: DTD или тип схемы XML-документа

  • DocumentFragment: место для временного хранения частей документа

  • EntityReference: ссылка на сущность XML-документа

Виды узлов (Node)

  • ProcessingInstruction: инструкция обработки веб-страницы

  • Comment: элемент комментария

  • Text: текст элемента

  • CDATASection: секция CDATA в документе XML

  • Entity: необработанная сущность DTD

  • Notation: нотация, объявленная в DTD

Методы для поиска элементов

  • getElementById(value)

  • getElementsByTagName(value)

  • getElementsByClassName(value)

  • querySelector(value)

  • querySelectorAll(value)

Поиск элементов

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <h3 id="header">Block Header</h3>
        <p>Text</p>
    </div>
    <script>
        var headerElement = document.getElementById("header");
        document.write("Текст заголовка: " + headerElement.innerText);
    </script>
</body>
</html>

Поиск элементов

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <h3>Заголовок</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        var pElements = document.getElementsByTagName("p");

        for (var i = 0; i < pElements.length; i++) {
            document.write("Текст параграфа: " + pElements[i].innerText + "<br/>");
        }
    </script>
</body>
</html>

Свойства объекта document

  • documentElement: предоставляет доступ к корневому элементу <html>

  • body: предоставляет доступ к элементу <body> на веб-странице

  • images: содержит коллекцию всех объектов изображений (элементов img)

  • links: содержит коллекцию ссылок - элементов <a> и <area>, у которых определен атрибут href

  • anchors: предоставляет доступ к коллекции элементов <a>, у которых определен атрибут name

  • forms: содержит коллекцию всех форм на веб-странице

Объект Node

DOM element types

Объект Node

  • childNodes: содержит коллекцию дочерних узлов

  • firstChild: возвращает первый дочерний узел текущего узла

  • lastChild: возвращает последний дочерний узел текущего узла

  • previousSibling: возвращает предыдущий элемент, который находится на одном уровне с текущим

  • nextSibling: возвращает следующий элемент, который находится на одном уровне с текущим

Объект Node

  • ownerDocument: возвращает корневой узел документа

  • parentNode: возвращает элемент, который содержит текущий узел

  • nodeName: возвращает имя узла

  • nodeType: возвращает тип узла в виде числа. 1 - элемент, 2 - атрибут, 3 - текст

  • nodeValue: возвращает или устанавливает значение узла в виде простого текста

Объект Node

DOM node relationships

Создание, добавление элементов веб-страницы

  • document.createElement(elementName): создает элемент html, тег которого передается в качестве параметра. Возвращает созданный элемент

  • document.createTextNode(text): создает и возвращает текстовый узел. В качестве параметра передается текст узла.

  • node.appendChild(newNode): добавляет новый узел newNode в конец коллекции дочерних узлов

  • node.insertBefore(newNode, referenceNode): добавляет новый узел newNode перед узлом referenceNode

Создание, добавление элементов веб-страницы

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="article">
        <h3>Заголовок статьи</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        var articleDiv = document.querySelector("div.article");
        // создаем элемент
        var elem = document.createElement("h2");
        // создаем для него текст
        var elemText = document.createTextNode("Привет мир");
        // добавляем текст в элемент в качестве дочернего элемента
        elem.appendChild(elemText);
        // добавляем элемент в блок div
        articleDiv.appendChild(elem);
    </script>
</body>
</html>

Другие методы

  • node.cloneNode()

  • node.removeChild(removalNode)`

  • node.replaceChild(newNode, oldNode)

Объект Element

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="article">
        <h3>Заголовок статьи</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        function getChildren(elem) {
            for(var i in elem.childNodes) {
                if(elem.childNodes[i].nodeType===1) {
                    console.log(elem.childNodes[i].tagName);
                    getChildren(elem.childNodes[i]);
                }
            }
        }
        var root = document.documentElement;
        console.log(root.tagName);
        getChildren(root);
    </script>
</body>
</html>

Свойства innerText и innerHTML

var pElement = document.querySelectorAll("div.article p")[0];
pElement.innerText = "hello";
pElement.textContent = "hello";
var articleDiv = document.querySelector("div.article");
articleDiv.innerHTML ="<h2>Hello World!!!</h2><p>bla bla bla</p>";

Методы управления атрибутами объекта Element

  • getAttribute(attr): возвращает значение атрибута attr

  • setAttribute(attr, value): устанавливает для атрибута attr значение value. Если атрибута нет, то он добавляется

  • removeAttribute(attr): удаляет атрибут attr и его значение

Методы управления атрибутами объекта Element

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="article" style="color:red;">
        <h3>Заголовок статьи</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        var articleDiv = document.querySelector("div.article");
        // получаем атрибут style
        var styleValue = articleDiv.getAttribute("style");
        console.log("До изменения атрибута: " + styleValue);
        // удаляем атрибут
        articleDiv.removeAttribute("style");
        // добавляем заново атрибут style
        articleDiv.setAttribute("style", "color:blue;");
        styleValue = articleDiv.getAttribute("style");
        console.log("После изменения атрибута: " + styleValue);
    </script>
</body>
</html>

Размеры и позиция элементов

  • offsetWidth

  • offsetHeight

  • clientWidth

  • clientHeight

Events

Events

  • События мыши (перемещение курсора, нажатие мыши и т.д.)

  • События клавиатуры (нажатие или отпускание клавиши клавиатуры)

  • События жизненного цикла элементов (например, событие загрузки web-станицы)

  • События элементов форм (нажатие кнопки на форме, выбор элемента в выпадающем списке и т.д.)

  • События, возникающие при изменении элементов DOM

  • События, возникающие при касании на сенсорных экранах

  • События, возникающие при возникновении ошибок

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="rect" onclick="displayMessage()" style="width:50px;height:50px;background-color:blue;">
    </div>
    <script>
        function displayMessage() {
            alert('Нажато');
        }
    </script>
</body>
</html>

Передача параметров обработчику события

<a href="page1.html" onclick="handler(this)">Страница 1</a>
<script>
    function handler(obj) {
        alert(obj.href);
    }
</script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #rect {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="rect" onclick="handler(event)"></div>
    <script>
        function handler(e) {
            alert(e.type);
        }
    </script>
</body>
</html>

Обработчики событий

Встроенные обработчики

<div id="rect" onclick="handler(event)"></div>

Минусы

  • Код HTML смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение.

  • Обработчики событий можно задать только для уже созданных на web-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий.

  • К элементу для одного события может быть прикреплен только один обработчик.

  • Нельзя удалить обработчик без изменения кода

Свойства обработчиков событий

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #rect {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="rect">
    </div>
    <script>
        function handler(e) {
            alert(e.type);
        }
        document.getElementById("rect").onclick = handler;
    </script>
</body>
</html>

Слушатели событий

  • EventTarget.addEventListener() для добавления слушателя

  • EventTarget.removeEventListener() для удаления слушателя

Слушатели событий

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #rect {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="rect">
    </div>
    <script>
        var rect = document.getElementById("rect");
        rect.addEventListener("click", function(e) {
            alert(e.type);
        });
    </script>
</body>
</html>

Плюсы

var clicks = 0;

function handlerOne(e) {
    alert(e.type);
}

function handlerTwo(e) {
    clicks++;
    var newNode = document.createElement("p");
    newNode.textContent = "произошло нажатие " + clicks;
    document.body.appendChild(newNode);
}

var rect = document.getElementById("rect");
// прикрепляем первый обработчик
rect.addEventListener("click", handlerOne);
// прикрепляем второй обработчик
rect.addEventListener("click", handlerTwo);

Объект Event

Объект Event

  • bubbles: возвращает true, если событие является восходящим. Например, если событие возникло на вложенном элементе, то оно может быть обработано на родительском элементе.

  • cancelable: возвращает true, если можно отменить стандартную обработку события.

  • currentTarget: определяет элемент, к которому прикреплен обработчик события.

Объект Event

  • defaultPrevented: возвращает true, если был вызван у объекта Event метод preventDefault().

  • eventPhase: определяет стадию обработки события.

  • target: указывает на элемент, на котором было вызвано событие.

  • timeStamp: хранит время возникновения события.

  • type: указывает на имя события.

Распространение событий

  • Восходящие: событие распространяется вверх по дереву DOM от дочерних узлов к родительским.

  • Нисходящие: событие распространяется вниз по дереву DOM от родительских узлов к дочерним, пока не достигнет того элемента, на котором это событие и возникло.

Распространение событий

Eventflow

Остановка восходящего

var redRect = document.getElementById("redRect");
redRect.addEventListener("click", function(e){
    console.log("Событие на redRect");
    e.stopPropagation();
});

Включение нисходящего

var redRect = document.getElementById("redRect");
redRect.addEventListener("click", function() {console.log("Событие на redRect");}, true);
var blueRect = document.getElementById("blueRect");
blueRect.addEventListener("click", function() {console.log("Событие на blueRect");}, true);
document.body.addEventListener("click", function() {console.log("Событие на body");}, true);

События мыши

События клавиатуры