javascript简单事件

绑定事件

 为一个元素绑定事件，比如一个按钮，<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简单事件就到这里。。。