绑定事件
为一个元素绑定事件,比如一个按钮,<input type="button" id="btn" value="点击"/>;通常我们的做法可以是:
(1)、document.getElementById('btn').onclick = function(){}
(2)、document.getElementById('btn').addEventListener('click',function(){},false);
这两种方法虽然都可以实现为元素绑定事件,但是两者还是有区别的。
比如:如果现在要为这个input绑定多个点击事件,该如何实现?尝试第一种方法,
var btn = document.getElementById('btn');
btn.onclick = function(){alert('第一次')}
btn.onclick = function(){alert('第二次')}
然而结果是输出“第二次”。因为这是一个dom 0级事件,后定义的事件会覆盖前面定义的事件;要达到绑定多个事件的效果,可以使用dom 2级事件,addEventListener(events,handler,boolean),
btn.addEventListener('click',function(){
alert('第一次')
})
btn.addEventListener('click',function(){
alert('第二次')
})
addEventListene()可以为元素添加多个事件处理程序,且会按照添加顺序依次调用。
既然能添加多个绑定事件,相对的,我们也可以删除指定的事件,
<input type="button" id="btn" value="点击"/>
<input type="button" id="del" value="删除"/>
var btn = document.getElementById('btn');
var del = document.getElementById('del');
function first(){alert('第一次')}
function second(){alert('第二次')}
btn.addEventListener('click',first)
btn.addEventListener('click',second)
del.addEventListener('click',function(){
btn.removeEventListener('click',first)
})
点击删除后把事件first()删除掉,需要注意的是,removeEventListener不能移除匿名添加的函数。
事件的捕获和冒泡
<div id="top">Top
<div id="center">center
<div id="bottom">bottom</div>
</div>
</div>
上一张简单的图说明:
一目了然,当我们点击buttom的事件,捕获就是从top开始到bottom,冒泡则相反,从bottom出去,我们再仔细看回绑定事件的方法:addEventListener(event, function, useCapture),event:事件名,function:处理函数,useCapture:指定事件是否在捕获或冒泡阶段执行,true为捕获阶段,false为冒泡阶段,可选,默认为false。我们使用代码来验证一下:
var top = document.getElementById('top');
var center = document.getElementById('center');
var bottom = document.getElementById('bottom');
top.addEventListener('click',function(){
console.log('top')
},true)
center.addEventListener('click',function(){
console.log('center')
},true)
bottom.addEventListener('click',function(){
console.log('bottom')
},true)
依次输出:top、center、bottom
top.addEventListener('click',function(){
console.log('top')
},false)
center.addEventListener('click',function(){
console.log('center')
},false)
bottom.addEventListener('click',function(){
console.log('bottom')
},false)
依次输出:bottom、center、top。
关于javascript简单事件就到这里。。。