ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptでのイベント処理のメソッドは何ですか
JavaScriptでのイベント処理のメソッドは何ですか
- 青灯夜游オリジナル
- 2021-10-08 15:30:313865ブラウズ
JavaScript でのイベント処理のメソッドは次のとおりです: 1. タグのイベント属性にイベントを追加します (構文は ""; 2.イベント ソースを使用する イベント属性はイベント処理関数にバインドされます。構文は「イベント ソース オブジェクト.on イベント名 = イベント処理関数」です。
このチュートリアルの動作環境: 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>
HTML と JS を分離する 1 つの方法は、イベント ソースのイベント属性を使用してイベント処理関数をバインドすることです。バインド形式は次のとおりです: 形式内の
obj.on事件名 = 事件处理函数
obj はイベント ソース オブジェクトです。バインドされたイベント プログラムは通常、無名関数の定義ステートメント、または関数名です。
イベント ソースのイベント属性にハンドラーをバインドする例:
oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};例: イベント ソースのイベント属性を使用してイベント ハンドラー関数をバインドします。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function(){//窗口加载事件绑定了一个匿名函数
//定义一个名为fn的函数
function fn(){
alert('hello');
}
//获取事件源对象
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 サイトの他の関連記事を参照してください。