根据事件的不同，可用的自定义方法也不同。

document.createEvent('Event');

实现主要有4个步骤：

1.创建事件。

2.初始化事件（三个参数：事件名，是否起泡，是否取消默认触发）

3.监听事件

4.触发事件

 var Evt = document.createEvent('Event');//创建一个事件

 Evt.initEvent('inputChangeEvt', true, true);//初始化事件,给定事件名字

window.addEventListener('Evt', function (event) {//监听这个自定义事件动没动

        console.log(event);

    });

window.dispatchEvent(Evt);//触发自定义inputChangeEvt事件

具体实现。

<!DOCTYPE html>

<html>

<head>

    <meta charset=utf-8" />

    <title>By：DragonDean</title>

    <script type="application/javascript">

        window.onload=function(){

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

            evt.initEvent('myEvent',true,true);

            var obj=document.getElementById('testBox');

            obj.addEventListener('myEvent', function(){

                console.log('myEvent 事件触发了');

            }, false);

            obj.dispatchEvent(evt);

        };

    </script></head>

<body>

<div id="testBox">ddddd</div>

</body>

</html>

当然，自定义事件是的场景肯定不是这么简单，工作中刚好需要做一个自定义事件，用于我如果发生数据改变，就将数据发送给其它js。其中牵扯到动态添加属性，事件传值等。

/**

 * Created by v_zweiwang on 2015/10/26.

 */

window.onload = function () {

    window.addEventListener('inputChange', function (event) {//监听这个自定义事件动没动

        console.log(event.detail);

    });

    myBord.init();//使用

};

(function(){

    window['myBord'] = {};

    function init() {

        myBord.inputChangeEvt = document.createEvent('Event');//创建一个事件

        myBord.inputChangeEvt.initEvent('inputChange', true, true);//初始化事件,给定事件名字

        //初始化一下数据

        myBord.inputChangeEvt.detail = {

            TranslateX: '0.00',

            TranslateY: '0.00',

            TranslateZ: '0.00',

            RotateX: '0.00',

            RotateY: '0.00',

            RotateZ: '0.00',

            Scale: '1.00'

        };

        try {

            window.dispatchEvent(myBord.inputChangeEvt);//触发自定义inputChangeEvt事件

        } catch (e) {

            console.error(e);

        }

    }

    window['myBord']['init'] = init;

})();

至此，已经可以利用事件传值了。直接将以上代码复制到html中，运行，键盘F12，就能看到以下输出。

好，现在来讲讲实现。

（解释代码）

如何动态添加属性。

如何利用事件传递值。

JavaScript自定义事件，动态添加属性的更多相关文章

  1. 我的Python学习笔记（四）：动态添加属性和方法

    一.动态语言与静态语言 1.1 动态语言 在运行时代码可以根据某些条件改变自身结构 可以在运行时引进新的函数.对象.甚至代码,可以删除已有的函数等其他结构上的变化 常见的动态语言:Object-C.C ...

  2. JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()

    在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...

  3. amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间，给了我们什么启示

    amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间,给了我们什么启示 一.总结 一句话总结:详细看使用文档(说明文档说的真的是非常详细呢,不过循序渐进,不同阶段 ...

  4. 在页面中添加两个 ＜select＞ 标签，用来显示年份和月份；同时添加两个 ＜ul＞ 标签，一个用来显示星期，另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...

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

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

  6. Runtime(动态添加属性)

    下面通过一个实例展示一下Runtime(动态添加属性)的用法 下面对运行时添加属性用到的策略参数进行补充: 这样看来,前面的NSString* name用的策略是retain nonatomic就知道 ...

  7. javascript:自定义事件初探

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

  8. 理解的javascript自定义事件

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

  9. JS-给对象动态添加属性

    var obj = {};//用来存放获取到所填写的信息 btn.onclick = function(){ var city = input_city.value; var num = input_ ...

随机推荐

  1. BZOJ4563：[HAOI2016]放棋子——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4563 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列 ...

  2. ZOJ1937：Addition Chains——题解

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1937 题目大意:创造一个数列,使得它: 1.单调不递减. 2.其中一个元素 ...

  3. BZOJ 1010: [HNOI2008]玩具装箱toy | 单调队列优化DP

    原题: http://www.lydsy.com/JudgeOnline/problem.php?id=1010 题解: #include<cstdio> #include<algo ...

  4. eclipse中支持python

    1. 启动eclipse,help-> Install New Software; 2. 点击add 3. 设置Repository name: pydev Location: http://p ...

  5. 三大linux系统对比

    概述: centos作为服务器部署是第一选择.CentOS去除很多与服务器功能无关的应用,系统简单但非常稳定,命令行操作可以方便管理系统和应用,丰富的帮助文档和社区的支持. ubuntu最佳的应用领域 ...

  6. FreeRTOS - 定时器使用注意

    1.只有进入定时器守护任务,从定时器命令队列取出命令,队列空间才会空出一个可用空间:所有定时器公用一个定时器队列 2.如果使用软件定时器,在调度器开始前,会自动创建一个定时器守护任务,configTI ...

  7. 如何更有效使用 Rational AppScan 扫描大型网站，第 1 部分: 工作原理及技术分析

    Rational AppScan 工作原理 Rational AppScan(简称 AppScan)其实是一个产品家族,包括众多的应用安全扫描产品,从开发阶段的源代码扫描的 AppScan sourc ...

  8. UBOOT启动内核过程

    1.摘要 (1).启动4步骤第一步:将内核搬移到DDR中第二步:校验内核格式.CRC等第三步:准备传参第四步:跳转执行内核(2).涉及到的主要函数是:do_bootm和do_bootm_linux(3 ...

  9. linux tar指定文件到指定目录

    项目需求:从远处拷贝压缩文件到本地后并解压,解压后的部分文件拷贝并重命名到其他目录 需求拆分:1.拷贝文件 2.解压文件 3.批量重命名 步骤一查看:http://www.cnblogs.com/dd ...

  10. Python爬虫学习笔记之微信宫格验证码的识别(存在问题)

    本节我们将介绍新浪微博宫格验证码的识别.微博宫格验证码是一种新型交互式验证码,每个宫格之间会有一条 指示连线,指示了应该的滑动轨迹.我们要按照滑动轨迹依次从起始宫格滑动到终止宫格,才可以完成验证,如 ...