若存在两个同名事件,触发事件时,两个事件监听器的回调函数会被按次序先后调用。
实例来自菜鸟教程:
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 好厉害