所谓事件，就是指我们在页面上的一些交互操作，比如单击鼠标，按下键盘等等
当我们需要操作某些元素使它有一定的交互效果时，就需要给相应的元素绑定事件处理函数
事件绑定分为3种，分别是HTML内嵌（不推荐）、传统事件绑定（也叫DOM0级事件绑定）、以及DOM2级事件绑定
1.HTML内嵌
<!--省略之前代码-->
<body>
<a href="#" onclick="fnEvent()">点我触发事件</a>
</body>
<script>
function fnEvent(){
alert("绑定了事件");
}
</script>
但是这种写法违背了结构表现行为分离的原则，所以并不推荐这样绑定事件
2.DOM0级事件绑定
//省略之前代码
var aA=document.getElementsByTagName("a")[0];
aA.onclick=function(){
alert("绑定事件成功！");
}
//也可以写成
function abc(){
alert("绑定事件成功");
}
aA.onclick=abc;
这是一种赋值的写法，相当于直接将事件处理函数赋值给元素的点击事件，非常简单
缺点是一个元素一次只能绑定一个事件处理函数，新绑定的事件处理函数也会覆盖旧的事件处理函数
3.DOM2级事件绑定
DOM2级事件绑定涉及到IE与标准W3C兼容性问题
还是以上一段代码中的a元素为例，W3C的绑定方式为
var aA=document.getElementsByTagName("a")[0];
aA.addEventListener(‘click‘,function(e){
alert("事件绑定成功");
},false);
//这里aA元素调用addEventListener方法，传入三个参数，分别为事件类型（不带on），事件处理函数以及是否事件捕获（true为事件捕获，false为事件冒泡）
而IE下的绑定方式为
aA.attachEvent(‘onclick‘,function(){
alert("绑定了事件");
});
//需要注意的是，IE仅支持事件冒泡，事件处理函数中如果使用this，那么this指向的是window对象，而不是当前元素
//IE的事件绑定函数中事件类型需要带on
这么一来就需要兼容W3C与IE的不同绑定方式
DOM2级事件跨浏览器绑定
//跨浏览器绑定事件
function addEvent(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else{
element.attachEvent(‘on‘+type,fn);
}
}
时间： 2024-10-06 23:56:31