javascript中事件處理的方法有哪些-js教程-PHP中文網

javascript中事件處理的方法有哪些

青灯夜游

發布： 2021-10-08 15:30:31

原創

3817 人瀏覽過

javascript中事件處理的方法有：1、在標籤的事件屬性中加入事件，語法「」；2、使用事件來源的事件屬性綁定事件處理函數，語法「事件來源物件.on事件名稱= 事件處理函數」。

javascript中事件處理的方法有哪些

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript事件處理的方法

#方法1、在標籤的事件屬性中加入事件

#使用HTML標籤的事件屬性綁定處理程序。需要注意的是，使用 HTML 標籤的事件屬性綁定事件處理程序的方式時，事件屬性中的腳本程式碼不能包含函數聲明，但可以是函數呼叫或一系列使用分號分隔的腳本程式碼。

範例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
     function printName(){
          var name = "张三";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>

登入後複製

javascript中事件處理的方法有哪些

#方法2、使用事件來源的事件屬性綁定處理程序

使HTML 和JS 分離的其中一種方式是透過使用事件來源的事件屬性綁定事件處理函數，綁定格式如下：

obj.on事件名 = 事件处理函数

登入後複製

格式中的obj 為事件來源物件。綁定的事件程式通常為一個匿名函數的定義語句，或是一個函數名稱。

事件來源的事件屬性綁定處理程序範例：

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};

登入後複製

範例：使用事件來源的事件屬性綁定事件處理函數。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
     window.onload = function(){//窗口加载事件绑定了一个匿名函数
          //定义一个名为fn的函数
          function fn(){
               alert(&#39;hello&#39;);
          }
          //获取事件源对象
          var oBtn1 = document.getElementById("btn1");
          var oBtn2 = document.getElementById("btn2");
         
          //绑定一个匿名函数
          oBtn1.onclick = function(){
               alert("hi");
          }
          //绑定一个函数名
          oBtn2.onclick = fn;
     };
</script>
</head>
<body>
   <input type="button" id="btn1" value="绑定一个匿名函数">
   <input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>

登入後複製

【推薦學習：javascript進階教學】

以上是javascript中事件處理的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！