JavaScript事件监听机制

时间：2022-01-12 22:40:16

初学JavaScript时，会用这样的方法监听事件

<html>
<head>
<meta charset="utf-8">
<title>js事件监听机制</title>
</head>
<body>
<input type="button" value="click me!" id="btn-1">
<script type="text/javascript">
btn1 = document.getElementById("btn-1");
btn1.onclick = function(){
alert("第一次点击按钮");
}
btn1.onclick = function(){
alert("第二次点击按钮");
}
</script>
</body>
</html>

然而和想象中的结果并不相同，当点击按钮时，弹出窗口这样显示

JavaScript事件监听机制

这是因为当同一个对象用.onclick触发多个写法时，后面的方法会把前面的覆盖掉，当事件发生时，只会执行最后的绑定方法，在上面的例子中，后面的方法把前面的覆盖了，所以只出现了一个窗口。


对于这种现象，我们可以用以下的方式来解决

1.addEventListener

语法

target.addEventListener(type, listener, useCapture);

target：文档节点

type：事件名称，不含on，例如click，keydown

listener：调用的函数

useCapture：是否绑定在捕获阶段，默认为falsel

示例代码

<html>
<head>
<meta charset="utf-8">
<title>js事件监听机制</title>
</head>
<body>
<input type="button" value="click me!" id="btn-1">
<script type="text/javascript">
function eventFirst(){
alert("第一次点击按钮");
}
function eventSecond(){
alert("第二次点击按钮");
}
window.onload = function(){
btn1 = document.getElementById("btn-1");
btn1.addEventListener("click", eventFirst);
btn1.addEventListener("click", eventSecond);
}

</script>
</body>
</html>
当点击按钮时，出现如下情况

JavaScript事件监听机制

点击确定

JavaScript事件监听机制

依次输出第一个监听事件和第二个监听事件

解除事件绑定

<span style="font-size:18px;">btn1.removeEventListener("click", eventFirst);</span>

这样就解除了第一个监听事件的绑定

当点击按钮时，只输出第二个监听事件

注意：解除事件绑定时一定要用函数的句柄，否则解绑无效

2.attachEvent

IE浏览器使用attachEvent来绑定事件

语法

target.attachEvent(type, listener);

target：文档节点

type:事件名称，带on，比如onclick,onkeydown等等

listener：调用的函数

3.兼容各大主流浏览器的写法

通过以上的实验，最终对函数进行封装

代码如下

<html>
<head>
<meta charset="utf-8">
<title>js事件监听机制</title>
<style type="text/css">
#box{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="click me!" id="btn-1">
</div>
<script type="text/javascript">
//监听元素事件函数
function addEventHandler(target, type, func){
if(target.addEventListener){
//兼容IE9，Firefox以及Chrome
target.addEventListener(type, func, false);
}else if(target.attachEvent){
//版本较低的IE浏览器
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
//解除事件监听
function removeEventHandler(target, type, func){
if(target.removeEventListener){
target.removeEventListener(type, func, false);
}else if(target.detachEvent){
target.detachEvent("on" + type, func);
}else{
delete target["on" + type];
}
}
function eventFirst(){
alert("点击按钮");
}
function eventSecond(){
alert("点击div");
}
window.onload = function(){
btn1 = document.getElementById("btn-1");
box1 = document.getElementById("box");
//给按钮添加监听事件
addEventHandler(btn1, "click", eventFirst);
//给div添加监听事件
addEventHandler(box, "click", eventSecond);
//解除div的监听事件
removeEventHandler(box, "click", eventSecond);
}
</script>
</body>
</html>



标签：

相关文章