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

时间:2021-11-12 04:38:08

事件监听

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

addEventListener监听方法

按钮监听事件响应

首先我们需要获取一个按钮的handle,获取的方法很简单,代码如下:
var btn = document.getElementById("btnExample");
然后给btn添加事件监听:
btn.addEventListener("click", btn_click_function, false);
现在当我们对idbtn的按钮点击的时候,就会触发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中前三个参数比较重要,第一个参数是事件类型,例如clickpressdown pressup等等,第二个参数就是响应的时候所执行的函数,第三个是事件流的问题。第四个是优先级,第五个是强引用or弱引用,假如是强引用不会被当做垃圾回收掉。

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

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

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

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