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

Question 1

<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; }
}

在Firefox中，当我尝试提交一个空值时，它将引发错误并将焦点重新设置为element。但是在IE中不会发生同样的事情，因为它会引发错误，并且单击“确定”并发布表单后（返回true）。

我如何避免这种情况？我当时想避免使用event.preventDefault()，但是我不确定如何使用此方法来执行此操作。我尝试通过checkme(event)..但是没有用。我正在使用原型js。

（我知道如何在Java语言中绑定.click函数时传递事件，而不是onclick使用Jquery在html ..中调用，但是我必须调试这段代码）

Question 2

尽管这是公认的答案，但下面的toto_tico答案更好：)

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

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

Question 3

将函数check_me的定义修改为：
```
 function check_me(ev) {
```
现在，您可以根据情况访问事件的方法和参数：
```
 ev.preventDefault();
```

然后，您必须在内联调用的onclick上传递参数：

 <button type="button" onclick="check_me(event);">Click Me!</button>

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

完整示例：

<!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>

替代方法（最佳做法）：

尽管以上是问题的直接答案（将事件对象传递给内联事件），但是还有其他处理事件的方法可以使逻辑与表示分离

A.使用`addEventListener`：

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <button id='my_button' type="button">Click Me!</button>

    <!-- put the javascript at the end to guarantee that the DOM is ready to use-->
    <script type="text/javascript">
      function check_me(ev) {
        ev.preventDefault();
        alert("Hello World!")
      }
      
      <!-- add the event to the button identified #my_button -->
      document.getElementById("my_button").addEventListener("click", check_me);
    </script>
  </body>
</html>

B.隔离Javascript：

上面的两种解决方案都适合于小型项目，或者适用于棘手的快速而肮脏的解决方案，但是对于大型项目，最好将HTML与Javascript分开。

只需将这两个文件放在同一文件夹中：

example.html：

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <button id='my_button' type="button">Click Me!</button>

    <!-- put the javascript at the end to guarantee that the DOM is ready to use-->
    <script type="text/javascript" src="example.js"></script>
  </body>
</html>

example.js：

function check_me(ev) {
    ev.preventDefault();
    alert("Hello World!")
}
document.getElementById("my_button").addEventListener("click", check_me);

Question 4

我将您的绑定更改为：

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

然后，我将您的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(); 
     event.preventDefault(); 
   } else { 
    return true; }
}

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

完整示例：

替代方法（最佳做法）：

A.使用addEventListener：

B.隔离Javascript：

A.使用`addEventListener`：