JS 学习之事件对象理解
在触发 DOM 上的某个事件时, 会创建一个 event 对象, 该对象中包含着与事件相关的信息, 包括事件的类型, 导致事件的元素以其他的与事件有关的信息.
DOM 中的事件对象
兼容 DOM 的浏览器会在事件触发时传一个 event 对象到事件处理程序中. 不论指定事件处理程序时使用哪种方法(DOM0 级 或者 DOM2 级).
接下来我们看一个例子:
- // 假设有个按钮, id 为 btn
- <script>
- var btn = document.getElementById("btn");
- //DOM0 级
- btn.onclick = function (event)
- {
- alert(event.type); //"click"
- }
- btn.addEventListener("click",function(event)
- {
- alert(event.type); //"click"
- },false);
- </script>
前面说了 event 对象中包含着与事件有关的信息, 那么, 不可缺少的, event 对象会有一些特定的属性和方法. 我们只介绍几个常用的.
bubbles 表示事件是否冒泡
currentType 表示事件处理程序当前正在处理事件的那个元素(简单来说, 就是你把事件设置给的那个元素)
detail 与事件有关的详细信息
eventPhase 表示事件所处的阶段 1 表示事件捕获 2 表示 "处于目标" 阶段 3 表示事件冒泡
target 事件的目标
type 事件的类型
事件流: 从页面接收事件的顺序
IE 中的事件流叫做事件冒泡, 即事件开始时由最具体的元素 (文档中嵌套层次最深的元素) 接收, 逐级向上传播到最不具体的节点(文档).
Netscape 提出的一种事件流叫事件捕获, 即事件由最不具体的节点先接收, 然后逐级向下, 知道最具体的节点.
DOM2 级事件 规定的事件流分为三个阶段 : 事件捕获, 处于目标, 事件冒泡
在事件处理程序中, this 的值始终等于 currentTarget 的值, 而 target 的值为实际目标.
- <div id = "Div" class="Father">
- <div id = "son" class="Son">
- <input type = "number" value = "0" id = "Input" class="input">
- </div>
- </div>
- <script type="text/javascript">
- var div = document.getElementById("Div");
- div.addEventListener("click",function(event)
- {
- alert(this === event.target);
- })
- </script>
1566032819(1).PNG
当我们点击最外面的 div 时, 结果显示为 true. 当点击内部的两个 div 块时, 结果均是显示 false.
这是因为, 正如上面所说, target 是事件的实际目标, 而 this 等于 currentTarget.currentTarget 的值是由事件处理程序的对象决定的, 在这段代码中, 我们把 onclick 事件添加到最外面的 div 块上面, 因此, currentTarget 的值为 div (或者 document.getElementById("Div"))
也就是说, 只有直接将事件处理程序指定给了目标元素, 则 this, currentTarget, target 的值相同
- var btn = document.getElementById("btn");
- btn.onclick = function(event)
- {
- // 省略代码
- }
IE 中的事件对象
与在 DOM 中访问 event 对象不同, IE 中访问 event 对象有几种不同的方式, 取决于指定事件处理程序的方式. 当通过 DOM0 级方式添加事件处理程序时, event 对象作为 Windows 对象的一个属性存在.
- var btn = document.getElementById("btn");
- btn.onclick = function()
- {
- var event = Windows.event;
- alert(event.type); //"click"
- }
IE 中的事件处理函数: attachEvent(),detachEvent();
当使用 attachEvent()来添加事件处理程序时, 则会有一个 event 对象作为参数被传入事件处理函数中. 当然也可以用 Windows 对象来访问 event 对象.
- btn.attachEvent("onclick",function(event)
- {
- // 省略代码
- });
可以看到这里我们的匿名函数是有一个参数的: event. 此处要注意: attachEvent()函数第一个参数是 onclick 而不是 click
IE 中 event 对象的属性和方法:
cancelBubble 默认为 false, 设置为 true 即可取消事件冒泡(IE 中不支持事件被捕获, 因此只能取消事件冒泡)
type 事件的类型
srcElement 事件的目标(与 DOM 中的 target 相同)
注意:
采用 DOM0 级添加事件, 事件处理程序均是在其依附元素的作用域下运行.
对于 DOM2 级方式添加事件, DOM2 级方法 addEventListener(), removeEventListener()是在其依附元素的作用域中运行, 而对于 IE 来说, attachEvent(),detachEvent()是在全局作用域中运行.
来源: http://www.jianshu.com/p/fdcf6a3bf843