Introduisez d'abord la méthode générale pour ajouter des événements par JS. Le contenu spécifique est le suivant
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> </tapie> </ad> <body> <p id = "p1"> Test Add Event: Firefox utilise AddeventListener, IE utilise attachévevent <br> Cliquez sur cet étiquette P ("Test1"); } fonction test2 () {alert ("test2"); } // Add Event General Method Function AddEvent (élément, e, fn) {// firefox utilise addEventListener pour ajouter l'événement if (element.addeventListener) {element.addeventListener (e, fn, false); } // IE Utilisez des pièces jointes pour ajouter l'événement else {element.attachevent ("on" + e, fn); }} window.onload = function () {var élément = document.getElementById ("p1"); AddEvent (élément, "cliquez", test1); AddEvent (élément, "cliquez", test2); } </ script> </ body> </html>Façons courantes de lier les événements JS:
Comment lier les événements: lier les fonctions de l'événement avec des attributs d'événements
avantage:
1. Complétez la séparation des comportements
2. Il est pratique pour faire fonctionner l'objet impliqué, car la fonction apparaît comme un attribut on ***, vous pouvez directement vous référer à l'objet impliqué en utilisant cela.
3. Objets événementiels faciles à lire. Lorsque l'événement est déclenché, le système passera automatiquement l'objet de l'événement à la fonction de l'événement et l'un d'eux sera passé.
<? xml version = "1.0" Encoding = "UTF-8"?> <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> js event binding </ title> <script type = "text / javascrip k = document.getElementByid ('k'). onClick = fonction (événement) {var jj = document.getElementById ('jj'); jj.style.top = event.clientx + 'px'; jj.style.left = event.clienty + 'px'; }} </ script> <style> #k {width: 60px; hauteur: 80px; Background-Color: # 80FFFF;} #jj {width: 60px; height: 80px; background-color: # ffff00; z-index: 1000; position: absolue;} </ style> </ head> <body> <div id = "k"> </ div> <div id = "jj"> </v> </ody> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.