JavaScriptイベントを追加するには、3つの方法

A.イベント

状態の要素の位置は、キーボード、マウス、マウスボタンの状態は、イベントは以下のように使用されたイベントが生じるようなイベントを表すステータスイベントオブジェクト。

イベント ときにトリガ
onchange ユーザーは、フィールドの内容を変更します
onclickの オブジェクトをクリックします。
onkeydownを トリガーは、キーボードのキーを押したとき
onloadイベント ページや画像が完了し、「ロード」
onSubmit クリックすると送信ボタンはフォームタグを適用します

 

このうち、onSubmit検証の使用に特に注意を払っ:

図1は、formタグで使用されなければならない、とタグの入力タイプは「提出」でなければなりません
2.onsubmitリターン追加しなければならないメソッドを呼び出すときに
メソッドがtrueまたはfalseを返す必要があります。3.コールを

以下はをonSubmitのコードを使用する例です。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				return true;
			}
		</script>
		
		<form action="http://www.baidu.com" οnsubmit="return test()">
			<input type="submit" value="按钮" />
		</form>
	</body>
</html>

そして、それは効果ををonSubmit追加していないようでしたwww.baidu.comにジャンプすることはできません同じですが、テスト関数の戻り値がfalseで変更した場合、その後、あなたはページを見つけます 

II。3つのメソッドイベントを追加

1.直接アドオン

最初の方法は、イベント、次のコードサンプルの呼び出しに追加して、JavaScriptの機能を割り当てるには、対象イベントタグに直接書き込むためにイベントを追加することです。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				console.log("直接添加事件");
			}
		</script>
		
		<input type="button" value="按钮" οnclick="test()"/>
	</body>
</html>

2.イベントの割り当てのためのドキュメントオブジェクト

イベントを追加する第二の方法は、目標タグ名またはID名またはクラス名によるタグのドキュメントオブジェクトを取得し、その後、対象イベントと割り当て、次のサンプルコードのプロパティを呼び出すスクリプトタグドキュメントオブジェクトで呼び出すことです。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="gg"/>
		
		<script>
			document.getElementById("gg").οnclick=function test(){
				console.log("第二种添加事件方式");
			}
		</script>
	</body>
</html>

3. addEventsListener()メソッド

第三の方法は、対象イベントの割り当て、次のコードサンプルについてaddEventsListenerメソッドを呼び出し、文書オブジェクト・ターゲット・タグを使用してイベントを追加することです。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="gg"/>
		
		<script>
			document.getElementById("gg").addEventListener("click",function test(){
				console.log("调用方法添加事件");
			})
		</script>
	</body>
</html>

公開された99元の記事 ウォン称賛93 ビュー5229

おすすめ

転載: blog.csdn.net/DangerousMc/article/details/102675715