Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > JavaScript事件处理程序(事件侦听器)_javascript技巧

JavaScript事件处理程序(事件侦听器)_javascript技巧

WBOY

Freigeben： 2016-05-16 18:03:49

Original

951 Leute haben es durchsucht

我们知道，javascript与HTML之间的交互是通过事件来实现的，事件就是用户或浏览器自身执行的某种动作，比如click、mounseover、load……,而响应事件的函数就叫做事件处理函数（或事件侦听器）。

<title>event util test</title> 
<script type="text/javascript"> 
var eventUtil = { 
addListener: function(element, type, hander) { 
if (element.addEventListener) { 
element.addEventListener(type, hander, false); 
} else if (element.attachEvent) { 
element.attachEvent('on' + type, hander); 
} else { 
element['on' + type] = hander; 
} 
}, 
getEvent: function(event) { 
return event || window.event; 
//return event ? event : window.event; 
}, 
getTarget: function(event) { 
return event.target || event.srcElement; 
}, 
preventDefault: function(event) { 
if (event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = false; 
} 
}, 
removeListener: function(element, type, hander) { 
if (element.removeEventListener) { 
element.removeEventListener(type, hander, false); 
} else if (element.deattachEvent) { 
element.detachEvent(type, hander); 
} else { 
element['on' + type] = null; 
} 
}, 
stopPropagation: function(event) { 
if (event.stopPropagation) { 
event.stopPropagation(); 
} else { 
event.cancelBubble = true; 
} 
} 
}; 
</script> 
 
 
<input type="button" value="click me" id="btn"> 
<a href="http://www.baidu.com">baidu</a> 
<script type="text/javascript"> 
(function() { 
var btn = document.getElementById("btn"); 
var link = document.getElementsByTagName("a")[0]; 
eventUtil.addListener(link, "click", function(event) { 
alert("prevent default event"); 
var event = eventUtil.getEvent(event); 
eventUtil.preventDefault(event); 
}); 
eventUtil.addListener(btn, "click", function(event) { 
var event = eventUtil.getEvent(event); 
var target = eventUtil.getTarget(event); 
alert(event.type); 
alert(target); 
eventUtil.stopPropagation(event); 
}); 
eventUtil.addListener(document.body, "click", function() { 
alert("click body"); 
}); 
})(); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

事件处理

Quelle：php.cn

Vorheriger Artikel：关于hashchangebroker和statehashable的补充文档_jquery Nächster Artikel：基于jQuery的前端数据通用验证库_jquery

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

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Kann ein in mehreren Routen deklarierter Workerpool seine CPU-Auslastung trotzdem beibehalten, ohne sich um den Schwellenwert zu kümmern? Ich hoffe, ein node.js-System mit einem Workerpool zu finden, um CPU-intensive Aufgaben zu...

Aus 2024-04-06 19:54:23

0

1

444

Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt? Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigatio...

Aus 2024-04-06 19:23:03

0

1

411

Was sind die Best Practices für die Anzeige von Versionsinformationen in Webanwendungen? Ich entwickle eine Webanwendung. Was sind die Best Practices für die Anzeige von Versionsi...

Aus 2024-04-06 19:13:16

0

2

476

Vergleichen Sie Imagick, Adobe Photoshop und Windows – Auflösung erkennen (Pixel pro Zentimeter oder Pixel pro Zoll) Dies ist keine Frage, sondern ein Versuch, mein Verständnis darüber zu verbessern, wie DPI...

Aus 2024-04-06 16:01:27

0

1

397

JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

Aus 2024-04-06 15:35:24

0

1

274

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage