非原生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. k8s资源清单

    资源清单就是k8s当中用来定义pod的文件,语法格式遵循yaml语法,在yaml当中可以定义控制器类型,元数据,容器端口号等等等....,也可以针对于清单对pod进行删除等操作. 我们可以用kubec ...

  2. 记一次SpringBoot整合Redis的Bug

    SpringBoot整合Redis遇见的坑 <!--Redis配置开始--> <dependency> <groupId>org.springframework.b ...

  3. express的使用:路由、中间件(二)

    13.路由 1.express中的路由指客户端的请求与服务器处理函数间的映射关系 2.express中的路由由请求的类型,请求的URL地址,处理函数组成 3.app.METHOD(PATH,HANDL ...

  4. SSM框架 拦截器 出现“发现了以元素 'mvc:exclude-mapping' 开头的无效内容。应以 '{"http://www.springframework.org/schema/mvc":mapping}' 之一开头”错误

    导致错误位置与代码: spring-mvc.xml文件中的拦截器配置代码,代码如下: <mvc:interceptors> <mvc:interceptor> <mvc: ...

  5. LVS+keepalived实现负载均衡&高可用(原来以及部署方法)

    一.ARP技术概念介绍 为什么讲ARP技术,因为平常工作中有接触.还有就是LVS的dr模式是用到arp的技术和数据. 1.什么是ARP协议 ARP协议全程地址解析协议(AddressResolutio ...

  6. CCIE DC Multicast Part 1.

    Hi Guys! As we all wait anxiously for the training vendors to release Rack Rentals (Come on guys! At ...

  7. Qt实现collapsePanel(折叠)功能

    实践过程中,看到C#实现的CollapsePanel功能,比一般的TabWidget更加直观,充分利用了页面空间,遂感到很有兴趣,也查阅了很多资料搜索Qt在这方面的实现. 目前来说,比较常见的作法就是 ...

  8. sql:常用:group by 多个字段

    首先group by 的简单说明:   group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使用group by的两个要素:   (1) 出现在select后面的字段 ...

  9. 【pytest】@pytest.fixture与@pytest.mark.parametrize结合实现参数化

    背景:测试数据既要在fixture方法中使用,同时也在测试用例中使用 使用方法:在使用parametrize的时候添加"indirect=True"参数.pytest可以实现将参数 ...

  10. 【PTA】1049 Counting Ones

    The task is simple: given any positive integer N, you are supposed to count the total number of 1's ...