码迷,mamicode.com
首页 > Web开发 > 详细

js中的解绑事件

时间:2018-07-25 00:56:42      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:doctype   listen   函数名   att   兼容   lis   函数   NPU   log   

//解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 1.解绑事件
* 对象.on事件名字=事件处理函数--->绑定事件
* 对象.on事件名字=null;
* 2.解绑事件
* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
* 对象.removeEventListener("没有on的事件类型",函数名字,false);
* 3.解绑事件
* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);
*
*
* */

页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>

<script >
	function  my$(id){
	return document.getElementById(id);
}
	//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
    if(typeof element.textContent=="undefined"){
        element.innerText=text;
    }else{
        element.textContent=text;
    }
}
	
</script>
<body>
<input type="button" value="创建一个p" id="btn"/>
哈哈哈
<input type="button" value="创建二个p" id="btn2"/>
<div id=‘dv‘> </div>
</html>

 

绑定和解绑的兼容性代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
<script >
	function  my$(id){
	return document.getElementById(id);
}
	//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
    if(typeof element.textContent=="undefined"){
        element.innerText=text;
    }else{
        element.textContent=text;
    }
}
	
</script>
</head>
<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(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };


</script>
</body>
</html>

  

第一种方式是常用的

my$("btn").onclick=function(){
	console.log("aa");
}
my$("btn").onclick=null;

  

第二种方式是常用的(火狐谷歌)

/第二种方式支持谷歌和火狐,不支持ie8
  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  my$("btn").addEventListener("click",f1,false);
  my$("btn").addEventListener("click",f2,false);

  //点击第二个按钮把第一个按钮的第一个点击事件解绑
  my$("btn2").onclick=function () {
    //解绑事件的时候,需要在绑定事件的时候,使用命名函数
    my$("btn").removeEventListener("click",f1,false);
  };

  

第三种方式是常用的(IE8)

//第三种支持ie8
    function f3() {
    console.log("第一个");
  }
  function f4() {
    console.log("第二个");
  }
  my$("btn").attachEvent("onclick",f3);
  my$("btn").attachEvent("onclick",f4);

  my$("btn2").onclick=function () {
      my$("btn").detachEvent("onclick",f3);
  };

  

 

js中的解绑事件

标签:doctype   listen   函数名   att   兼容   lis   函数   NPU   log   

原文地址:https://www.cnblogs.com/liushisaonian/p/9363396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!