DOM 绑定事件以及事件在for循环里解决闭包方法

2020-01-21  本文已影响0人  ticktackkk

绑定事件处理函数的方法
一、
缺点同一个元素只能绑定一个事件处理函数,相同的会被覆盖

element.onclick = function(){
console.log('a')
};

解除事件处理程序
element.onclick = null

二、
直接在html元素上绑定

<div onclick = "console.log(''a")>hehe</div>

三、

div.addEventListener('click',function () {
            console.log('a');
        },false);

解除事件处理程序
div.removeaddEventListener('click',function () {}.false)
优点:给一个对象的一个事件绑定多个处理函数,并且按照绑定的顺序执行

var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function () {
            console.log('a');
        },false)



        div.addEventListener('click',function () {
            console.log('b');
        },false)

四、ie独有
div.attachEvent ('onclick',function(){})
解除事件处理程序
div.detachEvent ('onclick',function(){})

五、题目
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
分别打印li的索引
方法一 立即执行函数

var li = document.getElementsByTagName('li');        
        for (var i = 0; i < li.length; i++) {
            (function(j){
                li[j].addEventListener('click', function () {
                console.log(j);
            }, false)
            }(i))            
        }

方法二、 let

var li = document.getElementsByTagName('li');        
        for (let i = 0; i < li.length; i++) {
                li[j].addEventListener('click', function () {
                console.log(j);
            }, false)               
        }
上一篇 下一篇

猜你喜欢

热点阅读