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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="按钮" id="bt"/>
<input type="button" value="解绑事件" id="bt2"/>
<script src="common.js"></script>
<script>
    //绑定事件兼容代码
    function addEventListner(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 removeEventListner(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("第二个");
    }
    addEventListner(my$("bt"), "click", f1);
    addEventListner(my$("bt"), "click", f2);
    my$("bt2").onclick = function () {
        removeEventListner(my$("bt"), "click", f1);
    };
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/cuilichao/p/9387598.html

时间: 2024-11-06 07:13:13

JavaScript绑定事件跟解绑事件的兼容代码的相关文章

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

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

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

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

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

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

js中的解绑事件

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

对事件委托绑定click的事件的解绑

大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, $(".sideNav>ul").on("click", function (e) {     alert("aaa"+$(e.tagert).index()); } 即使做判断让一部分带有某个class的li标签的ul解绑click,依然无效

jquery绑定事件,解绑事件

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

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

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

javaScirpt事件详解-原生事件基础(一)

# 事件 > JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能响应相关的操作.**图片引用:UI Events** # 事件流 主要是当时的IE团队提出的事件流逝是事件冒泡流,而Netscape提出的是事件捕获流, 可以使用DOM2级定义的*addEventListener()*方法来处理在冒泡或者捕获阶段调用事件处理程序. ## 事件冒泡 即事件开始时由最具体的元素(文档中嵌套最深的节点)接收,然后逐级

javascript 方法 / 绑定 解绑事件

很多JS插件的代码开头都是 (function(  一直不太明白    直到看到  // 事件绑定  this.bindHandler = (function() {                  if (window.addEventListener) {// 标准浏览器           return function(elem, type, handler) {// elem:节点    type:事件类型   handler:事件处理程序               // 最后一个