JavaScript事件流和事件处理程序

事件：是用户或浏览器自身执行的某种动作
事件处理程序：响应事件的函数
事件流：从页面中接收事件的顺序

事件流

IE采用事件冒泡流

• 冒泡：由具体元素接收，逐级向上传播，直到document / window对象
  div->body->html->document->window

标准采用事件捕获流

• 捕获：由document / window对象接收，沿DOM树向下传播，到具体元素
  window->document->html->body->div

DOM事件流

• 分为三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，也就是由父->子->父

事件对象

DOM中的事件对象

• 当cancelable == true，可以使用preventDefault()取消默认行为
• 当bubbles == true，可以使用stopPropagation()取消事件冒泡或捕获，立即停止事件在DOM层次中的传播
• 只有在事件处理程序的执行期间，event才会一直存在，一旦处理完毕，event对象就会被销毁

IE中的事件对象

let event = window.event;

• returnValue默认值是true，设置为false就可以取消事件的默认行为，相当于preventDefault()
• cancelBubble默认值是false，设置为true就可以取消事件冒泡，相当于stopPropagation()

事件处理程序

HTML事件处理程序

缺点：如果函数定义在页面的底部，用户在页面解析show()函数之前就单击了按钮，会引发错误

DOM0事件处理程序

• 会在事件流的冒泡阶段被处理

let btn= document.getElementById('button');
btn.onclick=function(){
  alert('hello world!');   
}   

// 移除事件处理程序 
btn.onclick=null;

DOM2事件处理程序

• 多个函数顺序执行

let btn= document.getElementById('button');
btn.addEventListener("click",function(){ 
  alert('hello world!');   
},true)
// 设置为true在捕获阶段调用，设置为false在冒泡阶段调用

// 移除事件处理程序 
removeEventListener()

IE事件处理程序

• 多个函数逆序执行
• 由于IE只支持冒泡，所以所有的事件处理函数都会在冒泡阶段被调用

let btn=document.getElementById("mybtn");   
btn.attachEvent("onclick",function(){   
alert("clicked");   
});   

// 移除事件处理程序 
detachEvent()