JS事件小记-添加事件的三种方式及其注意点（兼容写法）

最新推荐文章于 2021-10-20 14:46:18 发布

枫叶在夏天

最新推荐文章于 2021-10-20 14:46:18 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/weixin_44552302/article/details/116570565

版权

<body>
    <div>123</div>
    <script>
        let oDiv = document.querySelector('div');
        // 方式一
        oDiv.onclick = function(){
            alert('a');
        }
        // 方式二
        oDiv.addEventListener('click',function(){
            alert('b');   
        })
        // 方式三
        oDiv.attachEvent('onclick',function(){
            alert('c');
        })
    </script>
</body>

肯定有小伙伴急急忙忙的赋值到本地编辑，一看，居然报错了_{什么垃圾博客}
哈哈哈先别急等下会讲到。

方式一：DOM.onxxx = function(){…}

这种方式由于是等号赋值的形式，所以后面覆盖前面，写多个的话只有最后有效
移除监听函数：DOM.onxxx = null

方式二：addEventListener

注意点：
1、第一个参数是事件类型，且不用加”on“，第二个参数是触发事件执行的函数
2、给同一个DOM添加多个事件，不会覆盖（因为不是等号赋值）
3、只支持IE9以上的浏览器
4、还有第三个参数，控制事件是否冒泡（false冒泡且为默认 / true不冒泡为捕获）

方式三：attachEvent

需要加”on“；不会后覆盖前；只支持低版本浏览器；

问题来了：因为上面代码只用一个版本浏览器打开，必然只能是高级/低级浏览器，所以addEventListener/attachEvent必然会有一个报错

解决：兼容写法：

<script>
    let oDiv = document.querySelector('div');
    function addEvent(e,name,fn){
        if(e.attachEvent){
            e.attachEvent('on'+name,fn);
        }else{
            e.addEventListener(name,fn);
        }
    }
    addEvent(oDiv,'click',function(){
        alert('b');
    })
</script>

觉得有帮助的关注，点个赞~

枫叶在夏天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS事件小记-添加事件的三种方式及其注意点（兼容写法）

<body> <div>123</div> <script> let oDiv = document.querySelector('div'); // 方式一 oDiv.onclick = function(){ alert('a'); } // 方式二 oDiv.addEventListener('click',functi
复制链接

扫一扫