JavaScript中事件的绑定与解绑

我心飞翔 分类:javascript

blog.csdn.net/tswc_byy/ar…

一、事件的绑定

1. 对象.on事件名字=事件处理函数

缺点:如果绑定多个事件,前面的事件会被后面的事件覆盖

<body>
<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>
<script>
    document.getElementById("btn").onclick = function () {
        console.log("第一");
    };
    document.getElementById("btn").onclick = function () {
        console.log("第二");
    };
</script>
</body>
 

2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);

解释:第三个参数在本篇文章的事件阶段中有解释

优点:可以绑定多个事件

缺点:谷歌和火狐支持,IE8不支持

<body>
<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>
<script>
    document.getElementById("btn").addEventListener("click", function () {
        console.log("第一");
    }, false);
    document.getElementById("btn").addEventListener("click", function () {
        console.log("第二");
    }, false);
</script>
 

3. 对象.attachEvent("有on的事件名字",事件处理函数);

优点:可以绑定多个事件

缺点:谷歌和火狐不支持,IE8支持

<body>
<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>
<script>
    document.getElementById("btn").attachEvent("onclik", function () {
        console.log("第一");
    });
    document.getElementById("btn").attachEvent("click", function () {
        console.log("第二");
    }, false);
</script>
</body>
 

4.总结绑定事件的区别

1.方法名不一样
2.参数个数不一样addEventListener三个参数

   attachEvent两个参数

3.addEventListener 谷歌,火狐,IE11支持,IE8不支持

   ttachEvent 谷歌火狐不支持,IE11不支持,IE8支持

4.this不同,addEventListener 中的this是当前绑定事件的对象

   attachEvent中的this是window

5.addEventListener中事件的类型(事件的名字)没有on

   attachEvent中的事件的类型(事件的名字)有on

5.兼容代码

<script>
    //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
    function addEventListener(element, type, fn) {
        //判断浏览器是否支持这个方法
        if (element.addEventListener) {
            element.addEventListener(type, fn, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, fn);
        } else {
            element["on" + type] = fn;
        }
    };
</script>
 

 测试

二、事件的解绑

1.注意(必看)

用什么方式绑定事件,就应该用对应的方式解绑事件

1.解绑事件
对象.on事件名字=事件处理函数--->绑定事件
对象.on事件名字=null;
2.解绑事件
对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
对象.removeEventListener("没有on的事件类型",函数名字,false);
3.解绑事件
对象.attachEvent("on事件类型",命名函数);---绑定事件
对象.detachEvent("on事件类型",函数名字);

2.对象.on事件名字=null;

3.对象.removeEventListener("没有on的事件类型",函数名字,false);

<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
function f1() {
console.log("第一个");
};
function f2() {
console.log("第二个");
};
document.getElementById("btn1").addEventListener("click", f1, false);
document.getElementById("btn1").addEventListener("click", f2, false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
document.getElementById("btn2").onclick = function () {
//解绑事件的时候,需要在绑定事件的时候,使用命名函数
document.getElementById("btn1").removeEventListener("click", f1, false);
};
</script>
</body>

4.对象.detachEvent("on事件类型",函数名字);

<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
function f1() {
console.log("第一个");
};
function f2() {
console.log("第二个");
};
document.getElementById("btn1").attachEvent("onclick", f1);
document.getElementById("btn1").attachEvent("onclick", f2);
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").detachEvent("onclick", f1);
};
</script>
</body>

5.兼容代码

    //解绑事件的兼容
//为任意的一个元素,解绑对应的事件
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) {
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, fnName);
} else {
element["on" + type] = null;
}
}

测试

<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script>
//绑定事件的兼容
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
} else {
element["on" + type] = fn;
}
}
//解绑事件的兼容
//为任意的一个元素,解绑对应的事件
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) {
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, fnName);
} else {
element["on" + type] = null;
}
}
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addEventListener(document.getElementById("btn1"), "click", f1);
addEventListener(document.getElementById("btn1"), "click", f2);
document.getElementById("btn2").onclick = function () {
removeEventListener(document.getElementById("btn1"), "click", f1);
};
</script>
</body>

三、事件冒泡

1.解释

多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了

2.实例演示

<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id);
};
document.getElementById("dv2").onclick = function () {
console.log(this.id);
};
document.getElementById("dv3").onclick = function () {
console.log(this.id);
};
</script>
</body>

image.png
点击蓝色div
image.png

3.阻止事件冒泡  window.event.cancelBubble=true;

<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id);
};
document.getElementById("dv2").onclick = function () {
console.log(this.id);
//阻止事件冒泡
// IE特有的,谷歌支持,火狐不支持
window.event.cancelBubble=true;
};
document.getElementById("dv3").onclick = function () {
console.log(this.id);
};
</script>

4.阻止事件冒泡  e.stopPropagation();

<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id);
};
document.getElementById("dv2").onclick = function (e) {
console.log(this.id);
//阻止事件冒泡
//谷歌和火狐支持
e.stopPropagation();
};
document.getElementById("dv3").onclick = function () {
console.log(this.id);
};
</script>

四、事件阶段 

通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的

如果这个属性的值是:
1---->捕获阶段
2---->目标阶段
3---->冒泡阶段
一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外
捕获阶段:从外向里
addEventListener方法的第三个参数是false的时候是冒泡阶段
addEventListener方法的第三个参数是true的时候是捕获阶段

<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
//同时注册点击事件
var objs = [document.getElementById("dv3"), document.getElementById("dv2"), document.getElementById("dv1")];
//遍历注册事件
objs.forEach(function (ele) {
//为每个元素绑定事件
ele.addEventListener("click", function (e) {
console.log(this.id + "====>" + e.eventPhase);
}, false);
});
</script>
</body>

image.png
点击蓝色后
image.png
addEventListener方法的第三个参数是true的时候,点击蓝色div
image.png

五、为同一个元素绑定多个不同的事件,指向相同的事件处理函数 

<body>
<input type="button" value="码仙" id="btn"/>
<script>
//为同一个元素绑定多个不同的事件,指向相同的事件处理函数
document.getElementById("btn").onclick = f1;
document.getElementById("btn").onmouseover = f1;
document.getElementById("btn").onmouseout = f1;
function f1(e) {
switch (e.type) {
case "click":
alert("好帅哦");
break;
case "mouseover":
this.style.backgroundColor = "red";
break;
case "mouseout":
this.style.backgroundColor = "green";
break;
}
}
</script>
</body>

作者:掘金-JavaScript中事件的绑定与解绑

回复

我来回复
  • 暂无回复内容