js中的解绑事件

//解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 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);
  };

  

 

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

时间: 2024-10-03 22:15:24

js中的解绑事件的相关文章

【JQ】jq动态绑定事件.on()、解绑事件off()

#JQ 绑定与解绑事件的方法的历史演变 1. jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM元素并不能响应之前绑定的事件!解绑事件使用.unbind()方法: 旧版本的处理方法是使用.live()方法来代替事件绑定.bind(),使得绑定的事件能适用脚本创建的新元素,从而实现事件的动态绑定:解绑事件使用.unlive()方法: 1 <html> 2 <head> 3 <

从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.为元素绑定多个

JavaScript绑定事件跟解绑事件的兼容代码

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

JS中一些常用的事件(笔记)

window.onload事件:当文档和其所有外部资源(如图片)完全加载并显示给用户时就会触发它. window.onload = function (){ //当加载完当前页面和其所有外部资源(如图片)后,执行这个函数 } window.onunload事件:当用户离开当前页面时会触发该事件 window.onunload = function (){ //离开该页面时执行该函数 } event对象:该对象代表了当前事件的状态,并且只有在事件发生的过程中才生效.对象中存放的是键盘按键的状态.鼠

js中的点击事件(click)的实现方式

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js中的点击事件(click)的实现方式</title> </head> <body> <!-- 第三种方式--> <button id="btn" onclick="threeFn()

webapi中注册事件以及解绑事件

注册事件的方式有两种: 1.on + 事件名 特点:同一个元素注册同一个事件多次,后面的会把前面的覆盖 2.addEventListener(event,listener,useCapture); 参数:event:事件名 ;  listener:事件处理函数 : useCapture: 决定事件冒泡(false,默认值)还是事件捕获(true); 特点: 不存在覆盖问题,但是不支持IE6,7,8 解绑注册事件 1.on+事件名: on+事件名 = null; 2.addEventListene

JS中的异步以及事件轮询机制

一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步均是通过多线程实现的,没有循环队列一说,直接在子线程中完成相关的操作) JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个

219 jQuery事件处理: off() 解绑事件,trigger() 、triggerHandler() 自动触发事件

? 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑.jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ; 语法 演示代码 <body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子<

jquery绑定事件,解绑事件

unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提供了事件类型作为参数,则只删除该类型的绑定事件.如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除.返回值 : jQuery参数 :type (String) : (可选) 事件类型data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函