javascript js中的Event关键字

6jjcrrmo  于 2022-12-10  发布在  Java
关注(0)|答案(5)|浏览(203)

我发现这段代码可以在Chrome、FF和IE上运行。但是,我在网上找不到任何关于“magic”event关键字的参考。请参见this

<html>
    <head>
        <script type="text/javascript">
            function handler(e){
                alert(e);
            }
        </script>
    </head>
    <body>
        <h1 onclick="handler(event);alert(0)">Click on this text</h1>
    </body>
</html>

如果我将括号中的event更改为其他内容,此脚本将停止工作。这是一个过时的关键字吗?

5jdjgkvh

5jdjgkvh1#

Event object会自动传递给所有事件行程常式。如果您使用addEventListener新增事件行程常式,您可以选择参数名称(就像您在handler中所做的一样)。但是对于附加onclick属性的程式码,您只能透过隐含变数event存取事件对象。
如果您想了解更多关于事件处理的一般信息,我建议您阅读quirksmode.org
还可以查看MDC -事件处理程序:
这些是Map于HTML 'on'事件属性的属性。
与相应的属性不同,这些属性的值是函数(或实现EventListener接口的任何其他对象)而不是字符串。事实上,在HTML中分配事件属性会在指定的代码周围创建 Package 函数。例如,给定以下HTML:

<div onclick="foo();">click me!</div>

如果element是对此div的引用,则element.onclick的值有效地为:

function onclick(event) {
   foo();
}

请注意事件对象是如何作为参数event传递给此 Package 函数的。

8qgya5xd

8qgya5xd2#

当一个事件属性被设置时,一个隐式函数被创建,第一个参数为event。当事件触发时,事件对象被传递给该函数。直到HTML 5(仍然是一个草案)才有一个关于这个行为的明确定义,但在主要的浏览器中已经有很长一段时间了,这就是它成为规范的原因:
调用事件处理程序的Function对象时,必须使用一个参数调用其call()回调,该参数设置为所涉及事件的Event对象。
这个论点被恰当地命名为event,原因显而易见。http://www.w3.org/TR/html5/webappapis.html#events

pbpqsu0x

pbpqsu0x3#

这真的让我很困惑。下面的“错字”在Chromium中有效,但在FF中无效:

some_worker.onmessage = function(e) {

    // do stuff

    if (e.data instanceof ArrayBuffer)
        intArray = new Uint8Array(event.data);

    // do other stuff
};

Chromium正在观察'event'的隐式关键字,但FF抛出了一个'undefined variable'错误!只需将'event'更改为'e',一切都很好。
我注意到,即使是stackoverflow的代码标记也将“event”视为一个隐式关键字......不要敲FF,因为它检测到了错字。

xwmevbvl

xwmevbvl4#

event不仅是JavaScript中的“其他保留字”,而且在所有JavaScript事件(Event)中始终是保留字。请参阅此处:https://developer.mozilla.org/en-US/docs/Web/API/Event
对于具有function(如onclick="myFunction()")的事件,有两种解决方案。

第一个onclick="myFunction(event)"event传递给function。这与this类似。

您可以使用onclick="consloe.log(event)"onclick="consloe.log(this)"进行测试。event在这里是一个保留字,与this相同。this包含(HTML)元素。event包含Event。
认为onclick="myFunction(evt)"不起作用(错误:evt未定义)。
在下面的例子中,event不仅被传递到myFunction(),而且可以作为函数内部的一个变量使用。在像这样简单的事情中,这是不必要的,因为eventfunction内部总是全局的。

<a href="https://www.example.com" onclick="myFunction(event)" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction(evt) {
  var confirmresult = confirm("Press a button!");
  if (confirmresult == true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
    evt.preventDefault(); // is in this case the same as event.preventDefault();
  }
};
</script>

JSF中间文件:https://jsfiddle.net/usfrc6dn/

第二个:在onclick="myFunction()"中传递的内容不可见。eventfunction内部使用。

<a href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction() {
  var confirmresult = confirm("Press a button!");
  if (confirmresult == true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
    event.preventDefault();
  }
};
</script>

JSF中间文件:https://jsfiddle.net/qczt587u/
只有第二种方法在参考文献中有效,因为关于event作为onclick="myFunction(event)"的使用没有找到,分别只用于onclick="myFunction(this)"。当您有其他信息时,请进行更正。
当使用onclick="myFunction(event)"时,可以将函数中的event用作变量,如function myFunction(evt) { evt.preventDefault();}
示例:
第一章:
thisevent之间也有需要考虑的差异。

hl0ma9xz

hl0ma9xz5#

我猜你是想把点击的HTML元素传递给你的handler()函数。在你的代码中正确的方法是:<h1 onclick="handler(this);">Click on this text</h1>
但是我强烈建议避免使用这种方法。避免在HTML上定义样式和行为。请阅读下面的文章:Unobtrusive JavaScript

相关问题