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_ ...
随机推荐
- BZOJ4563:[HAOI2016]放棋子——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4563 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列 ...
- ZOJ1937:Addition Chains——题解
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1937 题目大意:创造一个数列,使得它: 1.单调不递减. 2.其中一个元素 ...
- BZOJ 1010: [HNOI2008]玩具装箱toy | 单调队列优化DP
原题: http://www.lydsy.com/JudgeOnline/problem.php?id=1010 题解: #include<cstdio> #include<algo ...
- eclipse中支持python
1. 启动eclipse,help-> Install New Software; 2. 点击add 3. 设置Repository name: pydev Location: http://p ...
- 三大linux系统对比
概述: centos作为服务器部署是第一选择.CentOS去除很多与服务器功能无关的应用,系统简单但非常稳定,命令行操作可以方便管理系统和应用,丰富的帮助文档和社区的支持. ubuntu最佳的应用领域 ...
- FreeRTOS - 定时器使用注意
1.只有进入定时器守护任务,从定时器命令队列取出命令,队列空间才会空出一个可用空间:所有定时器公用一个定时器队列 2.如果使用软件定时器,在调度器开始前,会自动创建一个定时器守护任务,configTI ...
- 如何更有效使用 Rational AppScan 扫描大型网站,第 1 部分: 工作原理及技术分析
Rational AppScan 工作原理 Rational AppScan(简称 AppScan)其实是一个产品家族,包括众多的应用安全扫描产品,从开发阶段的源代码扫描的 AppScan sourc ...
- UBOOT启动内核过程
1.摘要 (1).启动4步骤第一步:将内核搬移到DDR中第二步:校验内核格式.CRC等第三步:准备传参第四步:跳转执行内核(2).涉及到的主要函数是:do_bootm和do_bootm_linux(3 ...
- linux tar指定文件到指定目录
项目需求:从远处拷贝压缩文件到本地后并解压,解压后的部分文件拷贝并重命名到其他目录 需求拆分:1.拷贝文件 2.解压文件 3.批量重命名 步骤一查看:http://www.cnblogs.com/dd ...
- Python爬虫学习笔记之微信宫格验证码的识别(存在问题)
本节我们将介绍新浪微博宫格验证码的识别.微博宫格验证码是一种新型交互式验证码,每个宫格之间会有一条 指示连线,指示了应该的滑动轨迹.我们要按照滑动轨迹依次从起始宫格滑动到终止宫格,才可以完成验证,如 ...