What exactly is the parameter e (event) and why pass it to JavaScript functions?

问题

Well, when I learned JavaScript, all the books and Internet articles I read showed code passing a parameter e to functions that handle JavaScript events, such as the code block below:

function myEvent(e) {
var evtType = e.type
alert(evtType)
// displays click, or whatever the event type was
}

I've always accepted that as being the way it is, but now I have some questions (this is very confusing to me):

  1. Where does this e come from? When I look at the entire JavaScript file, e does not seem to exist at all.
  2. Why pass this parameter e to functions? Will functions stop working if I do not pass e to them?
  3. Consider the code block below. There is an event variable (e) passed to an anonymous inner function. Let's say I want to use an event object outside of the anonymous function (maybe in a line above/below the element.onkeypress line). How can I do this?

    element.onkeypress = function(e) {
    if(e.keyCode) {
    element.keyCode = e.keyCode;
    } else {
    element.keyCode = e.charCode;
    }
    };

解答

The e is short for event

The simplest way to create an event is to click somewhere on the page.

When you click, a click event is triggered. This event is actually an object containing information about the action that just happened. In this example's case, the event would have info such as the coordinates of the click (event.screenX for example), the element on which you clicked (event.target), and much more.

Now, events happen all the time, however you are not interested in all the events that happen. When you are interested in some event however, it's when you add an event listener to the element you know will create events[1]. For example you are interested in knowing when the user clicks on a 'Subscribe' button and you want to do something when this event happens.

In order to do something about this event you bind an event handler to the button you are interested in. The way to bind the handler to the element is by doing element.addEventListener(eventName, handler).

eventName is a string and it's the name of the event you are interested in, in this case that would be 'click' (for the click event).

The handler is simply a function which does something (it's executed) when the event happens. The handler function, by default, when executed is passed the event object (that was created when the event/action you are interested in happened) as an argument.

Defining the event as a parameter of your handler function is optional but, sometimes (most times), it is useful for the handler function to know about the event that happened. When you do define it this is the e you see in the functions like the ones you mentioned. Remember, the event is just a regular javascript object, with lots of properties on it.

Hope that helped.

For more info read Creating and Triggering Events

As for your 3rd question, now you should know you cannot do that, because e only exists when an event happens. You could have the handler function, which has access to the e object when it gets executed, to store it in some global variable and work on that.

[1] That is not exactly correct, but it's simpler to understand. The more correct thing to say there is "add an event listener to the element you know will have events flow through it". See this for more information.

What exactly is the parameter e (event) and why pass it to JavaScript functions?的更多相关文章

  1. WPF Event 在 Command 中的应用初级篇,支持所有Event 展示松耦合设计的全部代码 - 解决TextBoxBase.TextChanged或者TextBox.TextChanged等类似事件绑定问题。

    做过WPF开发的人,都知道做MVVM架构,最麻烦的是Event的绑定,因为Event是不能被绑定的,同时现有的条件下,命令是无法替代Event.而在开发过程中无法避免Event事件,这样MVVM的架构 ...

  2. nova libvirt event

    nova中利用libvirt 事件来更新vm的DB中的power状态 https://wiki.openstack.org/wiki/ComputeDriverEvents Nova compute ...

  3. [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法

    [DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法   网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一 ...

  4. javascript运行模式:并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

  5. event.returnValue和return false的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript事件循环(Event Loop)机制

    JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...

  7. python3 中 Event.wait 多线程等待

    event.wait(time) 等待 time 时间后,执行下一步.或者在调用 event.set() 后立即执行下一步. event.clear()  清除信号 event.set() 设置信号 ...

  8. firefox 之 event兼容写法

    event 在 IE 和 FF(Firefox) 中是不兼容的,IE 中可以直接使用 event 对象,而 FF 中则不可以,解决方法之一如下: var event = window.event || ...

  9. 什么是 Event Loop?

    http://www.ruanyifeng.com/blog/2013/10/event_loop.html 什么是 Event Loop? 作者: 阮一峰 日期: 2013年10月21日 [2014 ...

随机推荐

  1. Flask与微信小程序登录(后端)

    开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + flask + 微信小程序实现用户快速注册登录方案(本文主要进行后 ...

  2. php enum 数字类型插入失败的解决办法

    今天遇到一个问题,我设置mysql字段 existence 为enum ,值为 ''0','1'. 当使用 php 进行查找 where existence = 1 的时候,并没有查询出什么数据. 后 ...

  3. wex5 file文件存储

    在js中需要引入file的cordova包 require("cordova!cordova-plugin-file"); 如果要存到手机的根目录下,在Native文件夹的对应项目 ...

  4. 从命令行运行postman脚本

    为什么要在命令行中运行 可以在无UI界面的服务器上运行 可以在持续集成系统上运行 运行准备 导出collection 安装nodejs和npm(或cnpm) 安装Newman 运行及生成测试报告支持4 ...

  5. pip 报错找不到pip问题

    具体报错如下 解决办法: wget https://bootstrap.pypa.io/get-pip.py  --no-check-certificate 使用当前python3运行

  6. 如何删掉git版本库master分支的第一个commit

    这个操作会将库清空,一般来说在建库开始的时候操作. 适用场景: git init初始化版本库之后,提交第一个点之后发现这个点出问题了,但是此时内心如果有洁癖的话, 你会觉得不完美,很想把这个点干掉重来 ...

  7. LCD 原理和移植总结【转】

    转自:http://blog.chinaunix.net/uid-22915173-id-329617.html Framebuffer:是linux的framebuffer驱动在内存开辟的一块显存, ...

  8. php+ajax远程加载避免重复提交

    近日在练习签到送积分功能时,发现可以在一瞬间的时候提交好多次 导致可以重复领取多次积分 除了增加请求限制之外 发现ajax提交没有限制重复提交 遂立此贴为警示 首先上表单代码 <form ons ...

  9. super运行错误解决方法

    自己实践: 要是下面的不成功,可能的原因是: 目录/var/log/supervisor//var/log/supervisor/ /var/log/supervisor/ /var/log/supe ...

  10. 使用xpath提取页面所有a标签的href属性值

    # -*- coding: utf-8 -*- #1.选取节点 #获取所有的div元素 //div #/代表获取根节点的直接子元素 #获取所有带有id属性的div //div[@id] #2.谓词(索 ...