JS バインディングイベント_JavaScript スキルを理解する-jsチュートリアル-php.cn

JS バインディングイベント_JavaScript スキルを理解する

WBOY

リリース： 2016-05-16 15:19:08

オリジナル

1230 人が閲覧しました

この記事では、参考のために JS バインディングイベントの詳細な分析を提供します。具体的な内容は次のとおりです。

IE の初期のバージョンでは、obj.attachEvent() が使用されていましたが、他のブラウザでは addEventListener() が使用されていました。
どちらのメソッドにも 3 つのパラメータがあります。 イベントタイプ、イベント関数 、最後のパラメータは ブール値 、true または false です。
true はイベントキャプチャフェーズで実行することを意味し、false はイベントバブリングフェーズで実行することを意味します。
IE はイベントバブリングのみをサポートしているため、ほとんどの場合、イベントハンドラーはイベントフローのバブリングステージに追加されます。デフォルトは「false」です
これにより、さまざまなブラウザとの互換性が最大限に高められます。イベントがターゲットに到達する前にイベントをインターセプトする必要がある場合にのみ、イベントハンドラーをキャプチャフェーズに追加することをお勧めします。特に必要な場合を除き、イベントキャプチャフェーズ中にイベントハンドラーを登録することはお勧めしません。
さまざまなブラウザのイベントバインディングと互換性があります:

 function addEvent(obj, eventType, callback, bubble){
 if(obj.addEventListener){
  obj.addEventListener(eventType, callback, bubble);
 }else{
  obj.attachEvent(eventType, callback, bubble);
 }
 }

ログイン後にコピー

呼び出すときは、コールバック関数には setTimeout と同様に括弧が必要ないことに注意してください。

この部分は比較的理解しやすいですが、最後のパラメータについては、よく理解していない人が多いと思います。つまり、実際に理解するには、まだプログラムを作成してテストする必要があります。

HTML 部分:

<!doctype html>
<html lang="en">
  <head>
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="">
    <title>Document</title>
  <!--css js 文件的引入-->
  </head>
  <body>
    <div id="out"> 
    <p>我是路人甲</p>
    <div id="middle"> 
      <div id="inner">最里面的</div> 
    </div> 
    <p>我是路人乙</p>
    </div>
  </body>
</html>

ログイン後にコピー

js コンテンツ: (最初のケース)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：inner-------middle------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

ログイン後にコピー

js コンテンツ: (2 番目のケース)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

ログイン後にコピー

js コンテンツ: (3 番目のケース)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

ログイン後にコピー

js コンテンツ: (4 番目のケース)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------middle------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

ログイン後にコピー

js コンテンツ: (5 番目の状況)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：middle-------inner------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

ログイン後にコピー

js コンテンツ: (6 番目のケース)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------inner------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

ログイン後にコピー

上記の 6 つの状況に対応する結果を読めば、最後のパラメータが true か false かの違いがすでに深く理解できると思います。