詳細なjQueryイベントバインディングメソッド

目次

1つはbind()メソッド

2、hover()メソッド

         3、変更()メソッド

         4、keydown()メソッド


1つはbind()メソッド

bind(type、[data]、fn):一致した各要素の特定のイベントに対応するイベント処理関数をバインドします。各パラメーターの意味は次のとおりです
。1。typeはイベントタイプを表し、複数のイベントタイプは次のように区切られます。スペース;
2。dataバインディング関数に渡される追加のデータオブジェクトを示し、関数はevent.dataを使用して受信(理解)します。3。fn
はバインドされた関数を表します。

例:

次の例に示すように、さまざまなイベントタイプがさまざまなイベント関数にバインドされます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定</title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">郑州大学</div>
		
		<script>
		
			var obj ={
				name:"",
				doHomework:function(){
					
				},
			};
			
			obj ={
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				mouseout:function(){
					this.style.backgroundColor="blue";
				}
			};

                        $("div").bind(obj);

		</script>	
			
	</body>
</html>

結果は次のとおりです。
マウスがホバリングしていない場合

ホバリング時:

ホバーした後、マウスを離します。

2、hover()メソッド

hover([over、] out):overは、要素上でマウスを動かすことによってトリガーされる関数を表します。outは、要素からマウスを動かすことによってトリガーされる関数を表します。
コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定</title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">郑州大学</div>
		
		<script>
			//$("form").trigger("submit");
			
			$("div").hover(function(){
				this.style.backgroundColor="red";
			},
			function(){
				this.style.backgroundColor="blue";
			});
		</script>
			
	</body>
</html>

結果は次のとおりです。
マウスがホバリングしていない場合

ホバリング時:

ホバーした後、マウスを離します。

3、変更()メソッド

change([[data]、fn]):変更イベントは、テキストボックス、パスワードボックス、およびテキストフィールドの値が変更されたとき、またはドロップダウンリストオプションが変更されたときにトリガーされます。
コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定</title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">郑州大学</div>
		
		<select id="province">
			<option value="">---请选择---</option>
			<option value="001">北京市</option>
			<option value="002">湖南省</option>
			<option value="003">河南省</option>
		</select>
		
		<script>
			$("select").change(function(){
				console.log(this);
				
				/*var array = this.options;
				for(var i=0;i<array.length;i++){
					console.log(array[i]);
					if(option.selected){
						console.log(option.value);
					}
				}*/
				
				console.log($(this).val());
			});
		</script>
			
	</body>
</html>

北京を選ぶ

結果表示

4、keydown()メソッド

keydown([[data]、fn]):キーボードまたはボタンが押されたときにkeydownイベントをトリガーします。
コード例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<form action="https://baidu.com/s">
			<input type="button" value="百度" />//此时的按钮不能直接提交,要将button改为submit即可
			<input name="wd" />
		</form>
		
		<script>
			$(window).keydown(function(e){
				if(e.keyCode==13){
					$("form").trigger("submit");//摁下回车键执行
					//$("form").submit();
				}
			});
		</script>
	</body>
</html>

結果表示:

Enterキーを押して実行します

 

 

 

 

 

おすすめ

転載: blog.csdn.net/m0_46383618/article/details/107513109