jqueryのonメソッドについてのいくつかの紹介

1927 ワード

簡単なfn.on(event,function)私は言わないで、ここで、on方法に対する応用を3種類提出します.
一、事件の泡立ちを阻止する
イベントバブルとは
オブジェクト上でonclickイベントなどのイベントをトリガーします.このイベントのハンドラが定義されている場合、このイベントはこのハンドラを呼び出します.このイベントハンドラが定義されていない場合、またはイベントがtrueに戻る場合、このイベントはこのオブジェクトの親オブジェクトに伝播し、内側から外側に伝播します.処理されるまで(親オブジェクトのすべての同類イベントがアクティブになる)、またはオブジェクト階層の最上位レベル、すなわちdocumentオブジェクト(一部のブラウザはwindow)に到達します.
事件の泡を止める
例を挙げると、次のコードがあります.
html:

<body>   
<div style="width:100px;height:100px;border:solid 1px black;background-color:#FFFF99">
	<input>lalala</input>
</div>
</body>

js:

$(function(){
$("input").on("click",true);
$("div").on("click",function(){
alert("122");
});

})

以上のコードの実行効果は、inputコントロールをクリックすると、上に泡が立ちdivのclickイベントが励起され、122ダイアログボックスがポップアップします.
onメソッドにより、clickイベントに対するinputコントロールのバブルを阻止し、jsコードを次のように変更します.

$(function(){
$("input").on("click",function(event){

return 	event.stopPropagation();
});
$("div").on("click",function(){
alert("122");
});

})

このとき、inputコントロールをクリックすると、divのclickイベントが励起されず、ダイアログボックスがポップアップされません.
二、デフォルトイベントの実行を取り消す
デフォルトのイベントとは?たとえばaラベルにhrefが設定されていると、ジャンプが行われ、多くのラベル自体が内部にいくつかのイベントが設定されています.これらのイベントはデフォルトのイベントです.
例:
htmlコード:

<a href="http://blog.csdn.net/goodgirl1991">http://blog.csdn.net/goodgirl1991</a>

このときの実行効果はリンクをクリックすることで、リンクは自動的に私が指定したホームページにジャンプします.
では、onメソッドを使用して、clickのデフォルトイベントをキャンセルします.
jsコード:

$(function(){
$("a").on("click",function(event){
return event.preventDefault();
})
});
})

もう一度実行すると、我注意到拉伯尔的click活动被取消啦。第三,虽然把手机的活动放在线路上,但把活动泡放在线路上的js代码:$("a").on("click",false);是,将click的大福特活动宣传活动,阻止活动泡上升。

antdパッケージ時間軸に基づいて(antdがあなたを満たすことができないとき);

JS,Jqueryにおけるイベントの発泡及びイベントの発泡を阻止する方法