js为元素添加监听事件

JavaScript06

js为元素添加监听事件,第1张

语法

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中的实现如下:function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])eventFlag : 事件名称,如click、mouseover…eventFunc: 绑定到事件中执行的动作useCapture: 指定是否绑定在捕获阶段,true为是,false为否,默认为true在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流IE中使用自有的attachEvent函数绑定时间,函数定义如下:function attachEvent(string eventFlag, function eventFunc)eventFlag: 事件名称,但要加上on,如onclick、onmouseover…eventFunc: 绑定到事件中执行的动作在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流总结:addEventListener(string eventFlag, function eventFunc, [bool useCapture=false]),针对ff,chrome,safari浏览器,false指冒泡阶段,默认为true,指捕获阶段。不过一般我们都用false。 attachEvent(string eventFlag, function eventFunc),针对ie系列、还有opera浏览器,少了事件处理机制的参数,只指定事件类型(别忘了on)和触发哪个函数。