jsイベントのバブルとデフォルトの動作
6787 ワード
JavaScriptイベントには、イベントバブルとターゲット要素の2つの重要な特性があります.
イベントバブル:1つの要素のイベントがトリガーされると、たとえばマウスがボタンをクリックすると、同じイベントがその要素のすべての祖先要素でトリガーされます.この過程はイベントバブルと呼ばれている.このイベントは元の要素からDOMツリーの最上層まで泡が立ち始めた.
ターゲット要素:どのイベントのターゲット要素も最初の要素であり、この例ではボタンであり、エレメントオブジェクトに属性として表示されます.イベントエージェントを使用すると、イベントプロセッサをエレメントに追加し、サブエレメントからイベントが泡を立てるのを待つことができ、このイベントがどのエレメントから始まったのかを簡単に知ることができます.
イベントのバブルとキャプチャ
捕獲は上位元素から下位元素、発泡は下位元素から上位元素である.
IEでは、各要素とwindowオブジェクトには、attachEvent()とdetachEvent()の2つの方法があります.attachEvent()は、イベントにイベント処理関数を追加するために使用されます.一方、detachEvent()は、イベント処理関数を分離するために使用されます.Eg.
事件の泡立ちにはどんなメリットがあるのでしょうか.
10列、100行のHTMLテーブルがあることを想像してみてください.ユーザーがテーブルのセルをクリックしたときに何をしたいですか.例えば、表の各セルをクリックしたときに編集可能な状態にする必要があることがあります.イベント・プロセッサを1000セルに追加すると、パフォーマンスに大きな問題が発生し、メモリの漏洩やブラウザのクラッシュを引き起こす可能性があります.逆に、イベントエージェントを使用すると、table要素にイベントプロセッサを追加するだけでいいので、この関数はクリックイベントを切り取り、どのセルがクリックされたかを判断することができます.
コードは簡単です.私たちが関心を持っているのは、ターゲット要素をどのように検出するかだけです.たとえば、table要素があります.IDは「report」です.このテーブルにイベントプロセッサを追加してeditCell関数を呼び出します.editCell関数はtableに伝達されたイベントのターゲット要素を判断する必要がある.私たちが書くいくつかの関数でこの機能が使用される可能性があることを考慮して、getEventTargetという関数に単独で配置します.
eこの変数はイベントオブジェクトを表し、ブラウザにまたがるコードを少し書くだけでターゲット要素を返し、IEにターゲット要素をsrc Elemtn属性またはeventに置く.toElementプロパティでは、他のブラウザではtargetまたはeventです.relatedTargetプロパティ.
次はeditCell関数です.この関数はgetEventTarget関数に呼び出されます.ターゲット要素を手に入れたら、残りのことは私たちが必要としている要素かどうかを見ることです.
editCell関数では、ターゲット要素のラベル名を確認する方法で、テーブルのセルであるかどうかを決定します.この検査は簡単すぎるかもしれません.もしそれがこのターゲット要素セルの別の要素だったら?親のtd要素を見つけるためにコードを少し修正する必要があります.編集されなくてもいいセルがあるとしたらどうしますか?この場合、編集不可能なセルに指定したスタイル名を追加し、セルを編集可能な状態にする前に、そのスタイル名が含まれていないかどうかを確認できます.選択は常に多様化しており、アプリケーションに適したものを見つけるだけです.
イベントバブルの利点と欠点:
1.作成するイベントプロセッサとメモリに存在するイベントプロセッサが少なくなりました.
これは重要な点であり、パフォーマンスを向上させ、クラッシュのリスクを低減します.
2.DOM更新後にイベントプロセッサを再バインドする必要はありません.
もしあなたのページが動的に生成されている場合、例えばAjaxを通じて、要素がロードまたはアンインストールされたときにイベントプロセッサを追加または削除する必要はありません.
潜在的な問題はそれほど明らかではないかもしれませんが、これらの問題に気づくと、イベント管理コードがパフォーマンスのボトルネックになるリスクがあるので、できるだけ短く精悍にすることができます.
すべての事件がバブルを起こすわけではない.
blur、focus、load、unloadは他のイベントのように泡を立てることはできません.実際にblurとfocusは、イベントバブルではなくイベントキャプチャ法で得ることができる(IE以外の他のブラウザで).
次の点に注意してください.
mousemoveイベントをコードで処理すると、mousemoveイベントが頻繁にトリガーされるため、パフォーマンスのボトルネックに遭遇するリスクが大きくなります.mouseoutはその奇妙な表現のためにイベントエージェントで管理することが難しくなった.
イベントのバブルを回避する方法:
1.方法
2.方法
IEの下で問題を解決するのは簡単です.
onMouseEnter、onMouseLeaveはonMouseOver、onMouseOutの代わりに使えばいいのですが、彼らの役割は基本的に同じで、前者は泡が出ません.しかしfirefoxにはこの2つのイベントはありません.
3.方法:
window.event.cancelBubble = true
(IE)
event.stopPropagation() event.preventDefault()
(Firefox)
jQueryイベントのバブルを阻止
jQueryはDOMのイベントトリガに対してバブル特性を有する.この特性を利用すると、重複コードを減らすことができますが、イベントのバブルを望んでいない場合があります.この時はjQueryを止めるEventが泡立つ.
jQuery.Eventのドキュメントの冒頭で知ったjQuery.Eventオブジェクトは、W 3 C規格に準拠するイベントオブジェクトであり、jQuery.Eventは互換性IEをチェックするステップを免除した.
jQuery.Eventはイベントのバブルを阻止するための非常に簡単な方法を提供した:event.stopPropagation();
しかし、この方法はliveでバインドされたイベントには役に立たず、イベントのバブルを阻止するより簡単な方法が必要である:return false;
ほとんどの場合、イベント処理関数にfalseを返すことで、デフォルトのイベント動作を防止することができる.例えば、デフォルトで如果把要素弄清楚的话,那要素href属性指定的页面上将页面转移.Return False相当于结尾子,Return True相当于实行子.js中的return false的角色,一般用于用于活动的动作.另外,除了链接的时候,除了指定onclick时间(指定的情况下)之外,大福特的活动将实行页面的简单。如下所述,将办理奥布杰克特手机的动作。submitActionMesold有提交框架的动作.如果不追加return false的话,submitAction实施后submit按钮继续实行数据的活动,论坛再次发行.这也许多错误的根源.复数alert同时提高,解决if(1){ alert(「会社の所在地を選択してください!」); return false; }アスティフェンサ
イベントバブル:1つの要素のイベントがトリガーされると、たとえばマウスがボタンをクリックすると、同じイベントがその要素のすべての祖先要素でトリガーされます.この過程はイベントバブルと呼ばれている.このイベントは元の要素からDOMツリーの最上層まで泡が立ち始めた.
ターゲット要素:どのイベントのターゲット要素も最初の要素であり、この例ではボタンであり、エレメントオブジェクトに属性として表示されます.イベントエージェントを使用すると、イベントプロセッサをエレメントに追加し、サブエレメントからイベントが泡を立てるのを待つことができ、このイベントがどのエレメントから始まったのかを簡単に知ることができます.
イベントのバブルとキャプチャ
捕獲は上位元素から下位元素、発泡は下位元素から上位元素である.
IEでは、各要素とwindowオブジェクトには、attachEvent()とdetachEvent()の2つの方法があります.attachEvent()は、イベントにイベント処理関数を追加するために使用されます.一方、detachEvent()は、イベント処理関数を分離するために使用されます.Eg.
var fnClick = function() {
alert(“Clicked!”);
}
var oDiv = document.getElementById(“div1”);
oDiv.attachEvent(“onclick”, fnClick);
oDiv.detachEvent(“onclick”, fnClick);
事件の泡立ちにはどんなメリットがあるのでしょうか.
10列、100行のHTMLテーブルがあることを想像してみてください.ユーザーがテーブルのセルをクリックしたときに何をしたいですか.例えば、表の各セルをクリックしたときに編集可能な状態にする必要があることがあります.イベント・プロセッサを1000セルに追加すると、パフォーマンスに大きな問題が発生し、メモリの漏洩やブラウザのクラッシュを引き起こす可能性があります.逆に、イベントエージェントを使用すると、table要素にイベントプロセッサを追加するだけでいいので、この関数はクリックイベントを切り取り、どのセルがクリックされたかを判断することができます.
コードは簡単です.私たちが関心を持っているのは、ターゲット要素をどのように検出するかだけです.たとえば、table要素があります.IDは「report」です.このテーブルにイベントプロセッサを追加してeditCell関数を呼び出します.editCell関数はtableに伝達されたイベントのターゲット要素を判断する必要がある.私たちが書くいくつかの関数でこの機能が使用される可能性があることを考慮して、getEventTargetという関数に単独で配置します.
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}eこの変数はイベントオブジェクトを表し、ブラウザにまたがるコードを少し書くだけでターゲット要素を返し、IEにターゲット要素をsrc Elemtn属性またはeventに置く.toElementプロパティでは、他のブラウザではtargetまたはeventです.relatedTargetプロパティ.
次はeditCell関数です.この関数はgetEventTarget関数に呼び出されます.ターゲット要素を手に入れたら、残りのことは私たちが必要としている要素かどうかを見ることです.
function editCell(e) {
var target = getEventTarget(e);
if(target.tagName.toLowerCase() === 'td') {
// DO SOMETHING WITH THE CELL
}
} editCell関数では、ターゲット要素のラベル名を確認する方法で、テーブルのセルであるかどうかを決定します.この検査は簡単すぎるかもしれません.もしそれがこのターゲット要素セルの別の要素だったら?親のtd要素を見つけるためにコードを少し修正する必要があります.編集されなくてもいいセルがあるとしたらどうしますか?この場合、編集不可能なセルに指定したスタイル名を追加し、セルを編集可能な状態にする前に、そのスタイル名が含まれていないかどうかを確認できます.選択は常に多様化しており、アプリケーションに適したものを見つけるだけです.
イベントバブルの利点と欠点:
1.作成するイベントプロセッサとメモリに存在するイベントプロセッサが少なくなりました.
これは重要な点であり、パフォーマンスを向上させ、クラッシュのリスクを低減します.
2.DOM更新後にイベントプロセッサを再バインドする必要はありません.
もしあなたのページが動的に生成されている場合、例えばAjaxを通じて、要素がロードまたはアンインストールされたときにイベントプロセッサを追加または削除する必要はありません.
潜在的な問題はそれほど明らかではないかもしれませんが、これらの問題に気づくと、イベント管理コードがパフォーマンスのボトルネックになるリスクがあるので、できるだけ短く精悍にすることができます.
すべての事件がバブルを起こすわけではない.
blur、focus、load、unloadは他のイベントのように泡を立てることはできません.実際にblurとfocusは、イベントバブルではなくイベントキャプチャ法で得ることができる(IE以外の他のブラウザで).
次の点に注意してください.
mousemoveイベントをコードで処理すると、mousemoveイベントが頻繁にトリガーされるため、パフォーマンスのボトルネックに遭遇するリスクが大きくなります.mouseoutはその奇妙な表現のためにイベントエージェントで管理することが難しくなった.
イベントのバブルを回避する方法:
1.方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS </title>
<script type="text/javascript"><!--
function ClickTr()
{
alert("TR");
}
function ClickTd()
{
alert("TD");
// TD TR， HTML AAA （ ）, TR-->table-->body->document->window, event.cancelBubble=true
event.cancelBubble=true;
}
// --></script>
</head>
<body>
<div style="background-color:Azure;" mce_style="background-color:Azure;"> BBB TR, AAA TD</div>
<table>
<tr onclick="ClickTr();">
<td onclick="ClickTd();">AAA</td>
<td>BBB</td>
</tr>
</table>
</body>
</html>
2.方法
IEの下で問題を解決するのは簡単です.
onMouseEnter、onMouseLeaveはonMouseOver、onMouseOutの代わりに使えばいいのですが、彼らの役割は基本的に同じで、前者は泡が出ません.しかしfirefoxにはこの2つのイベントはありません.
3.方法:
window.event.cancelBubble = true
(IE)
event.stopPropagation() event.preventDefault()
(Firefox)
jQueryイベントのバブルを阻止
jQueryはDOMのイベントトリガに対してバブル特性を有する.この特性を利用すると、重複コードを減らすことができますが、イベントのバブルを望んでいない場合があります.この時はjQueryを止めるEventが泡立つ.
jQuery.Eventのドキュメントの冒頭で知ったjQuery.Eventオブジェクトは、W 3 C規格に準拠するイベントオブジェクトであり、jQuery.Eventは互換性IEをチェックするステップを免除した.
jQuery.Eventはイベントのバブルを阻止するための非常に簡単な方法を提供した:event.stopPropagation();
$("p").click( function (event){
event.stopPropagation(); // do something
})しかし、この方法はliveでバインドされたイベントには役に立たず、イベントのバブルを阻止するより簡単な方法が必要である:return false;
$("p").live( "click" , function (){$( this ).after( "Another paragraph!" );
return false ;
});<html>
<body>
<table border="1" width="26%" id="tableA" onclick="alert(' tableA')">
<tr onclick="tableA_rowA_click()">
<td width="106"> </td>
</tr>
<tr id="p">
<td width="106"> </td>
</tr>
</table>
</body>
</html>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
function tableA_rowA_click(){
alert(' tableA rowA');
}
$("#p").click(function(event){
alert(' tableA rowB');
event.stopPropagation();
});
</script>ほとんどの場合、イベント処理関数にfalseを返すことで、デフォルトのイベント動作を防止することができる.例えば、デフォルトで如果把要素弄清楚的话,那要素href属性指定的页面上将页面转移.Return False相当于结尾子,Return True相当于实行子.js中的return false的角色,一般用于用于活动的动作.另外,除了链接的时候,除了指定onclick时间(指定的情况下)之外,大福特的活动将实行页面的简单。如下所述,将办理奥布杰克特手机的动作。submitActionMesold有提交框架的动作.如果不追加return false的话,submitAction实施后submit按钮继续实行数据的活动,论坛再次发行.这也许多错误的根源.复数alert同时提高,解决if(1){ alert(「会社の所在地を選択してください!」); return false; }アスティフェンサ