Home > Article > Web Front-end > JavaScript event handling methods (three types)_javascript skills

JavaScript event handling methods (three types)_javascript skills

WBOYOriginal: 2016-05-16 15:03:471439browse

最近、Web サイトを毎日修正したり、Web サイトの特殊効果を作成したりする必要があるため、JS の露出イベントが多くなりました。使用しているのは一部だけで、混乱することがあります。体系的に整理しましたので、参考のために Script House プラットフォームで共有します。

1. JavaScript イベントとは何ですか?

イベントは JavaScript アプリケーションの心臓部であり、ブラウザーで Web ページと特定の種類の対話を実行するときに発生します。

イベントは、ユーザーが何らかのコンテンツをクリックしたり、マウスが特定の要素の上を通過したり、キーボードの特定のキーを押したりすることもあります (Web ページの読み込みなど)。または、ユーザーがウィンドウをスクロールまたはサイズ変更します。率直に言うと、イベントとは、ドキュメントまたはブラウザーで発生する対話の特定の瞬間です。

JavaScript を使用すると、特定のイベントの発生をリッスンし、それらのイベントに応答して特定のイベントが発生するように指定できます。

2. イベントの流れ

イベントフローは、ページ上でイベントが受信される順序を記述します。ブラウザ開発の初期の頃、2 つの主要なブラウザメーカーである IE と Netscape が競合していましたが、その解釈という落とし穴が発生しました。イベントフローは 2 つの完全に反対の定義が現れました。それは、私たちがよく知っている、IE のイベントバブリングや Netscape のイベントキャプチャです。まずは写真を撮って構造を簡単に見てみましょう:

1. イベントバブリング

イベントバブリングとは、イベントが最初に最も具体的な要素 (ドキュメント内で最も深いネストレベルを持つノード) によって受信され、その後、最も具体性の低いノード (ドキュメント) まで上向きに伝播することを意味します。上の図で説明すると、テキスト部分がクリックされると、最初にテキストの要素によって受信され、次に段階的にウィンドウに伝播されます。つまり、6-7-8-9-10 のプロセスです。が実行されます。

2. イベント攻略

イベントキャプチャとは、イベントが最初に特定性の低いノードによって受信され、最も特定性の高いノードが最後にイベントを受信することを意味します。同様に、上記のモデルでは、テキスト部分がクリックされると、それがまずウィンドウで受信され、それから段階的にテキスト要素に伝播する、つまり1-2-3-4-5の処理が実行されます。

コードではどのように表現されますか?後ほどお渡しします！

3. Javascript イベントハンドラーの 3 つの方法

イベントが発生すると、それを処理する必要があります。JavaScript イベントハンドラーには主に 3 つのメソッドがあります。

1. HTML イベントハンドラー

つまり、次のコードのように、イベントハンドラーを HTML コードに直接追加します。

<input id="btn" value="按钮" type="button" onclick="showmsg();">
　　<script>
　　 function showmsg(){
　　 alert("HTML添加事件处理");
　　 }
　　</script>

上記のコードから、イベント処理が要素内で直接ネストされていることがわかります。これには問題があります。HTML コードと js の間の結合が強すぎるため、js の showmsg を変更したい場合は変更できません。 jsのみの修正でも構いませんが、htmlの修正も1～2件程度であればお受けできますが、コードが1万行レベルになると修正に多くの時間と費用がかかりますので、ご了承ください。この方法は使用しません。

2. DOM レベル 0 イベントハンドラー

これは、指定されたオブジェクトのイベント処理を追加することです。次のコード部分を見てください:

<input id="btn" value="按钮" type="button">
　　<script>
　　　　var btn= document.getElementById("btn");
　　 btn.onclick=function(){
　　　　　　alert("DOM级添加事件处理");
　　　　} 
　　　　btn.onclick=null;//如果想要删除btn的点击事件，将其置为null即可
　　</script>

上記のコードから、HTML イベントハンドラー、DOM レベル 0 イベントと比較して、HTML コードと JS コード間の結合が大幅に減少していることがわかります。しかし、賢明なプログラマーはまだ満足しておらず、これに対処するための 3 番目の方法を見てみましょう。

3. DOM2 レベルのイベントハンドラー

DOM2 も特定のオブジェクトにイベントハンドラーを追加しますが、主にイベントハンドラーの指定と削除の操作を処理するための 2 つのメソッド、addEventListener() と RemoveEventListener() が必要です。これらはすべて、処理されるイベント名、イベントハンドラーとしての関数、およびブール値 (キャプチャフェーズでイベントを処理するかどうか) の 3 つのパラメーターを受け取ります。次のコード部分を見てください:

<input id="btn" value="按钮" type="button">
　　<script>
　　 var btn=document.getElementById("btn");
　　 btn.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处
理在各浏览器中兼容性较好
　　 function showmsg(){
　　 alert("DOM级添加事件处理程序");
　　 }
　　 btn.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
　　</script>

ここでは、イベント処理を追加および削除する場合、最後の方法がより直接的で最も単純であることがわかります。ただし、Ma Haixiang は、削除イベントを処理するときに、渡されるパラメータが以前のパラメータと一致している必要があることを全員に思い出させます。そうでない場合、削除は無効になります。

4. イベントバブリングとイベントキャプチャのプロセスと違い

そういえば、イベントバブリングとイベントキャプチャのプロセスを説明するためのコードをいくつか示し、この 2 つの違いも見てみましょう。

<!doctype html>
　　<html lang="en">
　　<head>
　　 <meta charset="UTF-">
　　 <title>Document</title>
　　 <style>
　　 #p{width:px;height:px;border:px solid black;}
　　 #c{width:px;height:px;border:px solid red;}
　　 </style>
　　</head>
　　<body>
　　 <div id="p">
　　 i am www.mahaixiang.cn
　　 <div id="c">i like www.mahaixiang.cn</div>
　　 </div>
　　 <script>
　　 var p = document.getElementById('p');
　　 　　var c = document.getElementById('c');
　　 c.addEventListener('click', function () {
　　 alert('子节点捕获')
　　 }, true);
　　 c.addEventListener('click', function () {
　　 alert('子节点冒泡')
　　 }, false);
　　 p.addEventListener('click', function () {
　　 alert('父节点捕获')
　　 }, true);
　　 p.addEventListener('click', function () {
　　 alert('父节点冒泡')
　　 }, false);
　　 </script>
　　</body>
</html>

Run the above code and click on the child element. We will find that the order of execution is: parent node capture--child node capture--child node bubbling--parent node bubbling. From this example, everyone will understand. In addition, DOM level 2 events stipulate that events include three stages:

1. Event capture phase;

2. In the target stage;

3. Event bubbling stage.

First it is capturing, then it is in the target stage (that is, when it comes to the location where the event is sent), and finally it is bubbling. What is unscientific is that there is no DOM1 level event handler. Please pay attention, don't make a joke. !

5. Supplement

1. The IE event handler also has two methods: attachEvent() to add an event, and detachEvent() to delete an event. These two methods receive the same two parameters: the event handler name and the event processing function. Why is there no boolean value here? Because IE8 and earlier versions only support event bubbling, the last parameter defaults to false! (Browsers that support IE event handlers include IE and opera).

2. The event object is an object used to record some relevant information when an event occurs, but the event object is only generated when the event occurs, and can only be accessed within the event processing function, after all event processing functions have finished running. , the event object is destroyed!

The above are the JavaScript event processing methods (three types) introduced by the editor to you. I hope it will be helpful to you!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js code to get page and element height and width_javascript skillsNext article：js code to get page and element height and width_javascript skills

See more

JavaScript event handling methods (three types)_javascript skills

Related articles