前端学习笔记--JavaScript--DOM事件探秘

[转]来自于慕课网学习整理。

一、事件流

事件流：描述的是从页面中接受事件的顺序。（页面哪个部分会拥有特定的事件。如果点了某个按钮，认为也点了这个按钮的容器。）

ie8之前的版本，只支持事件冒泡流； Netscape：事件捕获流

事件冒泡流：即事件最开始由最具体的元素（文档中的嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

事件捕获流：不太具体的节点应该更早接收到时间，而最具体的节点最后接收到事件。

1.HTML事件,缺点：HTML和JS代码紧密耦合在一起：

       eg:<input type="button" value="按钮" id="btn" οnclick="showMes()">

2.DOM0级事件处理程序：把一个函数赋值给一个事件处理程序，用的比较多的方法，

    优点：简单，跨浏览器。

        eg:document.getElementById("btn2").οnclick=function(){ };

             document.getElementById("btn2").onclick =null;

3.DOM2级事件处理程序,

  addEventListener(),removeEventListner();（ie不支持）

         eg:btn3.addEventListener('click',showMes,false);

4.IE事件处理程序:

attachEvent(),detachEvent();

          eg:btn3.attachEvent('onclick',showMes);

5.跨浏览器处理程序，封装在一个对象内：eventUtil,

添加add方法：参数：给谁添加（element）,添加什么事件（type），这个事件触发了什么操作(handler)

1.DOM中的事件对象，非ie直接用event:

event.type="click";  

event.target.nodeName="input" //事件加在哪个元素上

2.IE中的事件对象：ie8之前中用：window.envent 

3.跨浏览器封装:

获取event,target,type，阻止冒泡方法，阻止默认行为方法。

 

 

转载于:https://my.oschina.net/u/3176241/blog/822983