事件添加的三种方式
- 通过HTML的属性添加事件
- DOM0级的事件绑定
- DOM2级的事件绑定
一、通过HTML的属性添加事件
<div onclick="something()"></div>
缺点:耦合性大,不易于维护,仅可添加一个事件
二、DOM0级的事件绑定
var target=document.getElementById("target");
target.onclick=function(){
alert("Hello!");
}
缺点:仅能为当前页面已加载的DOM节点进行事件绑定,若添加多个同类型事件,则后来的事件会覆盖原有的事件
三、DOM2级的事件绑定
var target=document.getElementById("target");
if(target.addEventListener){
//调用addEventListener方法,获取触发事件的目标节点通过e.target
target.addEventListener("click",clickFunction,false);
}else{
//兼容IE,调用attachEvent方法,获取触发事件的目标节点通过e.srcElement
target.attachEvent("onclick",clickFunction);
}
优点:可为页面后续添加的DOM节点一并绑定事件
应用场景:事件代理,即在需要为拥有共同直接父节点的一类DOM节点绑定相似的事件时,只需给这类DOM节点的父节点绑定事件,利用事件冒泡原理,子节点触发的事件,让它的父元素代替执行。
addEventListener语法
element.addEventListener(event, function, useCapture)
- event 必须。字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
- function 必须。指定要事件触发时执行的函数。
- useCapture 可选。布尔值,默认为false(事件句柄在冒泡阶段执行),指定事件是否在捕获或冒泡阶段执行。
attachEvent语法
element。attachEvent(event, function)
- event 必须。字符串,指定事件名。注意: 使用 “on” 前缀。 例如,使用 “onclick” ,而不是使用 “click”。
- function 必须。指定要事件触发时执行的函数。
事件代理(事件委托)Demo
<ul id="list">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
//点击表单里的任意一个a标签,将该标签所在的li标签背景色变为红色
var list=document.getElementById("list");
list.addEventListener('click',function(e){
if (e.target && e.target.nodeName.toUpperCase() == 'A') {
e.target.parentNode.style.backgroundColor="red";
};
})