自定义事件

1、event构造函数自定义事件

/*
 * 自定义一个名为build的事件
 * bubbles :事件是否冒泡
 * cancelable:是否阻止事件的默认操作
 * composed:指示事件是否将触发影子根外部的侦听器
 */
var buildEvent = new Event('build',{"bubbles":true, "cancelable":false,"composed":false}); 
//监听自定义定义的build事件   elem=getElemntById("xx").addEventListener()或者document.addEventListener()
elem.addEventListener('build', function (e) {
    /* 类似elem.onclick */ 
}, false);

//手动触发事件，自定义的浏览器是捕获不到的需要用下面的代码手动触发

elem.dispatchEvent(buildEvent);

 2、CustomEvent()自定义事件

为了向事件对象添加更多数据，存在CustomEvent接口，并且可以使用详细信息属性传递自定义数据。 例如，可以如下创建事件

var event = new CustomEvent('build', { detail: elem.dataset.time });

面的代码允许你在事件监听器中访问更多的数据：

function eventHandler(e) {

  log('The time is: ' + e.detail);

}

例子：

obj=document.querySelector('form')

// 可以监听为定义的事件，我们在后面补上就行

obj.addEventListener("cat", function(e) { process(e.detail) });

// 创建自定义事件

var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});

//手动触发事件

obj.dispatchEvent(event);

模拟鼠标点击事件

  <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>simulate click</title>

</head>

<body>

  <input type="button" value="clickMe" id="demo_click">

  <script>

      const btn = document.getElementById('demo_click');

      btn.onclick = function () { //

        alert('click complete!');

      };

      simulateClick();

    // 2. 模拟 浏览器的鼠标点击事件

    // 2.1 可以触发 onclick 事件（先触发）

    // 2.2 可以触发 addEventListener 事件（后触发）

    // 2.3 jQuery 的事件绑定底层就是 addEventListener ,

      function simulateClick() { // 模拟 浏览器的鼠标点击事件

        const event = new MouseEvent('click', {

          view: window,

          bubbles: true,

          cancelable: true

        });

        btn.dispatchEvent(event);

      }

  </script>

</body>

</html>

或者

var e = document.createEvent("MouseEvents");

e.initEvent("click", true, true);

document.getElementById("clickme").dispatchEvent(e); //只要id 就好  

或者

var obj = document.getElementById("obj");

//obj元素上绑定click事件

obj.addEventListener('click', function (event) {

alert(event.eventType);

}, false);

var event1 = document.createEvent('HTMLEvents');

event1.initEvent("click", true, true);

event1.eventType = 'message';

//触发obj元素上绑定click事件

obj.dispatchEvent(event1);

 IE<9为fireEvent方法

//document上绑定自定义事件ondataavailable

document.attachEvent('ondataavailable', function (event) {

   alert(event.eventType);

});

var obj=document.getElementById("obj");

//obj元素上绑定click事件

obj.attachEvent('onclick', function (event) {

   alert(event.eventType);

});

//调用document对象的createEventObject方法得到一个event的对象实例。

var event = document.createEventObject();

event.eventType = 'message';

//触发document上绑定的自定义事件ondataavailable

document.fireEvent('ondataavailable', event);

//触发obj元素上绑定click事件

document.getElementById("test").onclick = function () {

   obj.fireEvent('onclick', event);

};

3、废弃的旧方法

// Create the event.

var event = document.createEvent('Event');

// Define that the event name is 'build'.

event.initEvent('build', true, true);

// Listen for the event.

elem.addEventListener('build', function (e) {

  // e.target matches elem

}, false);

// target can be any Element or other EventTarget.

elem.dispatchEvent(event);

自定义事件javascript的更多相关文章

  1. Javascript之自定义事件

    Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加.删除事件. 下面通过实例,一步一步构建一个具体的Javasc ...

  2. javascript事件之：谈谈自定义事件(转)

    http://www.cnblogs.com/pfzeng/p/4162951.html 对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候.给需要懒加载的图片定义一 ...

  3. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  4. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  5. javascript事件之：谈谈自定义事件

    对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候.给需要懒加载的图片定义一个appear事件.当页面图片开始出现时候,触发这个自定义的appear事件(注意,这里只 ...

  6. JavaScript自定义事件

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...

  7. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  8. Javascript 自定义事件 (custom event)

    Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...

  9. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

随机推荐

  1. 计算图像数据集的RGB均值

    最近在跑代码的时候,需要用到RGB三个通道上的均值,如下图所示: 写了一个程序,如下: import os import cv2 import random import numpy as np #数 ...

  2. POJ3321Apple Tree

    Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 39566 Accepted: 11727 Descript ...

  3. MyBatis与Hibernate

    Mybatis和hibernate不同,它不完全是一个ORM框架,因为MyBatis需要程序员自己编写Sql语句.mybatis可以通过XML或注解方式灵活配置要运行的sql语句,并将java对象和s ...

  4. [sonata admin] argument "$code" of method

    2. CREATING AN ADMIN 按照这里,在 AppBundle中的Controller创建了 CategoryAdmin 类,当运行 php bin/console server:star ...

  5. [JZOJ4648] 【NOIP2016提高A组模拟7.17】锦标赛

    题目 描述 题目大意 有nnn个人,你要确定一个出场序列.每次新上台的人就会和擂主打一架,胜利的人继续当擂主.题目给出两两之间打架胜利(失败)的概率. 问111选手坚持到最后的最大概率. 思考历程 看 ...

  6. thinkphp 虚拟模型

    虚拟模型是指虽然是模型类,但并不会真正的操作数据库的模型.有些时候,我们建立模型类但又不需要进行数据库操作,仅仅是借助模型类来封装一些业务逻辑,那么可以借助虚拟模型来完成.虚拟模型不会自动连接数据库, ...

  7. duilib教程之duilib入门简明教程2.VS环境配置

    既然是入门教程,那当然得基础点,因为搜索duilib相关资料时,发现有些小伙伴到处都是编译错误,以及路径配置错误等等,还有人不知道SVN,然后一个个文件手动下载的.    其实吧,duilib的定位好 ...

  8. php链表笔记：合并两个有序链表

    <?php /** * Created by PhpStorm. * User: huizhou * Date: 2018/12/2 * Time: 15:29 */ /** * 合并两个有序链 ...

  9. 关于新手必须要理解的几个名词，cookie、session和token

    以下要说的,虽然不是开发过程中必须会遇到的,但却是进阶之路上必须要掌握的,一些涉及到状态管理与安全的应用当中尤为重要. 我之前虽略有学习,但也是东拼西凑临时看的一点皮毛,所以在这个假期利用一点时间,整 ...

  10. day 40 MySQL之视图、触发器、事务、存储过程、函数

    MySQL之视图.触发器.事务.存储过程.函数   阅读目录 一 视图 二 触发器 三 事务 四 存储过程 五 函数 六 流程控制 MySQL这个软件想将数据处理的所有事情,能够在mysql这个层面上 ...