JavaScript事件监听以及addEventListener参数分析

事件监听

在Javascript中事件的监听是用来对某些操作做出反应的方法。例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置。这些都需要使用监听来完成。监听的函数很简单：addEventListener.
这里解释一下一个网页的嵌套关系：最外层：window 包含：document 包含：html 包含: body 包含：div等等...

addEventListener监听方法

按钮监听事件响应

首先我们需要获取一个按钮的handle，获取的方法很简单，代码如下：
var btn = document.getElementById("btnExample");
然后给btn添加事件监听：
btn.addEventListener("click", btn_click_function, false);
现在当我们对id为btn的按钮点击的时候，就会触发btn_click_function函数，这个函数可以是匿名的回调函数(假如不太懂，请百度)，也可以是自己写的一个函数，在这里调用。这里说明下，这些函数都会传入一个event的参数。这个参数有很多属性，并且涉及到第三个为false的参数，我们后面讨论。
对于这两种方法我分别都放一个例子：

1、匿名回调函数

var exportBtn = document.getElementById("createImageData");  
  
exportBtn.addEventListener("click",function() {  
            //write function code here  
        }, false);

2、自己命名回调函数

var exportBtn = document.getElementById("createImageData");  
exportBtn.addEventListener("click", createImageDataPressed, false);  

窗口事件响应

窗口事件响应，就是我们对整个窗口进行监听，并不限于按钮和输入框等。
则只需要把上面的btn改成window或者document就可以了。

addEventListener参数分析

addEventListener(type:String, listener:Function, useCaputer:Boolean(default:false), priority:int(default:0), useWeakReference:boolean (default:false) );

在addEventListener中前三个参数比较重要，第一个参数是事件类型，例如click或pressdown pressup等等，第二个参数就是响应的时候所执行的函数，第三个是事件流的问题。第四个是优先级，第五个是强引用or弱引用，假如是强引用不会被当做垃圾回收掉。

第一个已经说完了，第二个参数在上部分已经举过例子了，第三个参数这里着重讲一下：(内容比较多，我先放百度的解释)

这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false. (此段内容来源于百度 )。

捕获阶段就是如第一部分所说的网页嵌套关系中的，从外到里的传递过程，而冒泡阶段就是从目标到最外层的传递过程，这个参数就是告诉监听事件在什么时刻触发。

■事例：

<div id="outDiv">
  <div id="middleDiv">
    <div id="inDiv">请在此点击鼠标。</div>
  </div>
</div>

<div id="info"></div>
 

var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
 
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我们测试的代码，根据 info 的显示来确定触发的顺序，有三个 addEventListener，而 useCapture 可选值为 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

• 全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
• 全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
• outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
• middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
• ……

最终得出如下结论：

• true 的触发顺序总是在 false 之前；
• 如果多个均为 true，则外层的触发先于内层；
• 如果多个均为 false，则内层的触发先于外层。