HTML DOM event对象学习记录

时间 2019-12-06

标签 html dom event 对象学习记录栏目 HTML 繁體版

原文原文链接

标准event属性

bubbles(只读) 返回布尔值，指示事件是不是起泡时间类型
语法：
```
event.bubbles
```
cancelable（只读）返回一个布尔值，指示事件是否可拥有可取消的默认动做。若是用 preventDefault() 方法能够取消与事件关联的默认动做，则为 true，不然为 fasle。
语法：
```
event.cancelable
```
cancelBubble evnt.stopPropagation()之前的别名。经过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件冒泡。
若是一个事件是可冒泡的,则它的cancelBubble属性的默认值为 false,表明容许该事件向上冒泡. 将cancelBubble属性设置为true之后,能够阻止该事件的进一步冒泡行为.
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在将来的某个时间中止支持，请尽可能不要使用该特性。
语法：
```
event.cancelBubble
```
currentTarget (只读) 返回其事件监听器触发该事件的元素。
语法：
```
event.currentTarget
```

eventPhase(只读) 返回事件传播的当前阶段。它的值是下面的三个常量之一，它们分别表示捕获阶段、正常事件派发和起泡阶段。
html

常量	值	描述
Event.NONE	0	这个时间，没有事件正在被处理
Event.CAPTURING_PHASE	1	事件正在被目标元素的祖先对象处理. 这个处理过程从window开始，而后Document,而后是HTMLHtmlElement, 一直这样，直到目标元素的父元素。经过EventTarget.addEventListener() 注册为捕获模式的Event listeners被调用。
Event.AT_TARGET	2	事件对象已经抵达the event's target. 为这个阶段注册的事件监听被调用。若是 Event.bubbles 的值为false, 对事件对象的处理在这个阶段后就会结束.
Event.BUBBLING_PHASE	3	事件对象逆向向上传播回目标元素的祖先元素, 从父亲元素开始，而且最终到达包含元素window . 这就是冒泡，而且只有 Event.bubbles值为true的时候才会发生。为这个阶段注册的Event listeners在这个过程当中被触发.

target（只读）返回触发此事件的元素（事件的目标节点）。 target与currentTarget的区别https://www.jianshu.com/p/1dd668ccc97a
语法：
```
event.target
```
timeStamp(只读) 返回事件生成的日期和时间。
指示发生事件的日期和时间（从 epoch 开始的毫秒数）。epoch 是一个事件参考点。在这里，它是客户机启动的时间。并不是全部系统都提供该信息，所以，timeStamp 属性并不是对全部系统/事件都是可用的。
语法：浏览器
```
event.timeStamp
```
type （只读）返回当前 Event 对象表示的事件的名称。即当前 Event 对象表示的事件的名称。它与注册的事件句柄同名，或者是事件句柄属性删除前缀 "on" 好比 "submit"、"load" 或 "click"。函数
语法：
```
event.type
```

标准的event方法spa

initEvent() 初始化新建立的 Event 对象的属性。
该方法将初始化 Document.createEvent() 方法建立的合成 Event 对象的 type 属性、bubbles 属性和 cancelable 属性。只有在新建立的 Event 对象被 Document 对象或 Element 对象的 dispatchEvent() 方法分派以前，才能调用 Event.initEvent() 方法。
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在将来的某个时间中止支持，请尽可能不要使用该特性。
语法：

参数	描述
eventType	字符串值。事件的类型。
canBubble	事件是否起泡。
cancelable	是否能够用 preventDefault() 方法取消事件。

event.initEvent(eventType,canBubble,cancelable

// 建立事件.
var event = document.createEvent('Event');

// 初始化一个点击事件，能够冒泡，没法被取消
event.initEvent('click', true, false);

// 设置事件监听.
elem.addEventListener('click', function (e) {
  // e.target 就是监听事件目标元素
}, false);

// 触发事件监听
elem.dispatchEvent(event);

preventDefault() 取消事件的默认动做。
语法：
```
event.preventDefault()
```
stopPropagation() 阻止捕获和冒泡阶段中当前事件的进一步传播。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件再也不被分派到其余节点。
语法：code
```
event.stopPropagation()
```

stopImmediatePropagation() 阻止调用相同事件的其余侦听器。若是某个元素有多个相同类型事件的事件监听函数,则当该类型的事件触发时,多个事件监听函数将按照顺序依次执行.若是某个监听函数执行了 event.stopImmediatePropagation()方法,则除了该事件的冒泡行为被阻止以外(event.stopPropagation方法的做用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { height: 30px; width: 150px; background-color: #ccf; }
            div {height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被绑定的第一个监听函数");
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被绑定的第二个监听函数");
                event.stopImmediatePropagation();
                //执行stopImmediatePropagation方法,阻止click事件冒泡,而且阻止p元素上绑定的其余click事件的事件监听函数的执行.
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("我是p元素上被绑定的第三个监听函数");
                //该监听函数排在上个函数后面,该函数不会被执行.
            }, false);
            document.querySelector("div").addEventListener("click", function(event)
            {
                alert("我是div元素,我是p元素的上层元素");
                //p元素的click事件没有向上冒泡,该函数不会被执行.
            }, false);
        </script>
    </body>
</html>