JavaScript addEventListener()
Добавить в избранное
Метод addEventListener() используется для присоединения обработчика события к определенному элементу. Он не переопределяет существующие обработчики событий. Говорят, что события являются неотъемлемой частью JavaScript. Веб-страница отвечает в соответствии с произошедшим событием. События могут быть сгенерированы пользователем или сгенерированы API. Прослушиватель событий — это процедура JavaScript, ожидающая возникновения события.
Метод addEventListener() является встроенной функцией JavaScript. Мы можем добавить несколько обработчиков событий к определенному элементу, не перезаписывая существующие обработчики событий.
Синтаксис
element.addEventListener(event, function, useCapture);
Хотя он имеет три параметра, параметры event и function широко используются. Третий параметр не является обязательным для определения. Значения этой функции определяются следующим образом.
Значения параметров
event: это обязательный параметр. Его можно определить как строку, указывающую имя события.
Примечание. Не используйте какой-либо префикс, такой как «on», со значением параметра. Например, используйте «click» вместо «onclick».
function: Это также обязательный параметр. Это функция JavaScript,которая реагирует на событие.
useCapture: это необязательный параметр. Это значение логического типа, которое указывает, выполняется ли событие на этапе всплытия или захвата. Его возможные значения — true и false . Если установлено значение true, обработчик событий выполняется на этапе захвата. Когда для него установлено значение false, обработчик выполняется в фазе всплытия. Его значение по умолчанию — false.
Давайте посмотрим на некоторые примеры использования метода addEventListener().
Пример
Это простой пример использования метода addEventListener(). Мы должны нажать данную кнопку HTML,чтобы увидеть эффект.
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Пример метода addEventListener().</p>
<p>Нажмите кнопку, чтобы увидеть эффект.</p>
<button id="btn">Кликни меня</button>
<p id="para"></p>
<script>
document.querySelector("#btn").addEventListener("click", function() {
document.querySelector("#para").innerHTML = "Привет мир" + "<br>" + "добро пожаловать";
});
</script>
</body>
</html>
Теперь в следующем примере мы увидим, как добавить много событий к одному и тому же элементу, не перезаписывая существующие события.
Пример
В этом примере мы добавляем несколько событий к одному и тому же элементу.
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Это пример добавления нескольких событий к одному и тому же элементу.</p>
<p>Нажмите кнопку, чтобы увидеть эффект.</p>
<button id="btn">Кликни меня</button>
<p id="para"></p>
<p id="para1"></p>
<script>
function fun() {
alert("добро пожаловать");
}
function fun1() {
document.querySelector("#para").innerHTML = "я вторая функция";
}
function fun2() {
document.querySelector("#para1").innerHTML = "я третья функция";
}
let mybtn = document.querySelector("#btn");
mybtn.addEventListener("click", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("click", fun2);
</script>
</body>
</html>
Пример
В этом примере мы добавляем несколько событий разного типа к одному и тому же элементу.
<html>
<head>
<title>Document</title>
</head>
<body>
<p>навидите на кнопку мышкой и нажмите кнопку, чтобы увидеть эффект.</p>
<button id="btn">Кликни меня</button>
<p id="para"></p>
<script>
function fun() {
btn.style.width = "50px";
btn.style.height = "50px";
btn.style.background = "yellow";
btn.style.color = "blue";
}
function fun1() {
document.querySelector("#para").innerHTML = "привет человек";
}
function fun2() {
btn.style.width = "";
btn.style.height = "";
btn.style.background = "";
btn.style.color = "";
}
let mybtn = document.querySelector("#btn");
mybtn.addEventListener("mouseover", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("mouseout", fun2);
</script>
</body>
</html>
Всплывание событий или захват событий
Теперь мы понимаем использование третьего параметра JavaScript addEventListener(), то есть useCapture.
В HTML DOM Bubbling и Capturing — это два способа распространения событий. Мы можем понять эти способы, взяв пример.
Предположим, у нас есть элемент div и элемент абзаца внутри него, и мы применяем событие «щелчок» к ним обоим, используя метод addEventListener() . Теперь вопрос заключается в том, чтобы щелкнуть элемент абзаца, событие щелчка какого элемента обрабатывается первым.
Таким образом, в Bubbling сначала обрабатывается событие элемента абзаца, а затем обрабатывается событие элемента div. Это означает, что при всплытии сначала обрабатывается событие внутреннего элемента, а затем будет обрабатываться событие самого внешнего элемента.
При захвате сначала обрабатывается событие элемента div, а затем обрабатывается событие элемента абзаца. Это означает, что при захвате сначала обрабатывается событие внешнего элемента, а затем будет обрабатываться событие самого внутреннего элемента.
addEventListener(событие, функция, useCapture);
Мы можем указать распространение, используя параметр useCapture . Если для него задано значение false (это его значение по умолчанию), событие использует всплывающее распространение, а когда оно установлено в значение true, происходит распространение с захватом.
Мы можем понять пузырение и захват , используя пример.
Пример
В этом примере есть два элемента div. Мы можем видеть всплывающий эффект на первом элементе div и эффект захвата на втором элементе div.
Когда мы дважды щелкаем элемент span первого элемента div, событие элемента span обрабатывается первым, а не элемента div. Это называется бульканием .
Но когда мы дважды щелкаем элемент span второго элемента div, событие элемента div обрабатывается первым, а не элемента span. Это называется захват .
<html>
<head>
<title>Document</title>
<style>
div {
background-color: lightblue;
border: 2px solid red;
font-size: 25px;
text-align: center;
}
span {
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="d1">
Это элемент div.
<br>
<span id="s1">Это элемент span.</span>
</div>
<h1>Захват</h1>
<div id="d2">
Это элемент div.
<br>
<span id="s2">Это элемент span.</span>
</div>
<script>
document.querySelector("#d1").addEventListener("dblclick", function() {
alert('вы дважды щёлкнули на элемент div')
}, false);
document.querySelector("#s1").addEventListener("dblclick", function() {
alert('вы дважды щёлкнули элемент span')
}, false);
document.querySelector("#d2").addEventListener("dblclick", function() {
alert('вы дважды щёлкнули элемент div')
}, true);
document.querySelector("#s2").addEventListener("dblclick", function() {
alert('вы дважды щёлкнули на элемент span')
}, true);
</script>
</body>
</html>