1、addEventListener()方法
用于向指定元素添加事件句柄。
addEventListener()方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向任何DOM对象添加事件监听,向一个元素添加多个事件句柄,或向同个元素添加多个同类的事件句柄,如两个'click'事件。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
语法:
element.addEventListener(event, function, useCapture);
第一个参数是事件类型(如'click')。
第二个参数是事件触发后调用的函数。
第三个是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的,默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
例:
document.getElementById('id').addEventListener('click', function(){ alert('Hello World!'); });
(1)同一元素多个同类型事件
var x = document.getElementById('id'); x.addEventListener('click', myFunction); x.addEventListener('click', someOtherFunction); function myFunction() { alert ('Hello World!') } function someOtherFunction() { alert ('函数已执行!') }
(2)同一元素多个不同事件
var x = document.getElementById('id'); x.addEventListener('mouseover', myFunction); x.addEventListener('mouseout', mySecondFunction); function myFunction() { document.getElementById('demo').innerHTML += 'Moused over!<br>' } function mySecondFunction() { document.getElementById('demo').innerHTML += 'Clicked!<br>' }
(3)当传递参数值时,使用'匿名函数'调用带参数的函数
document.getElementById('id').addEventListener('click', function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById('demo').innerHTML = result; }
2、removeEventListener()方法
该方法移除由addEventListener()方法添加的事件句柄。
语法:
element.removeEventListener(event, myFunction);
注:
(1)addEventListener()与removeEventListener()方法兼容低版本浏览器可用attachEvent()与detachEvent()。
(2)useCapture:用于描述事件是冒泡还是捕获。
事件捕获:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
例:
<div> <P onclick='function()'></P> </div>
上例中:事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。