事件监听
在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
的参数,我们后面讨论。
对于这两种方法我分别都放一个例子:
- 匿名回调函数
var exportBtn = document.getElementById("createImageData"); exportBtn.addEventListener("click",function() { //write function code here }, false);
-
自己命名回调函数
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. (此段内容来源于百度 )。
捕获阶段就是如第一部分所说的网页嵌套关系中的,从外到里的传递过程,而冒泡阶段就是从目标到最外层的传递过程,这个参数就是告诉监听事件在什么时刻触发。
后面两个参数我用的不多,就暂时先不在这里写了。等我很明白的时候再放在这里。