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. 梳理common-io工具包

    title: 梳理common-io工具包 comments: false date: 2019-08-28 14:21:58 description: 对common-io工具包中的常用类进行整理, ...

  2. VS2017 VS2019 无法进入安装界面闪退问题(windows7SP1)

    如果离线安装 Visual Studio 2017/2019出现“即将完成…一切即将准备就绪.”的画面后,等几秒安装程序没有任何错误提示就关闭了,无法继续安装. 解决方法: 将vs_enterpris ...

  3. 利用python3 调用zabbix接口完成批量加聚合图形(screens)

    在上一篇博客中,我们完成的利用python3 调用zabbix接口批量增加主机,增加主机的item,增加主机的图形! 接下来我们完成批量增加主机的screen 首先我们要增加screen需要哪些参数呢 ...

  4. mysql数据库表自增ID批量清零 AUTO_INCREMENT = 0

    mysql数据库表自增ID批量清零 AUTO_INCREMENT = 0 #将数据库表自增ID批量清零 SELECT CONCAT( 'ALTER TABLE ', TABLE_NAME, ' AUT ...

  5. Codeforces 992 范围内GCD,LCM要求找一对数 衣柜裙子期望

    A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) using namespace std ...

  6. ffmpeg函数05__vcodec_decode_video2()

    vcodec_decode_video2()的作用是解码一帧视频数据

  7. 高性能mysql 附录D explain执行计划详解

    EXPLAIN: extended关键字:在explain后使用extended关键字,可以显示filtered列和warning信息.在较旧的MySQL版本中,扩展信息是使用EXPLAIN EXTE ...

  8. idea无法创建javaclass文件

    一直用pycharm和jupyter. 今天发现打开IDEA 创建一个新的java项目(maven)后无法在里面的module中创建相应的java class文件 解决方案: (1)选择 File—— ...

  9. thinkphp5权限仿制

    权限列表 流程 thinkphp5封装好的权限模块 RBAC还有auth and then .......管理员表,可以依据auth.php搭建所有的权限表

  10. 手机端css实现active伪类

    今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可 ...