Comment lier des événements en javascript
Jul 19, 2021 pm 02:14 PMMéthode?: 1. Utilisez l'attribut d'événement onclick de la balise HTML pour lier le gestionnaire, la syntaxe "onclick="event handler""?; 2. Utilisez l'attribut d'événement de la source d'événement pour lier le gestionnaire, la syntaxe "obj .on event name= "Handling function"; 3. Utilisez addEventListener() pour lier le gestionnaire.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
Pour que le navigateur appelle automatiquement le gestionnaire d'événements correspondant pour gérer l'événement lorsque l'événement se produit, il est nécessaire de lier le gestionnaire d'événements à la source de l'événement (le gestionnaire d'événements lié est également appelé gestionnaire d'événements enregistré).
Il existe 3 fa?ons de lier les gestionnaires d'événements?:
Utilisez l'attribut event en cliquant sur la balise HTML pour lier le gestionnaire d'événements. Cette méthode définit la valeur de l'attribut d'événement de la balise sur le gestionnaire d'événements. Cette méthode n'est pas recommandée pour le moment.
Utilisez l'attribut event de la source d'événement pour lier la fonction de gestionnaire d'événements. Cette méthode définit la valeur de l'attribut d'événement de l'objet source d'événement sur la fonction de traitement d'événement.
Utilisez la méthode addEventListener() pour lier des événements et des gestionnaires d'événements (les versions antérieures à IE9 utilisent la méthode attach Event().
1. Utilisez l'attribut event de la balise HTML pour lier le gestionnaire
Il convient de noter que lors de l'utilisation de l'attribut event d'une balise HTML pour lier un gestionnaire d'événement, le code de script dans l'attribut event ne peut pas contenir de déclaration de fonction, mais peut être un appel de fonction ou une série de codes de script séparés par des points-virgules.
[Exemple 1] Utilisez l'attribut d'événement de la balise HTML pour lier le gestionnaire d'événements
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用HTML標簽的事件屬性綁定事件處理程序</title> </head> <body> <input type="button" onclick="var name='PHP中文網';alert(name);" value="事件綁定測試"/> </body> </html>
Le bouton dans le code ci-dessus est l'objet cible de l'événement de clic, et il lie deux codes de script via l'attribut d'événement. onclick de la balise pour le traitement des événements. Une fois le code ci-dessus exécuté dans le navigateur Chrome, lorsque l'utilisateur clique sur le bouton, une bo?te de dialogue d'avertissement appara?t et le résultat est tel qu'indiqué dans la figure ci-dessous.
Lorsque le gestionnaire d'événements implique plus de 2 codes, si la liaison d'un gestionnaire d'événements comme l'exemple 1 rendra le programme moins lisible, vous pouvez définir le gestionnaire d'événements comme une fonction, puis appeler la fonction dans l'attribut d'événement<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML標簽的事件屬性為函數調用</title> <script> function printName(){ var name = "PHP中文網"; alert(name); } </script> </head> <body> <input type="button" onClick="printName()" value="事件綁定測試"/> </body> </html>
Le résultat de l'exécution du code ci-dessus est exactement le même que celui de l'exemple 1. Comme le montrent les deux exemples ci-dessus, l'attribut d'événement de balise. mélange le code de script JS et les balises HTML, ce qui viole les règles. Par conséquent, il n'est pas bon d'utiliser les attributs d'événement des balises HTML pour lier les gestionnaires d'événements, et doit être évité dans les applications pratiques. 2. Utiliser la liaison d'attribut d'événement des sources d'événements.
L'une des fa?ons de séparer HTML et JS consiste à lier la fonction de gestionnaire d'événements à l'aide de l'attribut d'événement de la source d'événement.
obj.on事件名 = 事件處理函數L'obj au format est l'objet source de l'événement. Le programme d'événement est généralement l'instruction de définition d'une fonction anonyme, ou un nom de fonction Exemple de gestionnaire de liaison d'attribut d'événement de la source d'événement?:
oBtn.onclick = function(){//oBtn為事件源對象,它的單擊事件綁定了一個匿名函數定義 alert('hi') };
[Exemple 3. ] Utilisez l'attribut event de la source de l'événement pour lier la fonction de gestionnaire d'événements.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用事件源的事件屬性綁定事件處理函數</title> <script> window.onload = function(){//窗口加載事件綁定了一個匿名函數 //定義一個名為fn的函數 function fn(){ alert('hello'); } //獲取事件源對象 var oBtn1 = document.getElementById("btn1"); var oBtn2 = document.getElementById("btn2"); //綁定一個匿名函數 oBtn1.onclick = function(){ alert("hi"); } //綁定一個函數名 oBtn2.onclick = fn; }; </script> </head> <body> <input type="button" id="btn1" value="綁定一個匿名函數"> <input type="button" id="btn2" value="綁定一個函數名"> </body> </html>Le code JS ci-dessus gère trois événements : le chargement de l'événement de chargement de la fenêtre du document et l'événement de clic des deux boutons. obtenu en liant la fonction de gestionnaire d'événements avec l'attribut d'événement de la source d'événement. , l'événement de chargement et l'événement de clic du premier bouton sont liés à des fonctions anonymes, tandis que l'événement de clic du deuxième bouton est lié à un nom de fonction
.
Il est important de noter qu'elle ne peut pas être liée dans oBtn2. Ajoutez "()" après le nom de la fonction, sinon la fonction liée devient un appel de fonction, qui sera automatiquement appelée et exécutée lorsque le moteur JS exécute cette ligne de code, mais ne sera pas exécuté lorsque l'événement est déclenché.La fonction d'événement de chargement de fenêtre sera traitée une fois tous les éléments du document chargés, et l'événement de clic sera déclenché lorsque chaque bouton est cliqué. Après avoir cliqué sur le premier et le deuxième bouton, deux bo?tes de dialogue d'avertissement affichant respectivement "salut" et "bonjour" appara?tront.
3. Utilisez addEventListener() pour lier le gestionnaire
當一個事件源需要使用多個函數來處理時,可以通過事件源調用 addEventListener()(針對標準瀏覽器)來綁定事件處理函數以實現此需求。一個事件源通過方法綁定多個事件函數的實現方式是:對事件源對象調用多次 addEventListener(),其中每次的調用只綁定一個事件處理函數。
addEventListener() 是標準事件模型中的一個方法,對所有標準瀏覽器都有效。使用 addEvent Liste ner() 綁定事件處理程序的格式如下:
事件源.addEventListener(事件名稱,事件處理函數名,是否捕獲);
參數“事件名稱”是一個不帶“on”的事件名;參數“是否捕獲”是一個布爾值,默認值為 false,取 false 時實現事件冒泡,取 true 時實現事件捕獲。
通過多次調用 addEventListener() 可以為一個事件源對象的同一個事件類型綁定多個事件處理函數。當對象發(fā)生事件時,所有該事件綁定的事件處理函數就會按照綁定的順序依次調用執(zhí)行。另外,需要注意的是,addEventListener() 綁定的事件處理函數中的 this 指向事件源。
addEventListener() 綁定處理程序示例:
document.addEventListener('click',fn1,false);//click事件綁定fn1函數實現事件冒泡 document.addEventListener('click',fn2,true);//click事件綁定fn2函數實現事件捕獲
【例 4】使用 addEventListener() 綁定事件函數。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用addEventListener()/attachEvent()綁定事件函數</title> <script> function fn1(){ alert("fn1()"); } function fn2(){ alert("fn2()"); } function bindTest(){ document.addEventListener('click',fn1,false);//首先綁定fn1函數 document.addEventListener('click',fn2,false); } bindTest();//調用函數 </script> </head> <body> </body> </html>
上述代碼在瀏覽器中運行后,當單擊文檔窗口時,會依次彈出顯示“fn1()”和“fn2()”的警告對話框。
【推薦學習:javascript高級教程】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en ?uvre en détail. 1. Technologie WebSocket

Comment utiliser WebSocket et JavaScript pour mettre en ?uvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en ?uvre un système de commande en ligne en temps réel?: avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en ?uvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. à mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en ?uvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Comment utiliser WebSocket et JavaScript pour mettre en ?uvre un système de réservation en ligne. à l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau n?ud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau n?ud à insérer et le n?ud de référence (c'est-à-dire le n?ud où le nouveau n?ud sera inséré).

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service
