Dom3级事件下自定义事件

原文出处:  http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html 。 我拿出作者中的一段,感谢作者原创。

DOM中的事件模拟(自定义事件):

  DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent"); 返回的对象有一个initCustomEvent()方法接收如下四个参数。
  1)type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
  2)bubble(布尔值):标示事件是否应该冒泡;
  3)cancelable(布尔值):标示事件是否可以取消;
  4)detail(对象):任意值,保存在event对象的detail属性中;

可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如:

  var  div = document.getElementById("myDiv");
  EventUtil.addEventHandler(div,"myEvent", function () {
    alert("div myEvent!");
  });
  EventUtil.addEventHandler(document,"myEvent",function(){
    alert("document myEvent!");
  });
  if(document.implementation.hasFeature("CustomEvents","3.0")){
    var e = document.createEvent("CustomEvent");
    e.initCustomEvent("myEvent",true,false,"hello world!");
    div.dispatchEvent(e);
  }
  这个例子中创建了一个冒泡事件“myEvent”。而event.detail的值被设置成了一个简单的字符串,然后在div和document上侦听该事件,因为在initCustomEvent中设置了事件冒泡。所以当div激发该事件时,浏览器会将该事件冒泡到document。
  IE中的事件模拟(IE8及之前版本中):
  与DOM中事件模拟的思路类似,先创建event对象,再为其指定相应信息,然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
  例如:
  var btn = document.getElementById("myBtn");
  //创建事件对象,不接受任何参数,结果会返回一个通用的event对象,你必须为该event对象指定所有必要的信息。
  var event  = document.createEventObject();
  //初始化事件对象
  event.screenX = 100;
  event.screenY = 0;
  event.clientX = 0;
  event.clientY =0;
  event.ctrlKey = false;
  event.altKey = false;
  event.shiftKey = false;
  event.button = 0;

  //触发事件
  btn.fireEvent("onclick",event);

时间: 2024-10-11 22:00:37

Dom3级事件下自定义事件的相关文章

jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h

js事件、自定义dom事件、自定义事件

本文参考资料是:高级编程语言第三版(13章事件和22章自定义事件). 本文涉及到: 事件的组成元素. 事件优化. 模拟事件. 自定义事件的内容 js事件是什么?高级程序13章第一句话说:js与html之间的交互是通过事件实现的.事件是浏览器或者用户自身执行的某种动作,例如我们最常用到的点击事件. 1:js事件 事件流 事件处理程序 事件对象 事件类型 事件流:从页面上接收事件的顺序 事件冒泡:概念事件从最具体的元素接收事件,然后逐级向上传播到较为不具体的元素.这个概念是由ie提出. <!DOCT

jQuery-3.事件篇---自定义事件

jQuery自定义事件之trigger事件 众所周知类似于mousedown.click.keydown等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发. 在jQuery通过on方法绑定一个原生事件 $('#elem').on('click', function() { alert("触发系统事件") }); alert需要执行的条件:必须有用户点击才可以.如果不同用户交互是否能在某一时刻自动触发该事件呢? 正常来说是不可以的,但是jQuery解

js中事件(自定义事件)

今天闲的蛋疼,我们来聊一聊web前端中的事件机制和自定义事件.灵感来自jQuery,在此感谢jQuery作者. 首先,最开始. <button id="button" type="button" onclick="alert('hello')">你好</button> 这是我们在使用html写页面的时候最原生的事件触发方式.上面那行代码会生成一个按钮,当我们点击这个按钮的时候就会弹出一个原生的弹窗,内容是hello. 随着

js原生创建模拟事件和自定义事件的方法

让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 1. 模拟鼠标事件 MDN上已经说得很清楚,尽管为了保持向后兼容MouseEvent.initMouseEvent()仍然可用,但是呢,我们应该使用MouseEvent().我们使用如下页面做测试 1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-CN"> 4

Angular4.x Event (DOM事件和自定义事件)

Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)="onClick()">Click</button> DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡. DOM事件冒泡与Angular可以无缝工作,具体示例如下: im

jQuery事件之自定义事件

其实事件的bind和unbind,都是为了自定义事件做准备. 语法: $(selector).trigger(type, data); 作用:在每一个匹配的元素上触发某类事件,它触发的是由bind()注册的自定义事件. 参数解释: type(string):要采用护法的事件类型 data(Array): 可选参数, 传递给事件处理函数的附加参数 示例: 给一个按钮添加自定义的事件 $("button").bind("myClick", function(ev, a,

jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品.该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库. 注意:使用 on() 方法添加的

Spring内置事件以及自定义事件

1. Spring内置的事件有哪些? Spring中的事件是一个 ApplicationEvent类的子类,由实现 ApplicationEventPublisherAware 接口的类发送,实现 ApplicationListener 接口的类监听. Spring中已经定义了一组内置事件,这些事件由ApplicationContext容器发出.(ContextRefreshedEvent.ContextStartedEvent.ContextStoppedEvent.ContextClosed