如何在JavaScript中使用自定义事件
2019独角兽企业重金招聘Python工程师标准>>> 
JavaScript 的事件处理是所有浏览器端程序的基本必备技巧。当目标元素的事件被触发时，比如按钮被点击，鼠标移动，或者是表单提交，这些事件触发时都可以触发对应的方法。当然这个过程中我们可以传递一些参数过去来自定义很多事情。
|
1
2
3
4
5
|
<form id="msgbox"action="#"method="get">
<label for="msg">your message</label>
<input id="msg"value=""/>
<button>SEND</button>
</form>
|
|
1
2
3
4
5
6
7
|
document.getElementById("msgbox").addEventListener("submit", function(e) {
e.preventDefault();
varmsg = e.currentTarget.getElementById("msg").value.trim();
if(msg) {
alert(msg);
}
}, false);
|
|
1
2
3
4
5
6
7
8
9
10
11
|
var event = newCustomEvent(
"newMessage",
{
detail: {
message: "Hello World!",
time: newDate(),
},
bubbles: true,
cancelable: true
}
);
|
|
1
|
document.getElementById("msgbox").dispatchEvent(event);
|
|
1
|
document.addEventListener("newMessage", newMessageHandler, false);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var msgbox = document.getElementById("msgbox");
msgbox.addEventListener("submit", SendMessage, false);
// new message: raise newMessage event
function SendMessage(e) {
e.preventDefault();
varmsg = document.getElementById("msg").value.trim();
if(msg && window.CustomEvent) {
varevent = newCustomEvent("newMessage", {
detail: {
message: msg,
time: newDate(),
},
bubbles: true,
cancelable: true
});
e.currentTarget.dispatchEvent(event);
}
}
|
|
1
2
3
4
5
6
7
8
9
|
// listen for newMessage event
document.addEventListener("newMessage", newMessageHandler, false);
// newMessage event handler
functionnewMessageHandler(e) {
LogEvent(
"Event subscriber on "+e.currentTarget.nodeName+", "
+e.detail.time.toLocaleString()+": "+e.detail.message
);
}
|
转载于:https://my.oschina.net/thinkive/blog/644698
如何在JavaScript中使用自定义事件相关推荐
- 如何在JavaScript中检测用户的首选配色方案
by Oskar Hane 由Oskar Hane 如何在JavaScript中检测用户的首选配色方案 (How to detect a user's preferred color scheme i ...
- 如何在javascript中使用多个分隔符分割字符串？
如何在JavaScript中使用多个分隔符拆分字符串? 我正在尝试在逗号和空格上进行拆分,但是AFAIK,JS的拆分功能仅支持一个分隔符. #1楼 对于那些想要在拆分功能中进行更多自定义的人,我编写了 ...
- 现在JavaScript日期–如何在JavaScript中获取当前日期
Many applications you build will have some sort of a date component, whether it's the creation date ...
- 如何在JavaScript中区分深层副本和浅层副本
by Lukas Gisder-Dubé 卢卡斯·吉斯杜比(LukasGisder-Dubé) 如何在JavaScript中区分深层副本和浅层副本 (How to differentiate betw ...
- vj节点_创意编码—如何在JavaScript中创建VJ引擎
vj节点 by George Gally 通过乔治·加利 创意编码-如何在JavaScript中创建VJ引擎 (Creative Coding - How to create a VJ engine ...
- html内置时间对象,JavaScript中的常用事件，以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解 今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
- 如何在 JavaScript 中实现拖放
来源:http://www.javaeye.com/post/152142 译者说明: 终于完成了全文的翻译,由于时间比较参促,文章没有过多的校正与润色,阅读过程中难免会有些许生硬或不准确的感觉,请大 ...
- 如何在JavaScript中声明名称空间？
如何在JavaScript中创建名称空间,以使我的对象和函数不会被其他同名对象和函数覆盖? 我使用了以下内容: if (Foo == null || typeof(Foo) != "obje ...
- 如何在JavaScript中直观地设计状态
by Shawn McKay 肖恩·麦凯(Shawn McKay) 如何在JavaScript中直观地设计状态 (How to visually design state in JavaScript) ...
最新文章
- java数据库视图工具_数据库视图工具类
- 浅谈AJAX基本实现流程
- PHP文件操作常用函数总结
- JavaScript响应键盘不再用KeyboardEvent.keyCode，而是用keyboardEvent.code
- 使用pytorch的相关问题总结
- 华科计算机考研2022年分数线,2022年华中科技大学软件工程考研分数线、参考书、上岸前辈初复试经验...
- mysql校对规则_MYSQL校对规则
- 如何实现动态加载删除android,关于android:融云IMKit-动态删除或添加plugin-的实现...
- 记一次ST-LINK维修及刷固件过程
- 剑指offer——23.反转链表
- python删除数据库的数据完整代码_轻松掌握Python对数据库的增、删、改、查
- java值得注意的几个问题
- python贪吃蛇_python实现贪吃蛇
- H3C AP当无线路由器静态IP上网配置
- IP代理软件哪个比较好
- 致敬赵雷：基于TensorFlow让机器生成赵雷曲风的歌词
- 专访Riverbed CEO：私有化和出售业务瘦身后的Riverbed更专注
- FOJ 1573 大学自习室
- 京东登录注册页面的简单实现——（仿）
- 操作系统的中的 IO