JavaScript学习总结4--事件绑定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习总结4--事件绑定相关的知识，希望对你有一定的参考价值。
所谓事件，就是指我们在页面上的一些交互操作，比如单击鼠标，按下键盘等等
当我们需要操作某些元素使它有一定的交互效果时，就需要给相应的元素绑定事件处理函数
事件绑定分为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); } }
以上是关于JavaScript学习总结4--事件绑定的主要内容，如果未能解决你的问题，请参考以下文章