JavaScript event handling methods (three types)_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JavaScript event handling methods (three types)_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

最近、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

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AM

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig

Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AM

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AM

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

See all articles