事件绑定函数---bind-原创js库

最新推荐文章于 2023-01-17 14:57:21 发布

原创最新推荐文章于 2023-01-17 14:57:21 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件绑定 #js

JS 同时被 2 个专栏收录

7 篇文章

订阅专栏

jaycao-js

1 篇文章

订阅专栏

本文介绍了JavaScript中的事件绑定，包括onclick等常见事件类型。详细阐述了事件绑定的两种方式，一种是仅能绑定一个方法，另一种是支持绑定多个方法，并分析了不同浏览器下事件执行的顺序和this的指向差异。最后提供了兼容性处理的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用小案例

<script>
    function fn1() {
        alert(1);
    }
    function fn2() {
        alert(2);
    }
    function bind(obj, evname, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(evname, fn, false);
        } else {
            obj.attachEvent('on' + evname, function() {
                fn.call(obj);
            });
        }
    }
    bind(document, 'click', fn1);
    bind(document, 'click', fn2);
</script>

点击文档，可以依次弹出 1 2

什么是事件？

onclick，onmouseover、onmouseout、onmousemove等，W3C表格如下：
这里写图片描述

什么是事件绑定？

给一个事件加方法，如：

document.onclick=function(){alert(1)};

事件绑定的方式

第一种

document.onclick=function(){
    alert(1)；
}

如果需要绑定多个方法，

document.onclick=function(){
    alert(1)；
}；
document.onclick=function(){
    alert(2)；
}

只弹出2，下面的方法会覆盖上面的方法

这种绑定只适合给事件绑定一个方法

一个事件绑定多个方法

一般浏览器

document.addEventListener('click',function(){alert(1);},false);
document.addEventListener('click',function(){alert(2);},false);

document.attachEvent('onclick',function(){alert(1);});
document.attachEvent('onclick',function(){alert(2);});

点击可以依次弹出1,2

区别

addEventListener
兼容一般浏览器：

事件没有on
事件执行顺序是正序
支持捕获（事件捕获请点这篇文章）
this指向触发事件的对象

attachEvent

事件有on
事件执行顺序，标准ie正序，非标准ie倒叙
不支持捕获
this指向windows（关于this可以点js中的this总结）

当使用attachEvent的时候，就需要对内部的this进行重定向，一般有call和apply两种方法。详细可点apply和call

代码

function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
    } else {
        obj.attachEvent('on' + evname, function() {//这里需要加上on 
            fn.call(obj);  //将this指向obj
        });
    }
}

给一个按钮绑定多个事件

var oBtn=document.getElmentById('btn1');
bind(oBtn,'click',fn1);
bind(oBtn,'click',fn2);
bind(oBtn,'click',fn3);