绑定事件处理函数的方法
一、
缺点同一个元素只能绑定一个事件处理函数,相同的会被覆盖
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)
}
网友评论