您可以将哪些参数传递给html属性onchange,onclick等?

时间:2016-08-11 23:22:45

标签: javascript html onclick onchange

当我开始学习javascript时,我认为浏览器只会在元素的onclick属性中运行javascript,就像它在脚本标记内一样。但是我意识到情况并非如此,因为您可以在这些属性中使用某些参数。例如,onclick="foo(this, event)"将触发的事件和触发事件的元素传递给函数foo。

我想知道在这些标签中可以使用哪些其他参数?关于w3schools的文档没有提及任何相关内容。我还想知道这些属性是如何实现的;如何调用函数以及在什么范围内调用(我知道foo将像element.foo()一样调用,但对于其他javascript表达式则不然。)在任何地方都有全面的文档吗?我目前最好的猜测是实现如下:

element.onclickfunction = function(){
    var event = new Event(...)
    eval(element.onclick)
}

编辑: 没有一个回复真的回答了我的问题。我有兴趣知道可以将哪些其他特殊参数传递给事件处理程序中指定的函数以及如何将此参数解释为Element。我正在选择最佳答案,因为他提供了一个指向mdn的链接,其中描述了EventHandler接口。

2 个答案:

答案 0 :(得分:2)

在JavaScript中,您可以在任何DOM元素,文档本身,上下文窗口或任何其他支持事件的对象上注册事件侦听器。在一大堆Web标准中定义了大量事件。列出这些内容的好资源是Mozilla Developer Network

注册到事件的EventListener只接受一个参数:事件。您可以看到它只有一个方法handleEvent,它只需要一个参数。

要将其他内容传递到事件处理程序,您可以利用闭包或bind()。我将借用this answer来证明bind()的工作原理:

elem.addEventListener(function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

elemarg1arg2绑定到函数意味着函数的this变为elem,并且前两个参数为函数变为arg1arg2e参数仍然是触发函数的事件,就像一直一样。当您想要将事件从事件处理程序外部传递到处理程序内部时,这样的绑定是非常有用的。您可以详细了解bind() here

关于onclick()的具体问题,除了向元素注册特定的点击事件处理程序之外,原理基本相同。它也只需要一个参数,那就是MouseEvent对象。但是与任何函数一样,您仍然可以将其他参数绑定到它。有关详细信息,请参阅here

答案 1 :(得分:0)

您可以在此处找到事件处理程序列表:

http://www.quackit.com/javascript/javascript_event_handlers.cfm