JS绑定事件三种方式

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JS绑定事件三种⽅式
三种⽅式
1、在DOM中直接绑定
2、在JS代码中直接绑定
3、使⽤事件监听函数绑定事件
⼀、在DOM中直接绑定
也就是直接在html标签中通过 onXXX=“” 来绑定。

举个例⼦：
<input type="button" value="点我呦" οnclick="alert("hello world!")"/>

<input type="button" value="点我呦" οnclick="testAlert()">
<script type="text/javascript">
function testAlert(){
alert("hello world!");
}
</script>
缺点：
不利于⾏为和结构相分离，耦合度太⾼，不建议在项⽬中使⽤。

在遇到相同类型的事件时，只会去处理第⼀个事件，⽽忽略后续的事件。

传统⽅法只会在事件冒泡中运⾏，⽽⾮捕获和冒泡
事件对象参数(e)仅⾮IE浏览器可⽤
优点：
⾮常简单和稳定，可以确保它在你使⽤的不同浏览器中运作⼀致
处理事件时，this关键字引⽤的是当前元素
事件解绑
对象.on事件名字=null;
<body>
<input type="button" value="第⼀个按钮" id="btn1"/>
<input type="button" value="⼲掉第⼀个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
document.getElementById("btn1").onclick = function () {
console.log("码仙");
};
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").onclick = null;
};
</script>
</body>
⼆、JavaScript代码中直接绑定
在JavaScript中通过查找DOM对象，对其绑定，elementObject.οnclick=function(){} 的格式，举例如下<input type="button" value="点我呦" id="demo">
<script type="text/javascript">
document.getElementById("demo").οnclick=function testAlert(){
alert("hello world!");
}
</script>
优点
将⾏为与结构分离开了
⾮常简单和稳定，可以确保它在你使⽤的不同浏览器中运作⼀致
处理事件时，this关键字引⽤的是当前元素
缺点：
传统⽅法只会在事件冒泡中运⾏，⽽⾮捕获和冒泡
⼀个元素⼀次只能绑定⼀个事件处理函数。

新绑定的事件处理函数会覆盖旧的事件处理函数
事件对象参数(e)仅⾮IE浏览器可⽤
事件解绑
对象.on事件名字=null;
<body>
<input type="button" value="第⼀个按钮" id="btn1"/>
<input type="button" value="⼲掉第⼀个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
document.getElementById("btn1").onclick = function () {
console.log("码仙");
};
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").onclick = null;
};
</script>
</body>
三、通过事件监听函数绑定
使⽤ attachEvent(IE⽅式) 和 addEventListenter(W3C⽅式) 的好处就是，可以多次的进⾏事件的绑定，不向原始的⽅法那样，前⾯绑定的事件将会被后⾯的绑定的事件所覆盖，最后只能执⾏后⾯所绑定的函数。

从⽹上找到了⼀个兼容的好办法，相⽐较if…else…语句，这个⽅法⽤的是
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期浏览器
}
}
}
W3C绑定的优点
1.该⽅法同时⽀持事件处理的捕获和冒泡阶段。

事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。

2.在事件处理函数内部，this关键字引⽤当前元素。

3.事件对象总是可以通过处理函数的第⼀个参数(e)捕获。

4.可以为同⼀个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
W3C绑定的缺点
IE不⽀持，你必须使⽤IE的attachEvent函数替代。

IE⽅式的优点
可以为同⼀个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。

IE⽅式的缺点
1.IE仅⽀持事件捕获的冒泡阶段
2.事件监听函数内的this关键字指向了window对象，⽽不是当前元素（IE的⼀个巨⼤缺点）
3.事件对象仅存在与window.event参数中
4.事件必须以ontype的形式命名，⽐如，onclick⽽⾮click
5.仅IE可⽤。

你必须在⾮IE浏览器中使⽤W3C的addEventListener
解除绑定
1.绑定事件对象.addEventListener(“没有on的事件类型”,命名函数,false);
解绑事件对象.removeEventListener(“没有on的事件类型”,函数名字,false);
2.绑定事件对象.attachEvent(“on事件类型”,命名函数);
解绑事件对象.detachEvent(“on事件类型”,函数名字);
四、说说JQuery中绑定事件的⼏种⽅法。

主要有on()、bind()、live()、delegate()等⼏种，相对应的解绑就是off()、unbind()、live()、undelegate();
1 on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。

2 这⼏种⽅法中各⾃有对应⽀持的JQuery版本。

3 在给动态添加的页⾯元素绑定事件时，通常⽤on()⽅法。