JS中事件绑定的方式
事件绑定的方式主要有三种：内联式绑定、外联式绑定、事件监听式绑定。
内联式绑定
行内绑定也叫行内绑定，就是在标签内直接写事件。在内联式绑定中其this并不是指向当前正在操作的dom对象 ，而是指向window。
语法：<标签 属性 事件=”事件的处理函数” ></标签>
**缺点：**无法实现行为结构分离，不利于维护。
<body>
<input type= "text" onclick="txt()">
</body>
<script>
function txt(){
console.log("哈哈哈哈");
console.log(this); //window
}
</script>
外联式绑定
外联式绑定也叫动态绑定，在js标签或者代码块中写。内联式
语法：dom对象.事件 = 事件的处理函数 （通常是一个匿名函数）
**缺点：**虽然相比内联式绑定，实现了行为和结构的分离，但是无法重复绑定相同事件 。在事件内部的this并指向当前正在操作的dom对象 。
//当重复绑定相同事件时，后边的事件会覆盖掉前边的事件
<body>
<div id="box"></div>
</body>
<script>
var obox = document.getElementById("box");
obox.onclick = function(){
console.log(1); //1
}
//此时，下边的事件会重新赋值，把上边的事件给覆盖掉。
obox.onclick = function(){
console.log(2); //2
console.log(this); //obox
}
// 外联式绑定删除事件,利用覆盖的原理
obox.onclick = null;
</script>
监听式绑定事件
监听式绑定事件也是DOM2级事件绑定 ，是监听某个行为，当这个行为被触发时，执行对应事件处理函数 。
**兼容火狐谷歌及IE8以上的方法 **
添加事件监听的语法：元素.addEventListener(参数1, 参数2, 参数3)
删除事件监听的语法 ：元素.removeEventListener(参数1, 参数2, 参数3)
- 参数1：事件类型 ，不需要加on
- 参数2：回调函数，表示将来的事件处理函数
- 参数3：布尔值，true捕获，false冒泡（默认）
<body>
<div id="box"></div>
</body>
<script>
var obox = document.getElementById("box");
obox.addEventListener("click",fn1,false);
//点击事件的事件处理函数fn1
function fn1(){
console.log(1);
}
obox.addEventListener("click",fn2,false);
//点击事件的事件处理函数fn2
function fn2(){
console.log(2);
}
// 删除事件监听的方法,可以通过事件处理函数的句柄（函数名）删除
obox.removeEventListener("click",fn1,false);
obox.removeEventListener("click",fn2,false);
</script>
兼容IE678 的方法
添加事件监听的语法：元素.attachEvent(参数1, 参数2)
删除事件监听的语法 ：元素.detachEvent(参数1, 参数2)
- 参数1：事件类型：需要加on，如：“onclick”
- 参数2：要删除的事件处理函数的句柄
<body>
<div id="box"></div>
</body>
<script>
var obox = document.getElementById("box");
obox.attachEvent("click",fn1);
//点击事件的事件处理函数fn1
function fn1(){
console.log(1);
}
obox.attachEvent("click",fn2);
//点击事件的事件处理函数fn2
function fn2(){
console.log(2);
}
// 删除事件监听的方法,可以通过事件处理函数的句柄（函数名）删除
obox.detachEvent("click",fn1);
obox.detachEvent("click",fn2);
</script>
监听式绑定事件的封装
<body>
<div id="box"></div>
</body>
<script>
var obox = document.getElementById("box");
//封装的原理:当浏览器不支持是值会变成undefined。
//添加监听式绑定事件的封装
function addEvent(ele,type,cb){
if(ele.addEventListener){
ele.addEventListener(type,cb,false);
}else{
ele.attachEvent("on"+type,cb);
}
}
//删除监听式绑定事件的封装
function removeEvent(ele,type,cb){
if(ele.removeEventListener){
ele.removeEventListener(type,cb,false);
}else{
ele.detachEvent("on"+type,cb);
}
}
//添加监听式绑定事件的测试代码
addEvent(obox,"click",fn1);
function fn1(){
console.log(1)
}
addEvent(obox,"click",fn2);
function fn2(){
console.log(2)
}
//删除监听式绑定事件的测试代码
removeEvent(obox,"click",fn1)
removeEvent(obox,"click",fn2)
</script>
