大白跟着“菜鸟”学node——同名事件
2024-10-11 17:33:02
若存在两个同名事件,触发事件时,两个事件监听器的回调函数会被按次序先后调用。
实例来自菜鸟教程:
var events=require('events');
var emitter=new events.EventEmitter();
emitter.on('someEvent',function(arg1,arg2){
console.log('listener1',arg1,arg2);
});
emitter.on('someEvent',function(arg1,arg2){
console.log('listener2',arg1,arg2);
})
emitter.emit('someEvent','arg1参数','arg2参数');
运行结果:
(图省事把名字命名成同名事件了……)
来猜想一下JS中的同名事件……
呀一下子记不太全JS的事件绑定方法有哪些和区别了……
直接在DOM里绑定事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同名事件测试</title>
</head>
<body>
<button onclick="alert('1')" onclick="alert('2')">点击</button> //谁会写这种代码啊???只是测试测试 </body>
</html>
这样子绑定,结果弹出:1
脚本里绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同名事件测试</title>
</head>
<body>
<button>点击</button>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
alert('1')
}
btn.onclick=function(){
alert('2')
}
}
</script>
</body>
</html>
这样子绑定,结果弹出: 2
猜猜看这个的结果,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同名事件测试</title>
</head>
<body>
<button onclick="alert('1')" onclick="alert('2')">点击</button>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
alert('3')
}
btn.onclick=function(){
alert('4')
}
}
</script>
</body>
</html>
结果是,弹出:4
直接在DOM里绑定事件和脚本里面绑定的事件有优先级吗?还是说会触发后绑定的。
addeventListener可以同时绑定多个事件,且都会执行:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同名事件测试</title>
</head>
<body>
<button onclick="alert('1')" onclick="alert('2')">点击</button>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByTagName('button')[0];
btn.addEventListener('click',function(){
alert('3')
});
btn.addEventListener('click',function(){
alert('4')
});
}
</script>
</body>
</html>
结果,这里依次弹出 1,3,4 好厉害
最新文章
- 如何用BMFont制作图片字
- 最初程序员的思维“修炼”之四——Android平台开发的“强制关闭”解决思路
- long类型在C#和C++中的异同
- 为什么做Web开发要选择PHP
- Opencv2.4.13 与Visual Studio2013 环境搭建配置
- ASP.NET Core中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)
- 常用css样式颜色值: 64位真彩和256位值
- [LeetCode] Partition Labels 分割标签
- VS Code +node npm 调试 js
- python 当前时间多加一天、一小时、一分钟
- 自动化测试-4.selenium的xpath定位
- HTML/HTML5 Input类型&;&;表单
- Const vs. Readonly
- vs 开发常用快捷键
- PDO的三种连接数据库的方式
- testng参数化(提供测试数据)
- [转]C艹中的各种const总结
- 本地如何将svn和git管理的代码做关联
- 解决错误: ios property has a previous declaration
- [ZJOI2006]超级麻将(动规)
热门文章
- 浅析SQLite的锁机制和WAL技术
- UVA1605-Building for UN(思维)
- 文本分类实战(一)—— word2vec预训练词向量
- 吴恩达课后作业学习1-week4-homework-multi-hidden-layer -2
- gogs仓库管理软件 exec: ";git-upload-pack";: executable file not found in $PATH
- 本地搭了http服务(localhost),怎么在vue环境下,通过axios获取到接口数据
- IDEA的Maxcomputer Studio开发
- Shiro安全框架入门笔记
- 面试 10:玩转 Java 选择和插入排序,附冒泡最终源码
- Linux:一位猫奴的意外逆袭