JavaScript自定义事件，动态添加属性
根据事件的不同，可用的自定义方法也不同。
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自定义事件，动态添加属性的更多相关文章
- 我的Python学习笔记（四）：动态添加属性和方法
一.动态语言与静态语言 1.1 动态语言 在运行时代码可以根据某些条件改变自身结构 可以在运行时引进新的函数.对象.甚至代码,可以删除已有的函数等其他结构上的变化 常见的动态语言:Object-C.C ...
- JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()
在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...
- amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间，给了我们什么启示
amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间,给了我们什么启示 一.总结 一句话总结:详细看使用文档(说明文档说的真的是非常详细呢,不过循序渐进,不同阶段 ...
- 在页面中添加两个 ＜select＞ 标签，用来显示年份和月份；同时添加两个 ＜ul＞ 标签，一个用来显示星期，另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...
- Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- Runtime(动态添加属性)
下面通过一个实例展示一下Runtime(动态添加属性)的用法 下面对运行时添加属性用到的策略参数进行补充: 这样看来,前面的NSString* name用的策略是retain nonatomic就知道 ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- JS-给对象动态添加属性
var obj = {};//用来存放获取到所填写的信息 btn.onclick = function(){ var city = input_city.value; var num = input_ ...
随机推荐
- POJ3422：Kaka's Matrix Travels——题解
http://poj.org/problem?id=3422 题目大意: 从左上角走到右下角,中途取数(数>=0),然后该点的数变为0,求走k的总价值和最大值. ———————————————— ...
- BZOJ1597 土地购买 【dp + 斜率优化】
1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 5466 Solved: 2035 [Submi ...
- angularJS批量删除 品优购删除品牌（通用复选框批量选中删除解决思路）
思路: 一步:在点击复选框时维护变量数组 在js中定义一个数组变量, 给复选框添加点击动作, 在动作中判断当前复选框是否为选中状态(即点击后复选框的是否选中状态), 若为选中状态,则向数组中添加选中的 ...
- POJ3468：A Simple Problem with Integers（线段树模板）
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 149972 ...
- C#学习之泛型继承和静态成员
想要理解这里有必要先将泛型类学习充分.这里讲解的是泛型类继承类的类型和静态成员. 在前面C#学习之泛型中,创建的LinkList<T>类实现了IEnumerable<T>接口. ...
- Spring Boot 启动报错 Exception in thread "main" java.lang.StringIndexOutOfBoundsException: String index out of range: 37
使用命令 java -jar springBoot.jar 启动项目,结果报错如下: Exception at java.lang.String.substring(String.java:) at ...
- 通过反射获取T.class代码片段
说明 持久化框架MyBatis和Hibernate中我们多多少少都会自己取写工具类!但是我们一般都会处理结果集转换成持久化对象,但是我们都要使用类! 代码片段 abstract public clas ...
- idea中设置springboot热部署
在idea中设置springboot热部署,项目修改的时候不用手动重启应用 1,pom中添加依赖 <dependency> <groupId>org.springframewo ...
- uva 10683 Fill
https://vjudge.net/problem/UVA-10603 题意: 倒水问题,输出最少的倒水量和目标水量 如果无解,目标水量就是尽可能接近给定点的目标水量,但不得大于给定的目标水量 推推 ...
- 通过java客户端连接hbase 注意事项
1.通过Java客户端连接Hbase,其中hbase通过zookeeper去管理,需要注意的是客户端端口. 通过在浏览器端输入地址查看:http://192.168.3.206:60010/maste ...