标签：javascript   addeventlistener   js   

事件监听

在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);

1. 自己命名回调函数

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. (此段内容来源于百度 )。

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

后面两个参数我用的不多，就暂时先不在这里写了。等我很明白的时候再放在这里。

html学习 - javascript事件监听以及addEventListener参数分析

标签：javascript   addeventlistener   js   

原文地址：http://blog.csdn.net/alps1992/article/details/43835503