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>