自定义DOM事件函数封装

非原生DOM触发,个性化定制的自定义事件。

  • currentTarget(DOM对象):要触发事件的元素节点。
  • type(字符串):触发的事件类型,例如"keydown"。
  • bubbles(布尔值):表示事件是否应该冒泡。
  • cancelable(布尔值):表示事件是否可以取消。
  • detail(对象):任意值,保存在 event 对象的 detail 属性中。
 1    function customEvent (currentTarget, type, bubbles, cancelable, detail) {
 2         /* 自定义响应事件 */
 3         //IE9+
 4         if (document.implementation.hasFeature("CustomEvents", "3.0")) {
 5             bubbles = (bubbles === undefined) ? true : bubbles; // 默认事件冒泡
 6             cancelable = (cancelable === undefined) ? true : cancelable; // 默认事件可以取消
 7             detail = detail || {}; //这里可以是事件中包含的信息、数据
 8             var e = document.createEvent("CustomEvent");
 9             e.initCustomEvent(type, bubbles, cancelable, detail);
10             currentTarget.dispatchEvent(e); // 触发事件
11         }
12         else console.log("该环境不支持自定义事件!");
13     }

原文地址:https://www.cnblogs.com/jeffid/p/8904705.html

时间: 2024-10-11 00:46:48

自定义DOM事件函数封装的相关文章

javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler,false); }else if(element.attachEven

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

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

[前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, function (event) { console.log('双击') }) function doubleClick(ele, fn) { // 省略参数合法性的判断 let event = new Event("doubleClick"); // 自定义双击事件(可以使用CustomEvent

MIT 2012分布式课程基础源码解析-事件管理封装

这部分的内容主要包括Epoll/select的封装,在封装好相应函数后,再使用一个类来管理相应事件,实现的文件为pollmgr.{h, cc}. 事件函数封装 可看到pollmgr.h文件下定一个了一个虚基类aio_mgr 1 class aio_mgr { 2 public: 3 virtual void watch_fd(int fd, poll_flag flag) = 0; 4 virtual bool unwatch_fd(int fd, poll_flag flag) = 0; 5

jquery事件函数和原生事件绑定函数中return false的区别

一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件绑定事件的话,事件函数返回false会是个什么情况,看看是不是和jquery一个样:<!doctype html><html>        <head>                <meta charset='utf-8' />             

如何优雅的封装一个DOM事件库

1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级事件只能给元素的某一个行为绑定一次方法,第二次绑定会把前面的覆盖掉. DOM 2级事件是让DOM元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法来实现的. DOM 2可以给某一个元素的同一个行为绑定多个不同的方法 //实例 1 obj.addEven

回调函数与DOM事件

原文:http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ 先看如下代码: 1 document.addEventListener("DOMContentLoaded", function() { 2 console.log("Init: 1"); 3 DOES_NOT_EXIST++; // error 4 }, false); 5 6 document.addEventListener(&quo

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

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

观察者模式 -&gt; dom事件 / 自定义事件 / Promise 我的理解

观察者模式(Observer) 又称作为发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者对象之间通讯和耦合的问题; 观察者模式例子 引用于<JavaScript设计模式> var Observer = (function(){ var _messages = {}; // 监听信息容器 return { /** * 注册监听信息接口 * @param {String} type 监听信息类型 * @param {Function} fn 对应的回调函数 */ regist: