最近、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!
Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AMDetailed 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
Custom Google Search API Setup TutorialMar 04, 2025 am 01:06 AMThis tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y
Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AMSo 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
Example Colors JSON FileMar 03, 2025 am 12:35 AMThis article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind
8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AMLeverage 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
What is 'this' in JavaScript?Mar 04, 2025 am 01:15 AMCore points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was
Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AMjQuery 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 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AMThis 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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Notepad++7.3.1
Easy-to-use and free code editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Atom editor mac version download
The most popular open source editor
SublimeText3 Linux new version
SublimeText3 Linux latest version
