JS泡立ちの問題

5991 ワード

html jquery ブラウザ IE firefox

JavaScriptイベントには、イベントバブルとターゲット要素の2つの重要な特性があります.
イベントバブル:1つの要素のイベントがトリガーされると、たとえばマウスがボタンをクリックすると、同じイベントがその要素のすべての祖先要素でトリガーされます.これ
プロセスはイベントバブルと呼ばれています.このイベントは元の要素からDOMツリーの最上層まで泡が立ち始めた.
≪ターゲット要素|Target Elements|emdw≫:どのイベントのターゲット要素も最初の要素であり、この例ではボタンであり、エレメント・オブジェクトで属性の形をしています.
式が現れる.イベントエージェントを使用すると、イベントプロセッサをエレメントに追加し、サブエレメントからイベントが泡を立てるのを待つことができ、このイベントがどのエレメントから始まるかを簡単に知ることができます.
のです.
イベントのバブルとキャプチャ
捕獲は上位元素から下位元素、発泡は下位元素から上位元素である.
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の中でターゲット要素はsrcElemtn属性あるいは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>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS      </title>   
    <script type="text/javascript"><!--   
    function ClickTr()   
    {
        alert(typeof  window.event);
        e = event||window.event;
      alert("TR");   
      alert(typeof e.srcElement);
    }   
    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のドキュメントで始まる
知ってるjQueryEventオブジェクトは、W 3 C規格に準拠するイベントオブジェクトであり、jQuery.Eventは互換性IEをチェックするステップを免除した.
jQuery.Eventは、イベントのバブルを阻止するための非常に簡単な方法を提供します.
event.stopPropagation();


$("p").click(function(event){
    event.stopPropagation(); // do something
})

でもこの方法は
liveバインドされたイベントは役に立たず、より簡単な方法で阻止する必要があります.
部品の泡:
return false;


$(this).after("Another paragraph!");
    return false;
});

原文住所:
http://www.cnblogs.com/manhoo/archive/2009/10/09/1579643.html

web学習ノート12-移動端簡易エレベーター効果

反復法で平方根を求める