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

绑定事件的方法

  1. 元素函数
    <input onclick="alert('哈哈')" type="button" value="点击我,弹出警告框" />
  2. 自定义函数
<input onclick=alert("哈哈");  type="button" value="方法1" />
<input onclick="myAlert()" type="button" value="方法2" />
<script>
//方法1
function myAlert(){
alert("呵呵");
}
</script>
  1. 元素.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

解绑事件的方法

  1. 对象.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>
  1. 对象.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>
  1. 兼容函数
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:用什么方式绑定事件,就应该用对应的方式解绑事件

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页