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>