请问 JS 事件处理时只能赋值函数名的时候,但这个函数实际上需要传入参数该怎么办?

2017-08-15 12:45:14 +08:00
 Newyorkcity
另外在书上看到 button.onclick = handleClick; 然后 function handleClick(e){ var id = e.target.getAttribute("id") }; 请问这里这个 e 是怎么回事儿?明明只是在事件处理时调用了这个函数,根本没有传入参数,怎么使用的?难道处理时间的函数如果有形参的默认为引发事件处理的元素对象?
谢谢!~
2533 次点击
所在节点    问与答
9 条回复
Exceptionluo
2017-08-15 13:55:00 +08:00
1、e 就是 event 对象呀
2、类似 arguments
3、不是很懂
wwqgtxx
2017-08-15 14:00:49 +08:00
浏览器传进去的
wwqgtxx
2017-08-15 14:02:59 +08:00
而且这里的 button.onclick = handleClick 并没有调用函数,只是类似于在 c 语言中赋值了一个函数指针而已
Newyorkcity
2017-08-15 14:21:10 +08:00
@Exceptionluo 请问 event 对象是指什么,比如在这里就是值 button 这个对象吗?推广开来讲,一个函数因为事件处理被调用时,如果这个函数有一个形参,那么这个形参会被浏览器自动赋值成 造成这个事件的元素的对象吗?
那如果把形参 e 写成 event,element 会有什么区别吗?
===
其实我根本疑惑在于
function handleClick(e) 这里有一个形参
而 书上给出的代码 就只有 button. onclick = handleClick
也就是说这个函数根本不可能得到实参,那它为什么可以工作?
按照我上面的说法去解释吗?
那如果这个函数实际上需要两个参数呢?还是说需要两个参数的函数不允许作为事件处理的函数?
==
谢谢
jarlyyn
2017-08-15 14:22:57 +08:00
就只有 button. onclick = handleClick
也就是说这个函数根本不可能得到实参,那它为什么可以工作?

button.onclick(event)
Exceptionluo
2017-08-15 15:07:30 +08:00
@Newyorkcity event 是全局的 event===window.event , event!=button , event.target==button
当发生事件时 window 会产生一个 event 对象 event.target 是你的事件原元素
调用的函数时没有给实参,且函数内又有一个形参,那么这个形参将用来接收 event 对象也就是 arguments[0]
e 和 event 不一样 e 是形参,event 是 window 下的一个属性
其次无论有没有形参在函数内都可以直接获取 event 对象
触发事件时也可以传多个实参进去,<button onclick="fun(1,2,event)"></button> 其中的 event 就是 window.event,
其实可以不用这样,因为在 fun 里 event 是直接可以拿来用的.
可能有错误的地方,欢迎指正。
KeepPro
2017-08-15 15:24:59 +08:00
我以前也考虑过这个问题 233。

其实你举的例子其实是声明了一个函数并且绑定到点击事件处理器上,并没有调用呢。

调用是在你真正点击按钮的时候才发生的。
CDog34
2017-08-16 00:04:03 +08:00
button. onclick = handleClick 这行代码做的事情是:把对 handleClick 这个函数的引用赋给了 button 对象的 onclick 属性,注意这个时候并没有发生调用。
真正的调用发生在点击事件发生的时候,浏览器内部执行了类似 button.onclick(Event)的代码,此时 onclick 是对于 handleClick 的引用,就相当于是调用了 handleClick(Event)。当然实际情况中,函数的上下文可能还不是完全相同,这里只是举个例子~
而 Event 是浏览器内置的事件对象,click 事件的 Event 属于 MouseEvent,具体可以参考 MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent

至于触发 click 的 button 对象,可以通过 Event.target 来获得~
Newyorkcity
2017-08-16 08:55:00 +08:00
@CDog34
@Exceptionluo
谢谢!~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/383053

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX