七、事件处理函数、冒泡捕获、阻止冒泡默认事件

七、事件处理函数、冒泡捕获、阻止冒泡默认事件

一、事件处理函数

事件是元素天生就具备的能力，比如可以被点击。

绑定事件——>绑定事件的处理函数。

事件 + 事件的反馈 == 前端交互，交互体验

1.1 如何绑定事件（绑定事件处理函数）

1.1.1 elem.onxxx = function(){} 句柄绑定形式

兼容性好；

一个元素同一种事件只能绑定一个事件处理函数，后写覆盖先写。

位置：

• js中，一个元素同一种事件只能绑定一个事件处理函数，后写覆盖先写。
• 内联事件监听器（行内事件监听器），每一个元素都有onxxx属性，属性值可以写代码或者函数。不推荐使用：结构和逻辑应该分开。

<button onclick="console.log(1)"></button>
<button onclick="test"></button>
<script>
	function test(){
     
        
    }
</script>

注：若同时使用这两种句柄的形式绑定事件，js中的会覆盖行内写的。

1.1.2 elem.addEventListener(事件类型，事件处理函数，false)

注册（绑定）事件监听器。

W3C规范，IE9以下不兼容；

一个元素同一种事件可以绑定多个事件处理函数；

函数引用相同，事件处理函数只执行一次；

一个元素同一个事件绑定多个事件处理函数会有两种结果：

• 事件处理函数为匿名函数：使用不同的函数引用，属于不同的事件处理函数，都会执行。
• 外部的普通函数：相同的函数引用，属于相同的事件处理函数，相当于一个元素的一个事件绑定了一个事件处理函数，只执行一次。

var oBtn = document.getElementsByTagName('button')[0];
// 注册事件监听器，事件处理函数为匿名函数
// 绑定的多个事件处理函数都会执行
oBtn.addEventListener('click',function(){
   
    console.log(1);
}, false);
oBtn.addEventListener('click',function(){
   
    console.log(1);
}, false);

// 注册事件监听器，事件处理函数为外部普通函数
// 绑定的多个事件处理函数只执行一次，相当于只绑定了一个事件处理函数
oBtn.addEventListener('click',test,false);
oBtn.addEventListener('click',test,false);
function test(){
   
    console.log(2);
}

1.1.3 elem.attachEvent(事件类型、事件处理函数)

IE8及以下绑定方法

IE8及以下(谷歌中没有)；

一个元素同一种事件可以绑定多个事件处理函数；

不看函数引用是否相同，事件处理函数全部执行；

其中this指向window，使用call/apply方法改变this指向。

var oBtn = document.getElementsByTagName('button')[0];
// IE8以下绑定方法（谷歌中没有）
oBtn.attachEvent('onclick',