Heim Web-Frontend js-Tutorial Beispiel für JavaScript-Ereignismodellanalyse_Javascript-Kenntnisse

Beispiel für JavaScript-Ereignismodellanalyse_Javascript-Kenntnisse

May 16, 2016 pm 04:16 PM
javascript 事件 模型

Die Beispiele in diesem Artikel beschreiben die Verwendung des JavaScript-Ereignismodells. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Veranstaltungsmodell

Bubbling-Ereignisse: Ereignisse werden von Blattknoten entlang der Vorgängerknoten zum Wurzelknoten weitergegeben
Erfassen von Ereignissen: vom obersten Element des DOM-Baums bis zum genauesten Element, im Gegensatz zu sprudelnden Ereignissen
DOM-Standard-Ereignismodell: Der DOM-Standard unterstützt sowohl Bubbling-Ereignisse als auch Capture-Ereignisse. Man kann sagen, dass es sich um eine Kombination aus beiden handelt: Zuerst den Capture-Typ und dann die Bubbling-Lieferung

2. Ereignisobjekt

Im IE-Browser ist das Ereignisobjekt ein Attribut des Fensters. Im DOM-Standard muss das Ereignis als einziger Parameter an die Ereignisverarbeitungsfunktion

übergeben werden

Kompatibles Ereignisobjekt abrufen:

function(event){ 
  //event 是作为DOM标准的参数传入处理函数 
 event = event ?event : window.event; 
} 

Nach dem Login kopieren
Im IE ist das Objekt des Ereignisses im srcElement des Ereignisses enthalten, während im DOM-Standard das Objekt im Zielattribut

enthalten ist Rufen Sie das Element ab, auf das das kompatible Ereignisobjekt zeigt:

var target =event.srcElement ? event.srcElement : event.target ;
Nach dem Login kopieren
Die Voraussetzung besteht darin, sicherzustellen, dass das Ereignisobjekt korrekt abgerufen wurde

3. Ereignis-Listener

Unter IE werden registrierte Listener in umgekehrter Reihenfolge ausgeführt, d. h. die später registrierten werden zuerst ausgeführt

element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器
Nach dem Login kopieren
Der erste Parameter ist der Ereignisname und der zweite Parameter ist die Callback-Handler-Funktion

Unter DOM-Standard:

element.addEventListener('click',observer,useCapture) 
element.removeEventListener('click',observer,useCapture)
Nach dem Login kopieren
Der erste Parameter ist der Ereignisname ohne das Präfix „on“, der zweite Parameter ist die Rückrufverarbeitungsfunktion und der dritte Parameter gibt an, ob die Rückruffunktion in der Erfassungsphase oder der Bubbling-Phase aufgerufen wird. Der Standardwert ist „true“. in der Erfassungsphase

4. Veranstaltungszustellung

Kompatible Browser-Ereigniszustellung abbrechen

function someHandler(event){ 
  event = event || window.event; 
  if(event.stopPropagation) //DOM标准 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE标准 
} 

Nach dem Login kopieren
Standardverarbeitung nach Abbruch der Ereigniszustellung

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM标准 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE标准 
}
Nach dem Login kopieren
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Das weltweit leistungsstärkste Open-Source-MoE-Modell ist da, mit chinesischen Fähigkeiten, die mit GPT-4 vergleichbar sind, und der Preis beträgt nur fast ein Prozent von GPT-4-Turbo Das weltweit leistungsstärkste Open-Source-MoE-Modell ist da, mit chinesischen Fähigkeiten, die mit GPT-4 vergleichbar sind, und der Preis beträgt nur fast ein Prozent von GPT-4-Turbo May 07, 2024 pm 04:13 PM

Das weltweit leistungsstärkste Open-Source-MoE-Modell ist da, mit chinesischen Fähigkeiten, die mit GPT-4 vergleichbar sind, und der Preis beträgt nur fast ein Prozent von GPT-4-Turbo

KAN, das MLP ersetzt, wurde durch Open-Source-Projekte auf Faltung erweitert KAN, das MLP ersetzt, wurde durch Open-Source-Projekte auf Faltung erweitert Jun 01, 2024 pm 10:03 PM

KAN, das MLP ersetzt, wurde durch Open-Source-Projekte auf Faltung erweitert

KI untergräbt die mathematische Forschung! Der Gewinner der Fields-Medaille und der chinesisch-amerikanische Mathematiker führten 11 hochrangige Arbeiten an | Gefällt mir bei Terence Tao KI untergräbt die mathematische Forschung! Der Gewinner der Fields-Medaille und der chinesisch-amerikanische Mathematiker führten 11 hochrangige Arbeiten an | Gefällt mir bei Terence Tao Apr 09, 2024 am 11:52 AM

KI untergräbt die mathematische Forschung! Der Gewinner der Fields-Medaille und der chinesisch-amerikanische Mathematiker führten 11 hochrangige Arbeiten an | Gefällt mir bei Terence Tao

Google ist begeistert: JAX-Leistung übertrifft Pytorch und TensorFlow! Es könnte die schnellste Wahl für das GPU-Inferenztraining werden Google ist begeistert: JAX-Leistung übertrifft Pytorch und TensorFlow! Es könnte die schnellste Wahl für das GPU-Inferenztraining werden Apr 01, 2024 pm 07:46 PM

Google ist begeistert: JAX-Leistung übertrifft Pytorch und TensorFlow! Es könnte die schnellste Wahl für das GPU-Inferenztraining werden

Hallo, elektrischer Atlas! Der Boston Dynamics-Roboter erwacht wieder zum Leben, seltsame 180-Grad-Bewegungen machen Musk Angst Hallo, elektrischer Atlas! Der Boston Dynamics-Roboter erwacht wieder zum Leben, seltsame 180-Grad-Bewegungen machen Musk Angst Apr 18, 2024 pm 07:58 PM

Hallo, elektrischer Atlas! Der Boston Dynamics-Roboter erwacht wieder zum Leben, seltsame 180-Grad-Bewegungen machen Musk Angst

FisheyeDetNet: der erste Zielerkennungsalgorithmus basierend auf einer Fischaugenkamera FisheyeDetNet: der erste Zielerkennungsalgorithmus basierend auf einer Fischaugenkamera Apr 26, 2024 am 11:37 AM

FisheyeDetNet: der erste Zielerkennungsalgorithmus basierend auf einer Fischaugenkamera

Tesla-Roboter arbeiten in Fabriken, Musk: Der Freiheitsgrad der Hände wird dieses Jahr 22 erreichen! Tesla-Roboter arbeiten in Fabriken, Musk: Der Freiheitsgrad der Hände wird dieses Jahr 22 erreichen! May 06, 2024 pm 04:13 PM

Tesla-Roboter arbeiten in Fabriken, Musk: Der Freiheitsgrad der Hände wird dieses Jahr 22 erreichen!

Yolov10: Ausführliche Erklärung, Bereitstellung und Anwendung an einem Ort! Yolov10: Ausführliche Erklärung, Bereitstellung und Anwendung an einem Ort! Jun 07, 2024 pm 12:05 PM

Yolov10: Ausführliche Erklärung, Bereitstellung und Anwendung an einem Ort!

See all articles