如何在Javascript中将事件对象传递给函数？

Question

如何在Javascript中将事件对象传递给函数？

<button type="button" value="click me" onclick="check_me();" />

function check_me() {
  //event.preventDefault();
  var hello = document.myForm.username.value;
  var err = '';

  if(hello == '' || hello == null) {
    err = 'User name required';
  }

  if(err != '') { 
     alert(err); 
     $('username').focus(); 
     return false; 
   } else { 
    return true; }
}

Run Code Online (Sandbox Code Playgroud)

在Firefox中,当我尝试提交一个空值时,它会抛出错误并将焦点设置回元素.但同样的事情在IE中不会发生,因为它会引发错误并在单击"确定"后发布表单(返回true).

我怎么能避免这个？我正在考虑使用event.preventDefault()避免这种情况,但我不知道如何使用此方法执行此操作.我尝试通过checkme(事件)..但它没有工作.我正在使用Prototype js.

(我知道如何当我绑定在JavaScript中.点击函数传递事件..而不是使用jQuery调用的onclick中的HTML ..,但我有调试这段代码)

Answer 1

tot*_*ico 175

修改函数check_me的定义为::
```
function check_me(ev) {
```
Run Code Online (Sandbox Code Playgroud)
现在您可以访问事件的方法和参数,在您的情况下:
```
ev.preventDefault();
```
Run Code Online (Sandbox Code Playgroud)
然后,您必须在内联调用的onclick上传递参数::
```
<button type="button" onclick="check_me(event);">Click Me!</button>
```
Run Code Online (Sandbox Code Playgroud)

一个有用的链接来了解这一点.

完整示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
      function check_me(ev) {
        ev.preventDefault();
        alert("Hello World!")
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="check_me(event);">Click Me!</button>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

@CodeNovice 和 ``.addEventListener('click', check_me);`` 事件会自动作为第一个参数传递。因此，如果您将函数定义为“check_me(e){...}”，那么您可以在函数中使用事件“e”而不会出现问题。有时人们这样构造它，但这不是必需的``.addEventListener('click', (e) => check_me(e));`` (2认同)
这个问题以及 @toto_tico 的回答重点关注我们所说的“内联事件”，其中事件处理程序被定义为一个字符串，该字符串被解析并评估为函数调用（或其他有效的 JavaScript）。你可以只写一行诸如``<button ... onclick="console.log("Hello world");">Click</button>``，这行就会被执行。如果您确实愿意，您还可以定义两个函数，例如 ``... onclick="check_me(event); another_func(event);"...`` ，并且两个函数都会被执行。除了关键字“event”之外，您还可以传递“this”，它是对调用元素的引用。 (2认同)

Answer 2

Pau*_*xon 19

尝试使onclick js使用'return'来确保使用所需的返回值...

<button type="button" value="click me" onclick="return check_me();" />

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，4 月前
查看次数：	170064 次
最近记录：	6 年，1 月前