事件

事件

事件流

！imge

什么是冒泡阶段，什么是捕获阶段

链接
imges

事件处理程序

HTML内联形式

• 通过onclick选定元素

JavaScript指定事件处理程序

给每个元素设置自己的事件处理程序，将这些属性的值设置为一个函数

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

绑定的操作是同步的，点击执行的操作是异步的

当事件绑定多个监听器的时候 var btn = documne

btn.onclick = function(）{
	coonsole.log(this.innerText)
}

btn.onclick = function(）{
	coonsole.log("hello world")
}

当重复两个事件属性监听器的时候，后面的事件监听器会重新覆盖前面的事件监听器

DOM2事件处理程序

addEventListener
removeEventListener

三个参数

1. 事件类型
2. 事件处理方法
3. 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);
</script>

执行这个函数的时候可以执行多次，不会出现覆盖的问题

事件获取

btn.addEventListener('click',function (evt){
	console.log(this)
	console.log(evt.target)
	console.log(btn)
})

this = evt.target = btn

</