事件处理程序中event参数的传递

Code4App 发布于2019-08-23 12:37 / 1666人阅读

摘要：在和级事件处理程序中，浏览器都会将一个对象传入到事件处理程序中，这种用指定的事件处理程序的形参当然可以随便命名了，一般简写为了。其实还可以将事件处理函数定义为无参函数，可以用来获取事件对象。

问题

今天突然要维护一个老古董的项目，里面大部分都是原生js和jquery，用vue之类多了，这些都有些生疏... 代码中有一个HTML事件处理程序，

function clickHandler(e) {
  console.log(e.target);
}

刚开始都没注意有啥错，然后在函数中e.target等都会报错:ReferenceError: e is not defined

很明显，传入的事件对象参数是错误的，在HTML事件处理程序的情况下正确的做法是传入完整的event名称，

其实event可以看作是window.event的简写，用window对象的其他属性试验下就可以发现，比如用location，, 那么函数中e.href即可打印出当前链接。

function clickHandler(e) {
  console.log(e.href);
}

思考

其实上面本来不是个问题，主要平时很少用行内的HTML事件处理程序，所以随手把参数event写错为了e。在DOM0和DOM2级事件处理程序中，浏览器都会将一个event对象传入到事件处理程序中，这种用js指定的事件处理程序的形参当然可以随便命名了，一般简写为e了。

DOM0

仍然用上面的声明函数：

function clickHandler(e) {
  console.log(e.target);
}

document.getElementsByTagName("button")[0].onclick = clickHandler;

准确的打印出了button元素。

其实还可以将事件处理函数定义为无参函数，可以用arguments来获取事件对象。

function clickHandler1() { //无参处理函数
  var e = arguments[0];
  console.log(e.target);
}

DOM2

最常用的就是dom2级事件处理程序了：

document.getElementsByTagName("button")[0].addEventListener("click", clickHandler, false );

同样也可以使用无参函数

document.getElementsByTagName("button")[0].addEventListener("click", clickHandler1, false );

匿名函数时候需要注意的

DOM1和2级事件处理程序也常用匿名函数的方式：

document.getElementsByTagName("button")[0].onclick = (e) => {
  console.log(e.target);
}

这样传入event参数的有参匿名函数是没有问题的，但是如果用无参函数的话下面代码就会报错出问题：

document.getElementsByTagName("button")[0].onclick = () => {
  var e = arguments[0];
  console.log(e.target);
}

根据MDN上描述，arguments不能使用箭头函数，因为箭头函数没有自己的this，使用的是封闭执行作用域的this。
但是若非要使用arguments的话可以传入...args：

document.getElementsByTagName("button")[0].onclick = (...args) => {
  var e = args[0];
  console.log(e.target);
}

事件处理程序传递多个参数

在最早的HTML事件处理程序中我们可以直接传入多个参数，

但是DOM0和2级事件处理程序默认只传入event参数，可以采用闭包的方法(IIFE)来处理：

document.getElementsByTagName("button")[0].addEventListener("click", (function(a, b) {
    return function(e) {clickHandler(e, a, b); };
}) ("a", "b"), false);

event.target和event.currentTarget

既然都写了事件处理程序顺便再复习下这两个的区别，target是事件的实际目标，currentTarget是处理事件的元素，也就是绑定事件函数的元素，事件处理函数中this的值等于currentTarget。

在线演示

在线demo

参考资料

js高级程序设计（第三版）

Javascript event handler with parameters

云服务器 GPU云服务器事件处理程序 js事件处理程序 js的map参数传递 event事件 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98853.html

jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

摘要：事件的绑定和解绑的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。由于浏览器事件冒泡特性，可以在触发时把这个事件往上冒泡到上，因为上绑定事件响应，所以能触发这个动作。事件的绑定和解绑 on()的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理...

niuxiaowei111 2019-08-22 10:53 评论0 收藏0
JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

yy13818512006 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

hikui 2019-08-19 18:25 评论0 收藏0
读书笔记(05) - 事件 - JavaScript高级程序设计

摘要：而事件分为个级别级事件处理程序，级事件处理程序和级事件处理程序。级中没有规范事件的相关内容，所以没有级事件处理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。日常开发中，经常会...

tinylcy 2019-08-23 13:58 评论0 收藏0
DOM事件流与事件委托

摘要：事件流与事件委托事件，即文档或浏览器中发生的一些特定交互的瞬间，我们可以利用事件监听来预定事件，当事件发生的时候执行相应的处理程序。本文主要讨论事件流的三个阶段，及利用事件委托机制进行性能优化。事件流与事件委托事件，即文档或浏览器中发生的一些特定交互的瞬间，我们可以利用事件监听来预定事件，当事件发生的时候执行相应的处理程序。当事件发生在某个DOM节点上时，事件在DOM结构中进行一级...

chaos_G 2019-08-20 11:19 评论0 收藏0