JAvascriptイベントの少しの悟り

2689 ワード

JavaScript

JAvascriptバブルイベントの理解は一般的に次のようになります.
例えば、ページにはBODYにDIVが含まれており、DIVにはBUTTONが含まれています.BODY,DIV,BUTTONではいずれもONCLICKイベントがあり,BUTTONではもう1つのONCLICKイベントがある.それでは、BUTTONをクリックすると、先にBUTTONのイベントを実行します.
次にDIVのイベントを実行するBODYのイベントを実行する.これがJAVASCRITTの事件です.JQUERYはこのような事件の泡だけを支持しているようだ.
しかし、BODYのクリックイベントを先に実行してからBUTTONのクリックイベントを実行したい場合は、どうすればいいですか?
以下は私のイベントリスニングコードです.

<html>
   <head>
      <title></title>
   </head>
   
   <body id='bodye'>
   <input type="button" value="test" id="test" />
   </body>
   <script type="text/javascript">
       function bodyEvent(){
          alert('body');
       }
       function buttonEvent(){
           alert('button');
       }
       document.body.onclick=bodyEvent;
       document.getElementById("test").onclick=buttonEvent;
                     //      ，    BUTTON,   BODY
                   
    
   </script>
</html>

document.body.addEventListener("click", function(){
            alert(this.id);
        }, false);
       document.getElementById("test").addEventListener("click",function(){
            alert(this.id);
       },true);
       document.getElementById("div").addEventListener("click",function(){
            alert(this.id);
       },true);

ここで私は強引にイベントの傍受を追加して、trueとfalseというパラメータに注意して、元のイベントの泡の流れを破ることができます.TRUEは外層のイベントを先に実行し、FALSEであれば元の実行方式を保持する.

IE 6のPNG透明JSプラグインDD_を解決するbelatedPNG

JSイベントオブジェクトの取得、イベントのソースオブジェクトの取得(Firefox,IE)