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

1、on事件的绑定与解绑

    <input type="button" value="点击显示" id="btn"><input type="button" value="解绑" id="clear"><script>myId("btn").οnclick=function(){alert("小狗最可爱！");}myId("clear").οnclick=function(){myId("btn").οnclick=null;}</script>

　　解绑：对象.on事件名字=null

2、对象.addEventListener("事件类型",事件处理函数,事件处理阶段(true或false))

　　谷歌和火狐支持,IE8不支持

    <input type="button" value="点击显示" id="btn"><input type="button" value="解绑" id="clear"><script>// 多个事件了不能调用同一个函数myId("btn").addEventListener("click",f1,false);myId("btn").addEventListener("click",f2,false);function f1(){console.log("明月几时有");}function f2(){console.log("把酒问青天");}// 同时解绑（移除）多个事件myId("clear").οnclick=function(){myId("btn").removeEventListener("click",f1,false);myId("btn").removeEventListener("click",f2,false);}</script>

　　解绑：对象.removeEventListener("没有on的事件类型",函数,false);

3、对象.attachEvent("有on的事件类型",事件处理函数)

　　谷歌、火狐不支持,IE8支持

    <input type="button" value="点击显示" id="btn"><input type="button" value="解绑" id="clear"><script>// 多个事件了不能调用同一个函数myId("btn").attachEvent("onclick",f1);myId("btn").attachEvent("onclick",f2);function f1(){console.log("明月几时有");}function f2(){console.log("把酒问青天");}// 同时解绑（移除）多个事件myId("clear").οnclick=function(){myId("btn").detachEvent("onclick",f1);myId("btn").detachEvent("onclick",f2);}</script>

　　解绑：对象.detachEvent("on事件类型",函数名字)

绑定事件兼容代码

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, fn) {if (element.removeEventListener) {element.removeEventListener(type, fn, false);} else if (element.detachEvent) {element.detachEvent("on" + type, fn);} else {element["on" + type] = null;};
};

    <input type="button" value="点击显示" id="btn"><input type="button" value="解绑" id="clear"><script>// 事件函数function f1(){console.log("明月几时有");}function f2(){console.log("把酒问青天");}// 元素绑定事件兼容代码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,fn){if(element.removeEventListener){element.removeEventListener(type,fn,false);}else if(element.detachEvent){element.detachEvent("on"+type,fn);}else{element["on"+type]=null;}};addEventListener(myId("btn"),"click",f1);addEventListener(myId("btn"),"click",f2);myId("clear").οnclick=function(){removeEventListener(myId("btn"),"click",f1);}</script>

转载于:https://www.cnblogs.com/dawnwill/p/9854647.html

绑定事件和解绑事件的方法相关推荐

js绑定事件和解绑事件的方法
绑定事件的方法元素函数 <input onclick="alert('哈哈')" type="button" value="点击我,弹出警告框 ...
js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法只支持IE678,不兼容其他浏览器 addEv ...
【JQuery】on/off 绑定事件和解绑事件
前言 on 绑定事件.off 解绑事件 on 添加事件.off 删除事件 JQuery on() 方法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 ...
JS添加事件和解绑事件：addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
vue：组件自定义事件、绑定、解绑事件
vue:组件自定义事件.绑定.解绑事件自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...
从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
jQuery学习：事件处理（绑定事件解绑事件事件委派/委托））
<div class="outer">外部div<div class="inner">内部div</div></div ...
11-jQuery的事件绑定和解绑
[转]11-jQuery的事件绑定和解绑 1.绑定事件语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type ( ...
jQuery的事件绑定和解绑
1.绑定事件语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
js元素事件绑定与解绑兼容代码
一.元素事件的绑定方法兼容代码为任意元素绑定任意事件的兼容代码 /*** 为任意元素绑定任意事件* @param {*} element 元素* @param {*} type 事件类型* @par ...

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

绑定事件和解绑事件的方法相关推荐

最新文章

热门文章