创建对象,初始化对象属性,给节点分派一个合成事件

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 接口并支持该方法。

Document 对象参考手册

 

 

initEvent() 方法

定义和用法

初始化新事件对象的属性

语法

event.initEvent(eventType,canBubble,cancelable)
参数描述
eventType 字符串值。事件的类型。
canBubble 事件是否起泡。
cancelable 是否可以用 preventDefault() 方法取消事件。

说明

该方法将初始化 Document.createEvent() 方法创建的合成 Event 对象的 type 属性、bubbles 属性和 cancelable 属性。只有在新创建的 Event 对象被 Document 对象或 Element 对象的 dispatchEvent() 方法分派之前,才能调用 Event.initEvent() 方法。

Event 对象

 

 

XML DOM dispatchEvent() 方法

定义和用法

dispatchEvent() 方法给节点分派一个合成事件。

语法:

dispatchEvent(evt)
参数描述
evt 必需。要分派的 Event 对象。

返回值

如果在事件传播过程中调用了 evt 的 preventDefault() 方法,则返回 false,否则返回 true。

抛出

如果 Event 对象 evt 没有被初始化,或者它的 type 属性为 null 或空串,该方法将抛出异常。

描述

该方法将分派一个合成事件,它由 Document.createEvent() 创建,由 Event 接口或它的某个子接口定义的初始化方法初始化。

调用该方法的节点将成为事件的目标节点,该事件在捕捉阶段中第一次沿着文档树向下传播。如果该事件的 bubbles 属性为 true,那么在事件的目标节点自身处理事件后,它将沿着文档树向上起泡。

Element 对象参考手册

 

 

<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>

以上是关于创建对象,初始化对象属性,给节点分派一个合成事件的主要内容,如果未能解决你的问题,请参考以下文章

面对对象

java使用freeTTS,怎么能让机器输出中文语言

面向对象(创建一个对象的步骤)

JavaScript DOM 注册事件

03.JavaScript 面向对象精要--理解对象

DOM-节点对象+时间节点 综合案例