关于事件绑定

事件的绑定方式

1、DOM0级，即以属性的方式直接写在行内。一般的验证码切换就有这样的机制

<a href="#" id="dom0" onclick="changeCaptcha();">

2、第二种方式：DOM1级，给元素添加属性（例：onclick），属性的值就是一个具体的函数（click事件类型绑定的处理函数）。这里就有一个问题，无法允许团队不同人员对同一元素监听同一事件但做出不用的响应。

<body>
  <div id="event">这是事件机制学习</div>
  <script>
    var div=document.getElementById('event');
    // 甲程序猿
    div.onclick=function(){
        console.log('甲要红背景');
        div.setAttribute('style', 'background: #ff0000');
    };
    // 乙程序猿
    div.onclick=function(){
        console.log('乙要黄背景');
        div.setAttribute('style', 'background: #ffff00');
    };
  </script>
</body>

这里面出现的问题：无法给同一个元素绑定多个相同的事件，然而在web开发中，这个是非常普遍的一个应用。

3、DOM2级，对主流浏览器来说，使用addEventListener和removeListener方法，它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。若最后的布尔值不填写，则和false效果一样。这里它支持同一dom元素注册多个同种事件，还有新增了捕获和冒泡的概念。

<body>
  <div id="event">这是事件机制学习</div>
  <script>
    var div=document.getElementById('event');
    div.addEventListener('click', function(){
        console.log('这是DOM2级，甲绑定事件的的响应');
    });
    div.addEventListener('click', function(){
        console.log('这是DOM2级，乙绑定事件的的响应');
    });
  </script>
</body>

它也有问题：兼容性，IE8对此自定义了两个自己的方法attachEvent和detachEvent方法。同时，需要注意IE在这里是‘onclick’。

div.attachEvent('onclick', function(){
    console.log('这是DOM2级，IE绑定事件的的响应');
});

那么为了保持浏览器兼容性问题，我们还需要自己封装一个简单的函数去实现事件的绑定。同时，由于attachEvent()方法中的this指向window(下面会有说明)，所以需要对this进行显式修改。

<body>
<div id="event">这是事件机制学习</div>
<script>
    var div=document.getElementById('event');
    function reponseCode(){
        console.log('这是封装的绑定事件');
    }
    // 事件的绑定机制
    function addHandle(obj, type, handle){
        if(obj.addEventListener){
            obj.addEventListener(type, handle，false);
        }else if(obj.attachEvent){
            obj.attachEvent('on'+type, function(event) {
                return handler.call(target, event);
            });
        }else{
            obj['on'+type]=handle;
        }
    }
    addHandle(div, 'click', reponseCode);
</script>
</body>

移除事件绑定：通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序时使用的参数相同。这意味着，addEventListener()添加的匿名函数将无法移除。同理attachEvent()和detachEvent();

无效代码：

<div id="box" style="height:30px;width:200px;"></div>
<script>
    box.addEventListener("click",function(){
        this.innerHTML += '1'
    },false);
    box.removeEventListener('click',function(){
        this.innerHTML += '1'
    },false);
</script>

有效代码：

<div id="box" style="height:30px;width:200px;"></div>
<script>
    var handle = function(){
        this.innerHTML += '1'
    };
    box.addEventListener("click",handle,false);
    box.removeEventListener('click',handle,false);    
</script>

说完上面绑定事件的几种方式，这里还要指出一点，即事件处理程序中的this所指

<div id="box" style="height:100px;width:300px;"
     onclick = "console.log(this)">//<div>
</div>

<div id="box" style="height:100px;width:300px;"></div>
<script>
    box.onclick= function(){
        console.log(this);//<div>
    }
</script>

<div id="box" style="height:100px;width:300px;"></div>
<script>
    box.addEventListener('click',function(){
        console.log(this);//<div>
    });
</script>

<div id="box" style="height:100px;width:300px;"></div>
<script>
    box.attachEvent('onclick',function(){
        console.log(this);//window
    });
</script>

与其他三个事件处理程序不同，IE事件处理程序的this指向window，而非被绑定事件的元素。

posted @ 2021-06-01 11:35 hhhhhhhhyyyyyyyy 阅读(104) 评论(0) 收藏举报

刷新页面返回顶部

hhhhhhhhyyyyyyyy

关于事件绑定

公告