事件的绑定

最新推荐文章于 2022-11-09 11:45:50 发布

肖小雨

最新推荐文章于 2022-11-09 11:45:50 发布

阅读量72

点赞数

分类专栏： JavaScript 文章标签： addEventListener attachEvent 事件绑定浏览器兼容回调函数

本文链接：https://blog.csdn.net/hff945/article/details/111231939

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

addEventListener()
- 可以为一个元素绑定多个响应函数，不支持IE8以下
- 参数：1.事件的字符串，不用on；
  2.回调函数，当事件触发时该函数会被调用
  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  例：btn.addEventListener(‘click’,()=>{
  alert(123)
  },false)
attachEvent()
- 在IE8中使用attachEvent来绑定事件
- 参数：
  1.事件的字符串，要on
  2.回调函数
- 这个方法是后绑带先执行，执行顺序和addEventListener相反
  例：
  btn.attachEvent(‘onclick’,()=>{
  alert(123)
  })
解决浏览器兼容问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 200px;
            background-color: #fca;
            border: green solid 1px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>

    <script>
        // 创建绑定函数
        function bind(obj,eventStr,callback){
            // 大部分浏览器
            if(obj.addEventListener){
                obj.addEventListener(eventStr,callback,false);
            }
            // IE8及以下
            else{
                obj.attachEvent('on'+eventStr,function(){
                    // 在匿名函数中调用回调函数
                    callback.call(obj);
                });
            }
        }

        var box1=document.getElementById('box1');
        bind(box1,'click',function(){
            alert(123);
        })
        bind(box1,'click',function(){
            alert(23);
        })
    </script>
</body>
</html>