非原生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 }

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

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

    将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...

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

    使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...

  3. DOM事件里封装方法eventUtil

    var eventUtil={ //添加句柄 addHandler:function (element,type,handler) { //element相当于btn2,type此时用的是click类 ...

  4. 深入理解DOM事件机制系列第四篇——事件模拟

    × 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...

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

    一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件 ...

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

    这部分的内容主要包括Epoll/select的封装,在封装好相应函数后,再使用一个类来管理相应事件,实现的文件为pollmgr.{h, cc}. 事件函数封装 可看到pollmgr.h文件下定一个了一 ...

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

    1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级 ...

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

    Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...

  9. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

  10. DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

    前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = ...

随机推荐

  1. 基础篇之DOS命令

    对于编程的小朋友来说,在DOS中输入一些命令也是常有的事情. 今天就来学习一些常见的命令.[该篇是在B站学习Siki学院的课程时做的笔记] DOS命令目录操作 常用DOS命令(输入命令后按下回车) d ...

  2. mac新仙剑奇侠传 2018

    新仙剑奇侠传 201803重制 下载,挂载后,拖动app到applications应用程序 文件夹即可. https://590m.com/f/28636472-500476381-5c8846 (访 ...

  3. 使用logback需要导入的jar包

    jar包名 logback-access-1.1.2.jar logback-classic-1.1.2.jar logback-core-1.1.2.jar slf4j-api-1.7.25.jar ...

  4. 夜神模拟器连接不上adb的解决办法

    1.夜神模拟器连接不上adb的解决办法 转自 (https://www.jianshu.com/p/6041e64518a8) 最近给模拟器升级了版本,用了一段时间后,突然发现通过adb device ...

  5. 3927Circular Sequence 思维题(求环形最大子列和)

    Given a sequence with n elements, if the last element is also adjacent to the first element of the s ...

  6. NX 二次开发,线性移动uf5943

    #include <uf.h> #include <uf_modl.h> #include <uf_part.h> #include <uf_modl_pri ...

  7. nodejs redis执行lua脚本

    const Redis = require("ioredis"); const redis = new Redis({ port: 6300, // Redis port host ...

  8. Typora激活时,提示【连接激活服务器失败】

    购买了 Typora ,激活时提示[连接激活服务器失败] 按照步骤设置下,重新激活即可.(windows系统示例,mac 类似)

  9. 【python】类的学习

    https://www.bilibili.com/video/av69455439?from=search&seid=406401960648305052 https://zhuanlan.z ...

  10. Mybatis框架中 collection 标签 和 association标签中关于 columnPrefix 属性的底层逻辑

    columnPrefix的作用是给column自动拼接上前缀, 已知多重嵌套的collection 和 association的columnPrefix属性的值是会叠加的 <associatio ...