首页 > 编程语言 > 详细

JavaScript addEventListener()事件监听方法

时间:2021-03-18 09:53:12      阅读:39      评论:0      收藏:0      [点我收藏+]

文章链接:https://www.cnblogs.com/jc2182/p/11307165.html

addEventListener()方法将事件处理程序附加到指定的元素。

addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序。

您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序,即两个“单击”事件。

您可以将事件侦听器添加到任何DOM对象,而不仅仅是HTML元素。即window对象。

addEventListener()方法可以更容易地控制事件对冒泡的反应。

使用addEventListener()方法时,JavaScript与HTML标记分离,以提高可读性,

并允许您添加事件侦听器,即使您不控制HTML标记也是如此。

您可以使用removeEventListener()方法轻松删除事件侦听器。

语法:element.addEventListener(event, function, useCapture);
  • 第一个参数是事件的类型(如“ click”或“ mousedown”)。
  • 第二个参数是我们想要在事件发生时调用的函数。
  • 第三个参数是一个布尔值,指定是使用事件冒泡还是事件捕获。此参数是可选的。
请注意,您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。
document.getElementById("myBtn").addEventListener("click", displayDate);

向元素添加事件处理程序

当用户点击某个元素时提醒“Hello World!” :
element.addEventListener("click", function(){ alert("Hello World!"); });

您还可以在外部定义函数,然后把函数名当参数传:

element.addEventListener("click", myFunction);
function myFunction() {
  alert ("Hello World!");
}

将许多事件处理程序添加到同一元素

addEventListener()方法允许您向同一元素添加许多事件,而不会覆盖现有事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);

将事件处理程序添加到window对象

addEventListener()方法允许您在任何HTML DOM对象上添加事件侦听器,例如HTML元素,HTML文档,window对象或支持事件的其他对象,
xmlHttpRequest对象。
添加在用户调整窗口大小时触发的事件侦听器:
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

传递参数值时,使用“匿名函数”,使用以下参数调用指定的函数:

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡或事件捕获?

HTML DOM中有两种事件传播方式,即冒泡和捕获。
事件传播是一种在事件发生时定义元素顺序的方法。
如果<div>元素中有<p>元素,并且用户单击<p>元素,应该首先处理哪个元素的“click”事件?
在冒泡中,首先处理内部元素的事件,然后处理外部:首先处理<p>元素的click事件,然后处理<div>元素的click事件。
在捕获最外层元素时,首先处理事件然后处理内部:首先处理<div>元素的click事件,然后处理<p>元素的click事件。
使用addEventListener()方法,您可以使用“useCapture”参数指定传播类型:
默认值为false,将使用冒泡传播,当值设置为true时,事件使用捕获传播。
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener()方法

element.removeEventListener("mousemove", myFunction);

:该addEventListener()和removeEventListener()方法并不在IE 8和更早版本的支持。

但是,对于这些特定的浏览器版本,您可以使用attachEvent()方法将事件处理程序附加到元素,以及detachEvent()删除它的方法,解决方案

技术分享图片
var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 对于所有主流浏览器,IE 8及更早版本除外
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {   // 适用于IE 8及更早版本
  x.attachEvent("onclick", myFunction);
}
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById(btn);
            btn.addEventListener(click, function () {
                alert(你好);
            })

            btn.addEventListener(click, function () {
                alert(明天);
            })
        }
    </script>
</head>
<body>
<input type="button" value="点击" id="btn">
</body>
</html>

 

JavaScript addEventListener()事件监听方法

原文:https://www.cnblogs.com/ella-li/p/14553405.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!