js绑定事件和解绑事件的方法

最新推荐文章于 2024-05-20 08:27:31 发布

喵_美

最新推荐文章于 2024-05-20 08:27:31 发布

阅读量7.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_34708564/article/details/90483811

版权

绑定事件的方法

元素函数
<input onclick="alert('哈哈')" type="button" value="点击我，弹出警告框" />
自定义函数

<input onclick=alert("哈哈");  type="button" value="方法1" />
<input onclick="myAlert()" type="button" value="方法2" />
<script>
//方法1
function myAlert(){
alert("呵呵");
}
</script>

元素.on事件=function（）{//事件处理函数代码}

<input id="demo" type="button" value="按钮" />
<script>
document.getElementById("demo").onclick=function(){
alert(“哈哈”); 
}
</script>

这种方式在JavaScript代码中绑定事件，可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。但可能会被其他人添加的点击事件覆盖。
4. 绑定事件监听函数addEventListener（attachEvent）
（1）引入：如果直接为元素绑定事件，那么该元素该事件的最后一个处理函数会覆盖之前的函数。如下：
只输出3333，前面的处理函数不执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
    <input type="button" value="按钮" id="btn"/>
<script>
  var btn = document.getElementById("btn");
  btn.onclick=function () {
    console.log("1111");
  };
  btn.onclick=function () {
    console.log("2222");
  };
  btn.onclick=function () {
    console.log("3333");
  };
</script>
</body>
</html>

（2）解决方法：addEventListener（attachEvent）
1 对象.addEventListener(“事件类型”,事件处理函数,false);–谷歌和火狐支持,IE8不支持，最后一个参数是控制点击事件发生时，时冒泡阶段还是捕获阶段。
2 对象.attachEvent(“有on的事件类型”,事件处理函数)–谷歌不支持,火狐不支持,IE8支持

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
    <input type="button" value="按钮" id="btn"/>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click",function () {
    console.log("1111");
  },false);
  btn.addEventListener("click",function () {
    console.log("2222");
  },false);
  btn.addEventListener("click",function () {
    console.log("3333");
  },false);
</script>
</body>
</html>

结果：1111、2222、3333都输出

（4）兼容代码

<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>

（5）addEventListener和attachEvent的区别
（1）方法名不一样
（2）参数个数不一样addEventListener三个参数,attachEvent两个参数
（3）addEventListener 谷歌,火狐,IE11支持,IE8不支持，attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
（4）this不同,addEventListener 中的this是当前绑定事件的对象， attachEvent中的this是window
（5）addEventListener中事件的类型(事件的名字)没有on，attachEvent中的事件的类型(事件的名字)有on

解绑事件的方法

对象.on事件名字=null

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>title</title>
</head>
<body>
<input type="button" value="按钮1" id="btn"/>
<input type="button" value="按钮2" id="btn2"/>
<script>

 document.getElementById("btn").onclick=function () {
   alert("111");
 };
 document.getElementById("btn2").onclick=function () {
   //1.解绑事件
   document.getElementById("btn").onclick=null;
 };
</script>
</body>
</html>

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

对象.removeEventListener(“没有on的事件类型”,函数名字,false);（火狐、谷歌）
对象.detachEvent(“on事件类型”,函数名字);（IE）
注意：解绑的事件必须是命名函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<input type="button" value="按钮1" id="btn"/>
<input type="button" value="按钮2" id="btn2"/>
<script>
  function f1() {
    alert("111");
  }
  document.getElementById("btn").addEventListener("click",f1,false);
  //点击第二个按钮把第一个按钮的第一个点击事件解绑
  document.getElementById("btn2").onclick=function () {
    //解绑事件的时候,需要在绑定事件的时候,使用命名函数
    document.getElementById("btn").removeEventListener("click",f1,false);
  };
</script>
</body>
</html>

兼容函数

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;
    }
  }

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

喵_美

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js绑定事件和解绑事件的方法

如果直接为元素绑定事件，那么该元素该事件的最后一个处理函数会覆盖之前的函数。如下：只输出3333，前面的处理函数不执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head>...
复制链接

扫一扫