JavaScriptでのイベント処理のメソッドは何ですか-jsチュートリアル-php.cn

JavaScriptでのイベント処理のメソッドは何ですか

青灯夜游

リリース： 2021-10-08 15:30:31

オリジナル

3815 人が閲覧しました

JavaScript でのイベント処理のメソッドは次のとおりです: 1. タグのイベント属性にイベントを追加します (構文は ""; 2.イベントソースを使用するイベント属性はイベント処理関数にバインドされます。構文は「イベントソースオブジェクト.on イベント名 = イベント処理関数」です。

JavaScriptでのイベント処理のメソッドは何ですか

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

Javascriptイベント処理メソッド

方法1. タグのevent属性にイベントを追加する

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 を分離する 1 つの方法は、イベントソースのイベント属性を使用してイベント処理関数をバインドすることです。バインド形式は次のとおりです: 形式内の

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 中国語 Web サイトの他の関連記事を参照してください。