大白跟着“菜鸟”学node——同名事件

若存在两个同名事件,触发事件时,两个事件监听器的回调函数会被按次序先后调用。

实例来自菜鸟教程:

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参数');

运行结果:

大白跟着“菜鸟”学node——同名事件

(图省事把名字命名成同名事件了……)

来猜想一下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  好厉害

上一篇:好记性不如烂笔头-linux学习笔记2kickstart自动化安装和cacti


下一篇:LDM和STM指令