创建对象,初始化对象属性,给节点分派一个合成事件
Posted Edison的备忘录
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了创建对象,初始化对象属性,给节点分派一个合成事件相关的知识,希望对你有一定的参考价值。
XML DOM createEvent() 方法
定义和用法
createEvent() 方法创建新的 Event 对象。
语法:
createEvent(eventType)
参数 | 描述 |
---|---|
eventType |
想获取的 Event 对象的事件模块名。 关于有效的事件类型列表,请参阅“说明”部分。 |
返回值
返回新创建的 Event 对象,具有指定的类型。
抛出
如果实现支持需要的事件类型,该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。
说明
该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。
下表列出了 eventType 的合法值和每个值创建的事件接口:
参数 | 事件接口 | 初始化方法 |
---|---|---|
htmlEvents | HTMLEvent | iniEvent() |
MouseEvents | MouseEvent | iniMouseEvent() |
UIEvents | UIEvent | iniUIEvent() |
用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。
该方法实际上不是由 Document 接口定义的,而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块,那么Document 对象就会实现 DocumentEvent 接口并支持该方法。
initEvent() 方法
定义和用法
初始化新事件对象的属性
语法
event.initEvent(eventType,canBubble,cancelable)
参数 | 描述 |
---|---|
eventType | 字符串值。事件的类型。 |
canBubble | 事件是否起泡。 |
cancelable | 是否可以用 preventDefault() 方法取消事件。 |
说明
该方法将初始化 Document.createEvent() 方法创建的合成 Event 对象的 type 属性、bubbles 属性和 cancelable 属性。只有在新创建的 Event 对象被 Document 对象或 Element 对象的 dispatchEvent() 方法分派之前,才能调用 Event.initEvent() 方法。
XML DOM dispatchEvent() 方法
定义和用法
dispatchEvent() 方法给节点分派一个合成事件。
语法:
dispatchEvent(evt)
参数 | 描述 |
---|---|
evt | 必需。要分派的 Event 对象。 |
返回值
如果在事件传播过程中调用了 evt 的 preventDefault() 方法,则返回 false,否则返回 true。
抛出
如果 Event 对象 evt 没有被初始化,或者它的 type 属性为 null 或空串,该方法将抛出异常。
描述
该方法将分派一个合成事件,它由 Document.createEvent() 创建,由 Event 接口或它的某个子接口定义的初始化方法初始化。
调用该方法的节点将成为事件的目标节点,该事件在捕捉阶段中第一次沿着文档树向下传播。如果该事件的 bubbles 属性为 true,那么在事件的目标节点自身处理事件后,它将沿着文档树向上起泡。
<body>
<div style="width:300px;height:300px;background: red;">
<input type="button" value="点击">
<input type="button" value="点击">
</div>
<script>
//事件绑定
Element.prototype.on = function (ev, fn) {
if (window.attachEvent) {
this.attachEvent("on" + ev, fn)
} else {
this.addEventListener(ev, fn, false)
}
return this;
}
//事件触发
Element.prototype.trigger = function (ev) {
var evt = document.createEvent(‘MouseEvents‘);
evt.initEvent(ev, true, false);
this.dispatchEvent(evt);
return this;
}
//事件代理
Element.prototype.delegate = function (elem, type, fn) {
this.on(type, function (e) {
var e = e || window.event;
var targetNode = e.target || e.srcElement;
if (targetNode.nodeName.toLowerCase() === elem) {
fn();
}
})
return this;
}
//测试代码
var oDiv = document.getElementsByTagName("div")[0];
/*oDiv.on("click",function(){
alert(1)
})
oDiv.trigger(‘click‘)*/
oDiv.delegate(‘input‘, ‘click‘, function (e) {
alert(1);
});
</script>
</body>
以上是关于创建对象,初始化对象属性,给节点分派一个合成事件的主要内容,如果未能解决你的问题,请参考以下文章