基础知识javascript--事件

群里有一个小伙伴在处理事件监听函数的时候，遇到了一点问题，正好我比较空闲，于是帮他指出了代码中的问题，顺便整理一下，方便以后遇到类似问题的伙伴们有一个参考。

这是一个很简单的问题，对于基础知识比较杂实的同学来说。下边用代码简单展示一下：

 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);

}

}

好了，关于事件的常见用法就分析到这里了，其它都是这些知识点的排列组合。

如果您觉得这文章对您有帮助，请点击【推荐一下】,想跟我一起学习吗？那就【关注】我吧！