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

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. BZOJ4539 [Hnoi2016]树 【倍增 + 主席树】

    题目链接 BZOJ4539 题解 我们把每次复制出来的树看做一个点,那么大树实际上也就是一棵\(O(M)\)个点的树 所以我们只需求两遍树上距离: 大树上求距离,进入同一个点后在模板树上再求一次距离 ...

  2. 洛谷 P2657 [SCOI2009]windy数 解题报告

    P2657 [SCOI2009]windy数 题目描述 \(\tt{windy}\)定义了一种\(\tt{windy}\)数.不含前导零且相邻两个数字之差至少为\(2\)的正整数被称为\(\tt{wi ...

  3. HDU.2734 Quicksum

    Quicksum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  4. MySQL5.6之Index Condition Pushdown(ICP,索引条件下推)-Using index condition

    http://blog.itpub.net/22664653/viewspace-1210844/ -- 这篇博客写的更细,以后看 ICP(index condition pushdown)是mysq ...

  5. BZOJ1912 APIO2010 洛谷P3629 巡逻

    Description: 在一个地区中有 n 个村庄,编号为 1, 2, ..., n.有 n – 1 条道路连接着这些村 庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到达其 他任 ...

  6. STL之三:deque用法详解

    转载于:http://blog.csdn.net/longshengguoji/article/details/8519812 deque函数: deque容器为一个给定类型的元素进行线性处理,像向量 ...

  7. Connections between cities LCA

    Problem Description After World War X, a lot of cities have been seriously damaged, and we need to r ...

  8. ACM3371超时问题

    这的确也是个大坑: 其实在这是到很简单的最小生成树的题目,但是数据量却很大: 用G++提交会超时,用C++不会超时,而且速度超快: 又长见识了.可惜长得不是做题的能力,而是知道它到底有多坑. #inc ...

  9. homebrew常见用法

    1. 安装 Homebrew是mac下安装软件的好帮手, 是使用 ruby 写的,采用 github 来存放信息库,很方便吧. Ruby 已经内置,最好装上 Xcode,因为可能需要一些编译包.然后在 ...

  10. 51Nod 1002 数塔取数问题

    Input示例 4 5 8 4 3 6 9 7 2 9 5 Output示例 28 DP: 递推式: dp[i][j]=max(dp[i+1][j],dp[i+1][j+1])+arr[i][j]; ...