addEventListener方法

最新推荐文章于 2022-12-28 17:21:25 发布

逍遥的码农

最新推荐文章于 2022-12-28 17:21:25 发布

阅读量7.5k

点赞数 4

分类专栏： js专栏文章标签： js javascript html

本文链接：https://blog.youkuaiyun.com/weixin_48171107/article/details/110244475

版权

js专栏专栏收录该内容

32 篇文章

订阅专栏

addEventListener()方法
这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：

addEventListener(event, function, useCapture)

参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
参数 function 也是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是**捕获，true表示捕获，默认的false表示冒泡。

移除事件监听
如果要移除 addEventListener() 添加的事件监听，就要使用removeEventListener()，语法是：

removeEventListener(event, function)

参数与addEventListener()一致。

addEventListener 的用法

一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如：

body代码：

<body>
    <button id="btn">点击</button>
</body>

js代码：

	//普通alert代码
	//它只会执行最后一个提示代码
	document.getElementById("btn").onclick = function () {
        alert(1)
    }
    document.getElementById("btn").onclick = function () {
        alert(2)
    }
    document.getElementById("btn").onclick = function () {
        alert(3)
    }
    
    //addEventListener方法
    //他会依次执行每个alert框都可以弹出
    //用addEventListener可以让多个事件按顺序都实现，比如：
    var btn1 = document.getElementById("btn");
    btn1.addEventListener("click", function(){alert(1)}, false);
    btn1.addEventListener("click", function(){alert(2)}, false);
    btn1.addEventListener("click", function(){alert(3)}, false);

加油吧骚年