js事件触发器 dispatchEvent()

最新推荐文章于 2024-08-22 09:33:13 发布
最新推荐文章于 2024-08-22 09:33:13 发布
阅读量1k 收藏 1
点赞数
文章标签： python 网络 javascript ViewUI

【其实就是自动触发事件，而非手动(交互)触发事件】

dispatchEvent是作为高级浏览器(如chrome、Firfox等)的事件触发器来使用的，那么什么是事件触发器？就是触发事件的东西。可能有人觉得有点莫名其妙，触发事件不是在交互中被触发的吗？的确，通常情况下，事件的触发都是由用户的行为如点击、刷新等操作实现，但是，其实有的情况下，事件的触发必须由程序来实现，比如ajax框架的一些自定义事件。正如事件的绑定一样，对于浏览器而言，绑定事件分为高级浏览器和IE浏览器两派，事件触发器也是分为高级浏览器和IE两派，而dispatchEvent正是用于高级浏览器的事件触发。下面看我整理的一个触发事件的例子：

 
  1. <!-- 
  2. Author: lJian 
  3. -->  
  4.   
  5. <!DOCTYPE html>  
  6. <html>  
  7. <head lang="en">  
  8.     <meta charset="UTF-8">  
  9.     <title></title>  
  10. </head>  
  11. <body>  
  12.   
  13. </body>  
  14. <script type="text/javascript">  
  15.     //document上绑定自定义事件oneating  
  16.     document.addEventListener('eat', function (event) {  
  17.         alert(event.mingzi+'，'+event.message);  
  18.     }, false);  
  19.   
  20.     //创建event的对象实例。  
  21.     var event = document.createEvent('HTMLEvents');  
  22.     // 3个参数：事件类型，是否冒泡，是否阻止浏览器的默认行为  
  23.     event.initEvent("eat", true, true);  
  24.     /*属性，随便自己定义*/  
  25.     event.mingzi = 'hello,我是李小贱';  
  26.     event.message = '我今天24岁';  
  27.   
  28.     //触发自定义事件oneating  
  29.     document.dispatchEvent(event);  
  30. </script>  
  31. </html>  


dispatchEvent大概就是这三步，上面的例子结果是：在页面载入的时候，会弹出提示框，也就是触发了oneating这个自定义事件。下面看看据说来自司徒正美的一段代码：

 
  1. var fireEvent = function(element,event){  
  2.         if (document.createEventObject){  
  3.             // IE浏览器支持fireEvent方法  
  4.             var evt = document.createEventObject();  
  5.             return element.fireEvent('on'+event,evt)  
  6.         }  
  7.         else{  
  8.             // 其他标准浏览器使用dispatchEvent方法  
  9.             var evt = document.createEvent( 'HTMLEvents' );  
  10.             evt.initEvent(event, true, true);  
  11.             return !element.dispatchEvent(evt);  
  12.         }  
  13.     };  

 

document.creatEventObject()是IE创建event对象实例的方法，和document.creatEvent('HTMLEvents')在非IE主流浏览器下的作用相同，fireEvent是IE下的事件触发器，与dispatchEvent在非IE主流浏览器下作用相同。
Node.js精进（4）——事件触发器
「 虚幻私塾」
06-24 897
Events 是 Node.js 中最重要的核心模块之一，很多模块都是依赖其创建的，例如上一节分析的流，文件、网络等模块。比较知名的 Express、KOA 等框架在其内部也使用了 Events 模块。Events 模块提供了EventEmitter类，EventEmitter 也叫事件触发器，是一种观察者模式的实现。观察者模式是软件设计模式的一种，在此模式中，一个目标对象（即被观察者对象）管理所有依赖于它的观察者对象。当其自身状态发生变化时，将以广播的方式主动发送通知（在通知中可携带一些数据），这样就能在
JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()
weixin_30294709的博客
02-15 2049
　　在学习目标事件的方法的时候，接触到了dispatchEvent()方法。度娘查一查，这是一个事件触发器，事件触发器其实就是触发事件的东西。 　　通常情况下，我们触发事件都是在交互中触发的事件，例如点击按钮（click）、提交表单（submit）等。但是有的情况下，事件触发只能由程序来完成，例如ajax框架的一些自定义事件。 　　基本上dispatchEvent()方法用于触发自定义事...
javascript事件触发器
wodetiankong516的博客
04-09 6580
概述     事件触发器就是用来触发某个元素下的某个事件，IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。 一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事件，比如click，mouseover，load等等，有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我
EventDispatcher.js 使用教程
最新发布
gitblog_00343的博客
08-22 507
EventDispatcher.js 使用教程 eventdispatcher.jsJavaScript events for custom objects项目地址:https://gitcode.com/gh_mirrors/ev/eventdispatcher.js 项目介绍 EventDispatcher.js 是一个轻量级的 JavaScript 事件调度库，由 mrdoob 开发并维护...
理解 JavaScript事件触发器模式
王亮的专栏
10-29 2353
JavaScript 标准回调模式下，可以处理一些简单的问题，如果，要想控制回调函数 ，啥时候 、啥情况下才被调用 ，就不好办了。 事件发射器模式，可以很好的控制回调函数。 当你使用事件发射器模式的时候，这会涉及到两个或者两个以上的对象的使用，-------你需要一个 事件发射器（event emitter），还有两个，或者更多的事件监听者（event listeners）。
JavaScript的dispatchEvent 手动触发事件
爱蹦跶的全栈大A阿
02-01 2094
在Web开发中,我们会定义各种事件处理程序,等待浏览器对元素的默认行为触发响应。但是有时我们也需要主动触发事件,这就需要用到dispatchEvent方法。dispatchEvent允许我们以编程方式“触发”事件,调用事件处理程序,模拟DOM的默认行为。掌握它可以在某些场景下帮助我们减少代码重复,实现更优雅的解决方案。本文将详细介绍dispatchEvent的使用方式,包括创建自定义事件对象,初始化事件,以及触发事件的具体示例。读完本文后,你将能熟练使用dispatchEvent来触发代码中的事件。
js dispatchEvent
wgod
11-10 2017
运用场景 一是触发自定义事件，浏览器自带事件一般由浏览器接收某些操作之后触发，而自定义事件的触发就需要使用dispatchEvent来进行手动触发了。 二是触发浏览器标准事件。根据需求决定，某些操作如果正好与某个元素事件的触发一致，且该事件很好模拟，我们就可以触发该事件来达到某些我们需要的执行结果。 <div id="div"></div> <script> var elem = document.querySelector('#div'); .
javascript的事件触发器介绍的实现
10-25
JavaScript事件触发器是在编程中用于模拟用户交互的机制，它允许开发者在程序中手动触发绑定在DOM元素上的事件处理器。事件触发器在多种场景下都非常有用，比如自动化测试、框架开发、自定义事件触发等。 在...
javascript触发模拟鼠标点击事件
10-16
无论是实现基于事件的动画效果、验证用户输入、还是其他依赖于事件触发的场景，了解如何在JavaScript中模拟触发这些事件都是一个非常有用的技能。 通过本文提供的示例和详细说明，相信读者能更好地理解JavaScript中...
JavaScript 模拟用户单击事件
11-30
首先，`click()` 方法是 jQuery 提供的一个便捷的事件绑定和触发器。当调用 `$(selector).click()` 时，它会为指定选择器匹配的元素绑定一个点击事件处理器。而 `$(selector).click(function() {})` 则用于添加点击...
dispatchEvent
2401_84139161的博客
08-06 182
当你调用formElement.dispatchEvent(submitEvent)时，浏览器会尝试找到与 submitEvent 类型相匹配的事件监听器，并依次触发它们。这就像用户实际上触发了该事件一样，但实际上是通过 JavaScript 代码模拟的。是一个 DOM (Document Object Model) 元素的方法，用于触发一个事件。这个方法允许你在 JavaScript 中。一个事件的发生，就好像该事件是由用户的交互行为触发的一样。举个例子就很好理解了。
js事件触发大全
07-18
js事件触发大全js事件触发大全
flex中dispatchEvent的用法(自定义事件)
02-21 5712
Evevt和EventDispatcher类在as3的事件机制中是很重要的角色，dispatchEvent()是EventDispatcher类的一个事件发送方法，它可以发送出Event类或其子类的实例，在as3中所有的显示对象都可以发送事件，因为as3中所有的显示对象都是EventDispatcher子类DisplayObject的实例。<br /><br />   发送事件有三种方式：继承EventDispatcher，如sprite等显示对象、复合EventDispatcher或其子类、实现IEven
js手动触发事件dispatchEvent()
热门推荐
qq_35134066的博客
01-29 2万+
如果大家将一张网页看成一个form的话，大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的，只要发送一条消息即可达成。(PostMessage) 但是网页并不是基于消息机制的，如果我们想在一张网页上写出一个类似于按键精灵的功能该如何实现呢？ 为大家介绍js下的几个方法：(jquery使用trigger()触发事件) 1. createEvent（...
javascript事件触发器fireEvent和dispatchEvent
qq_41647772的博客
12-28 695
学习中遇到了dispatchEvent，查阅资料总结以下 事件触发器是用来触发某个元素下的某个事件，IE下有fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。 一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事件，比如click，mouseover，load等等，有些时候我们需要自定义事件或...
JavaScript--DOM-- .dispatchEvent(）派发事件
weixin_45705239的博客
04-23 748
是 DOM API 中的一个方法，用于在节点上触发指定的事件。你可以使用这个方法来模拟用户交互或者通知代码中其他部分某些事情已经发生。JavaScript 允许你创建不同类型的事件，例如 Event, CustomEvent, MouseEvent, KeyboardEvent 等。每种事件类型都可能有自己特定的初始化方法。对于自定义事件，你通常会使用 new CustomEvent() 构造函数。创建事件后，你可以通过调用在 DOM 节点上可用的 dispatchEvent 方法来派发它。
Event::dispatchEvent
finding的专栏
08-01 3526
今天有仔细看了一遍webkit中event的dispatch机制，整理如下（以WebKit-人）
使用 dispatchEvent() 方法
weixin_30900589的博客
10-06 1397
使用 dispatchEvent() 方法 在组件 ActionScript 类文件的正文中，您可以使用 dispatchEvent() 方法来广播事件。dispatchEvent() 方法的语法如下： dispatchEvent(eventObj) eventObj 参数是一个描述事件的 ActionScript 对象在调用 dispatchEvent() 方法之前，必须在代码中对...
掌握JavaScript自定义事件：构造与应用
在JavaScript编程中，自定义事件是一种核心机制，它允许开发者在Web页面上实现更加灵活和定制化的交互。自定义事件并非浏览器内置的，而是开发者通过编程手段创建的，用于响应特定的用户行为或应用程序状态变化。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值