JSでのイベントモデルの例を詳しく解説

以前はイベントモデルが比較的明確で、多くの概念が私の頭の中で明確にマッピングされていました。仕事を始めた後、一方では制限を使用し、他方では、シンプルさは利便性を意味するフレームワークでのさまざまなイベント監視方法の使用に慣れてきましたが、時間が経つにつれて、イベントのいくつかの概念が私の記憶から消えていきました。私が C 言語ポインタ、マクスウェル方程式、行列変換、最小二乗法などを忘れ始めているのと同じです。知識は、単純なものから奥深いもの、奥深いものから理解へと進む道を切り開く色とりどりの石畳のようなもので、常にあなたがさらに先へ進むのに役立ちます。イベントモデルを振り返ってみましょう。

1. イベントの簡単な紹介

イベントには以下が含まれます:マウス イベントキーボード イベントフレーム イベント onerror onresize onscroll など
フォーム イベント onblur onfocus など
クリップボード イベント oncopy oncut onpaste
印刷イベント onafterprint onbeforeprint
drag アニメーション イベント ondrag ondragenter など
メディア イベント onplay onpause
アニメーション イベント animeend
トランジション イベント
その他のイベント など

イベントは、
ターゲット イベント オブジェクト
イベント リスニング オブジェクト

マウス イベント オブジェクト

を含むオブジェクトにカプセル化されます。キーボード イベント オブジェクトなど。
それらには独自のプロパティとメソッドが含まれており、Event オブジェクトからも継承されます。それは W3C によって異なります。
一般的に使用されるメソッド:
event.PreventDefault()//リンクジャンプやフォーム送信などの要素のデフォルト動作を防止します



2. 3 種類のイベントモデル

1. オリジナルイベントモデル(DOMレベル0) 特徴: オリジナルイベントモデルにはイベント発生後の伝播の概念がなく、イベントフローも存在しません。インシデントが発生した場合は、直ちに対処します。 listen関数はあくまで要素の属性値であり、リスナーは要素の属性値を指定することでバインドされます。記述方法は2つあります:
HTML: dfe8e6650259415a310b5c2a526a89f0 js: document.getElementsById('btn').onclick = func

利点: すべてのブラウザ すべて互換性があります

欠点:
a. ロジックと表示が分離されていません

b. 同じイベントに対してバインドできるリスニング関数は 1 つだけであり、後でバインドされた関数が前の関数を上書きします。

c. イベントバブリング、委任、その他のメカニズムを渡すことができません。

現在の Web プログラムやより複雑なロジックのモジュール開発では、この方法は明らかに時代遅れであるため、実際のプロジェクトでは推奨されません。通常はデモをいくつか書くだけで問題ありません。


2. IEイベントモデル

特徴: IEは、関数の実行が完了するとイベントオブジェクトをウィンドウの属性として設定します
。

IE のイベント モデルには 2 つのステップしかありません。まず、要素のリスニング関数が実行され、次にイベントが親ノードに沿ってドキュメントにバブルされます。

リスニング関数をバインドして解放するメソッド: attachEvent("eventType","handler")。ここで、evetType は onclick などのイベントのタイプです。’on’ を追加するように注意してください。
イベントリスナーを無効にするメソッドは detachEvent("eventType", "handler" ); です。
欠点: IE 自体でしか使用できないため、冷たすぎます。


3. DOM2 イベントモデル

イベントモデルは、W3C Level 2 DOM イベント、つまり DOM2 イベントモデルで標準化されています。最新のブラウザ (IE9 以前は除く) はすべてこの仕様に従っています。
特徴:

W3C によって開発されたイベント モデルでは、イベントの発生には 3 つのプロセスが含まれます:

a. イベント キャプチャ フェーズ。このプロセス中に、イベントはドキュメントからターゲット要素まで伝播され、渡されたノードが順番にチェックされ、イベントのリッスン関数が登録されているかどうかが確認され、登録されている場合は実行されます。 b. イベント処理段階。イベントが対象要素に到達すると、対象要素のイベント処理関数が実行されます c. イベントバブリングステージ。イベントはターゲット要素からドキュメントに到達するまで発生し、通過するノードがイベントのリスニング関数を登録しているかどうかもチェックします。登録されている場合は、それを実行します。


注:
すべてのイベント タイプはイベント キャプチャ フェーズを通過しますが、一部のイベントのみがイベント バブリング フェーズを通過します。たとえば、
submit イベントはバブルされません。

リッスン関数をバインドして解放するメソッド:
addEventListener("eventType", "handler", "true|false"); ここで、eventType はイベント タイプを指します。 注
'on' プレフィックスを追加しないでください。 IEとは異なります。

2番目のパラメータは処理関数です。

3番目のパラメータは、キャプチャフェーズで真のキャプチャフェーズに入るかどうかを指定するために使用され、バブリングフェーズでのみfalseになりますリスナーのリリースも同様です:removeEventListner("eventType") ,"handler","true !false");

IEおよび最新ブラウザのイベント登録リスニング書き込みメソッドと互換性があります

var a = document.getElementById('XXX');
if(a.attachEvent){
    a.attachEvent('onclick',func);
}
else{//IE9以上和主流浏览器
    a.addEventListener('click',func,false);
}

现有的框架和类库都会对适应各种浏览器做兼容性的封装，JQuery底层即使用了上面的兼容性写法。

 

三、事件的捕获-冒泡机制
DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和
冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。

以如下HTML结构为例子，执行流程应该是这样的:

<div id="parent">
       父元素
       <div id="child">子元素</div>
</div>

运行一下一目了然。

var parent= document.getElementById('parent');
	console.dir(parent);
    var child = document.getElementById('child');
    parent.addEventListener('click',function(){alert('父亲在捕获阶段被点

击');},true);//第三个参数为true
    child.addEventListener('click',function(){alert('孩子被点击了');},false);
 parent.addEventListener('click',function(){alert('父亲在冒泡阶段被点击

了');},false);//第三个参数为false

　

　　可以看到，第三个即用来指定是否在捕获阶段进 true捕获阶段，false没有捕获阶段 。
如果不想让事件向上冒泡，可以在监听函数中调用event.stopPrapagation()来完成，后面会有应
用的栗子。

四、事件委托机制

　　委托就是把事件监听函数绑定到父元素上，让它的父辈来完成事件的监听，这样就把事情“委托
”了过去。在父辈元素的监听函数中，可通过event.target属性拿到触发事件的原始元素，然后
再对其进行相关处理。

　

五、jQuery中的事件监听方式
　　jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的
函数分别是unbind、die、undelegate、off。这几个方法已经对各种浏览器的兼容性进行封装。
具体方法可以查看手册。
   注意几点:
   jQuery推荐事件的绑定都使使用on方法
   jQuery默认事件不在捕获中进行

六、什么是自定义事件
张鑫旭的《js-dom自定义事件》

七、一个简单例子
点击弹窗之外任何地方，弹框关闭。

方法：给body绑定事件，在事件的执行函数里关闭弹框；
     给弹框元素绑定点击事件，在事件的执行函数里面组织事件冒泡，即：
     event.stopPrapagation()；

 

以上がJSでのイベントモデルの例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。