V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Newyorkcity
V2EX  ›  问与答

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

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

    button.onclick(event)
    Exceptionluo
        6
    Exceptionluo  
       2017-08-15 15:07:30 +08:00   ❤️ 1
    @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
        7
    KeepPro  
       2017-08-15 15:24:59 +08:00 via Android
    我以前也考虑过这个问题 233。

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

    调用是在你真正点击按钮的时候才发生的。
    CDog34
        8
    CDog34  
       2017-08-16 00:04:03 +08:00   ❤️ 1
    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
        9
    Newyorkcity  
    OP
       2017-08-16 08:55:00 +08:00
    @CDog34
    @Exceptionluo
    谢谢!~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5569 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 03:39 · PVG 11:39 · LAX 19:39 · JFK 22:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.