基础知识javascript--事件
浏览数：21 /
时间：2015年06月08日
群里有一个小伙伴在处理事件监听函数的时候，遇到了一点问题，正好我比较空闲，于是帮他指出了代码中的问题，顺便整理一下，方便以后遇到类似问题的伙伴们有一个参考。
这是一个很简单的问题，对于基础知识比较杂实的同学来说。下边用代码简单展示一下：
var btn = document.querySelector(‘#btn‘); btn.addEventListener(‘click‘,function(){ callback(); },false); function callback(){ var event = event.target || event.srcElement; console.log(event) // 为什么event为未定义？ }
这显然是未定义的，估计那个小伙伴以为event和window一样，是系统免费送的参数，看来这样用报错，于是他就在群里问起来了。然后我告诉他问题在哪里，很快，他就改好了。
var btn = document.querySelector(‘#btn‘); btn.addEventListener(‘click‘,callback,false); function callback(event){ var event = event.target || event.srcElement; console.log(event) }
他开心的告诉我，问题解决了。可是问题又来了，为什么我没有在callback中传入实参，函数运行的时候也可以收到值呢？真是个爱思考的好孩纸。我决定帮他弄清楚这个问题。
于是打算写这篇博客来详细分析一下。
首先从
btn.addEventListener(‘click‘,callback,false);这里看过来，系统会默认给callback传递一个event参数。我们打开Chrome浏览器的控制台一看，就明白了：
也就是说，默认情况下，只有一个参数，且参数的名字就是event,这也就是为什么程序员们大都喜欢用event来做为事件回调函数形参数的原因了。
既然说的是默认情况，那么也就会对应存在一些人为指定的情况，这个稍微有点复杂，我在稍后再说。接着看
function callback(event){}
其实这个地方的形参随便用什么名字都无所谓了，只是习惯上用event的话，可读性强一点，你硬要用arg之类的名字也可以。
event.target || event.srcElement;这是为了处理浏览器之间的兼容性问题，百度一下，找到它们的历史源头也不难。
如果要在callback中，除了event之外，还要人加入自己定义的参数怎么办？
btn.addEventListener(‘click‘,callback.bind(this,[‘a‘,‘b‘]),false);
或者，在callback外边再包一层
btn.addEventListener(‘click‘,function(event){ callback(event,‘a‘,‘b‘); },false);
当然，还有更好的解决方法，那就是用 handleEvent 这个属性。
var obj = {
handleEvent : function(event){
callback(event,‘a‘,‘b‘,‘....‘)
},
click : function(){
btn.addEventListener(‘click‘,this,false);
}
}
好了，关于事件的常见用法就分析到这里了，其它都是这些知识点的排列组合。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
