js为元素添加监听事件

Posted 2023-04-23

参考技术A 语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

addEventListener可以对一个dom添加多个监听器，并且会顺序执行。

开发中，会遇到多个js文件都使用window.onload，然而只有最后一个绑定的生效，如下：
window.onload = func1();
window.onload = func2();

这时可以用addEventListener来解决：
window.addEventListener('load', func1);
window.addEventListener('load', func2);

js添加事件监听

　1）对于大多数浏览器添加事件监听使用addEventListener()，此函数使用方式为obj.addEventListener(‘method‘,‘function‘,bool);如添加鼠标点击事件click,移动　　mousemove等，第二个参数为调用的方法，第三个参数表示是否需要捕捉，是一个bool值；true表示使用capture,false表示bubbling，一般情况下都是用FALSE;此方法对于相同的函数只绑定一次，也就是说重复绑定相同的函数，只执行一次该方法。当一个对象同一种动作绑定了多个方法，调用顺序则是先绑定先调用，区别于下面的attachEvent。

　　2)对于IE浏览器来说对应的添加监听事件则是attachEvent。对事件进行监听时，区别于addEventListener的click等写法而应该使用onclick来进行表示。此方法调用时没有bool值这个参数。

　　一般为了解决浏览器的兼容性，常进行以下书写方式(以鼠标点击事件为例)：

　　if(obj.addEventListener)

　　　　obj.addEventListener("click","fun",false);

　　else if(obj.attachEvent)

　　　　obj.attachEvent("onclick","fun");

　　else

　　　　obj.onclick=fun;