js事件的监听器的使用
1、当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行。如下:
[javascript] view plain copy
- <span style="font-size:18px;">window.onload = function(){
- var btn = document.getElementById("yuanEvent");
- btn.onclick = function(){
- alert("第一个事件");
- }
- btn.onclick = function(){
- alert("第二个事件");
- }
- btn.onclick = function(){
- alert("第三个事件");
- }
- }</span>
最后只输出:第三个事件,因为后一个方法都把前一个方法覆盖掉了。
原生态的事件绑定函数addEventListener:
[javascript] view plain copy
- var eventOne = function(){
- alert("第一个监听事件");
- }
- function eventTwo(){
- alert("第二个监听事件");
- }
- window.onload = function(){
- var btn = document.getElementById("yuanEvent");
- //addEventListener:绑定函数
- btn.addEventListener("click",eventOne);
- btn.addEventListener("click",eventTwo);
- }
输出:第一个监听事件 和 第二个监听事件
2