บทความนี้อธิบายถึงการใช้การเพิ่มและลบการฟังใน JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
การฟังเหตุการณ์ใน JS คือการใช้ AddEventListener เพื่อผูกกิจกรรม การใช้งานนี้เป็นเรื่องธรรมดาและเรียบง่ายใน jQuery แต่มันซับซ้อนกว่าใน JS พื้นเมือง ที่นี่เราจัดระเบียบทดสอบและตัวอย่างของวิธีการต่าง ๆ ของเหตุการณ์ addeventListener สำหรับการอ้างอิงและการเรียนรู้ของคุณ
เมื่อฉันทำงานเป็นผู้เล่นเมื่อสองวันก่อนฉันพบปัญหาการลบจอภาพและไม่สามารถลบได้ หลังจากดูมันฉันพบว่าพารามิเตอร์จะต้องติดต่ออย่างเต็มที่ การติดต่ออย่างสมบูรณ์หมายความว่าอย่างไร? กล่าวอีกนัยหนึ่ง:
การคัดลอกรหัสมีดังนี้: $ ('. วิดีโอ') [0]
ตัวอย่างเช่นต้องส่งพารามิเตอร์สามพารามิเตอร์ในประโยคนี้เพื่อให้สามารถลบได้ ทำไมถึงจำเป็น? ใช่ส่วนที่เจ็บปวดอยู่ที่นี่:
เมื่อเพิ่มและลบพารามิเตอร์ที่สามสามารถละเว้นได้ แต่สถานการณ์เริ่มต้นของพวกเขาจะแตกต่างกันในเวลานี้! -
โดยปกติแล้ว addeventListener เป็นเท็จ ...
1. เพิ่มการฟังเหตุการณ์ที่กำหนดเอง
การคัดลอกรหัสมีดังนี้: var eventhandlescounter = 1; // คำนวณจำนวนการฟังเหตุการณ์เพิ่มเติม 0 ใช้เป็นบิตที่สงวนไว้
ฟังก์ชั่น addevent (obj, evt, fn) {
if (! fn .__ eventId) {fn .__ eventId = eventHandlescounter ++;}
if (! obj .__ eventhandles) {obj .__ eventhandles = []; -
ถ้า (! obj .__ eventhandles [evt]) {
obj .__ eventhandles [evt] = [];
if (obj ["on"+evt] ฟังก์ชั่นอินสแตนซ์ของ) {
obj .__ eventhandles [evt] [0] = obj ["on"+evt];
obj ["on"+evt] = handlevents;
-
-
obj .__ eventhandles [evt] [fn .__ eventid] = fn;
ฟังก์ชั่น handlevents () {
var fns = obj .__ eventhandles [evt];
สำหรับ (var i = 0; i <fns.length; i ++)
fns [i]. call (นี่);
-
-
2. ปรับแต่งการฟังเหตุการณ์ลบ
การคัดลอกรหัสมีดังนี้: ฟังก์ชั่น delevent (obj, evt, fn) {
if (! obj .__ eventhandles ||! obj .__ eventhandles [evt] ||! fn .__ eventid) {
กลับเท็จ;
-
if (obj .__ eventhandles [evt] [fn .__ eventid] == fn) {
ลบ obj .__ eventhandles [evt] [fn .__ eventid];
-
-
3. แก้ไขวิธีข้างต้น
การคัดลอกรหัสมีดังนี้: ฟังก์ชั่น addEvent (obj, evt, fn, usecapture) {
if (obj.addeventListener) {// ที่ต้องการใช้การลงทะเบียนเหตุการณ์ W3C
obj.addeventListener (evt, fn, !! usecapture);
}อื่น{
if (! fn .__ eventId) {fn .__ eventid = addevent .__ eventhandlescounter ++;}
if (! obj .__ eventhandles) {obj .__ eventhandles = [];}
ถ้า (! obj .__ eventhandles [evt]) {
obj .__ eventhandles [evt] = [];
if (obj ["on"+evt]) {
(obj .__ eventhandles [evtype] [0] = obj ["on"+evtype]) .__ eventid = 0;
-
obj ["on"+evtype] = addevent.execeventhandles;
-
-
-
addevent .__ eventhandlescounter = 1;
addevent.execeventhandles = function (evt) {
if (! this .__ eventhandles) {return true;}
evt = evt || window.event;
var fns = this .__ eventhandles [evt.type];
สำหรับ (var i = 0; i <fns.length; i ++) {
if (fns [i] ฟังก์ชันอินสแตนซ์) {
fns [i]. call (นี่);
-
-
-
ฟังก์ชั่น delevent (obj, evt, fn, usecapture) {
if (obj.removeeVentListener) {// ลบตัวจัดการเหตุการณ์ก่อนโดยใช้วิธี W3C
obj.removeeVentListener (evt, fn, !! usecapture);
}อื่น {
ถ้า (obj .__ eventhandles) {
var fns = obj .__ eventhandles [evt];
if (fns) {ลบ fns [fn .__ eventid];}
-
-
4. มาตรฐานวัตถุเหตุการณ์
การคัดลอกรหัสมีดังนี้: ฟังก์ชั่น fixevent (evt) {
if (! evt.target) {
evt.target = evt.srcelement;
evt.preventDefault = fixeVent.PreventDefault;
evt.stoppropagation = fixeVent.stoppropagation;
if (evt.type == "mouseover") {
evt.RelatedTarget = eVt.Fromelement;
} อื่นถ้า (evt.type == "mouseout") {
evt.RelatedTarget = evt.toElement;
-
evt.charcode = (evt.type == "keypress")? evt.keycode: 0;
evt.eventphase = 2;
evt.timestamp = (วันที่ใหม่ ()). getTime ();
-
คืน EVT;
-
fixeVent.preventDefault = function () {this.returnValue = false;}
fixeVent.stopPropagation = function () {this.cancelBubble = true;};
ฟังก์ชั่น FixeVent ไม่ได้ดำเนินการแยกกันมันจะต้องมีพารามิเตอร์วัตถุเหตุการณ์และจะดำเนินการเฉพาะเมื่อเหตุการณ์เกิดขึ้น! วิธีที่ดีที่สุดคือการรวมเข้ากับ ExecEventHandles ของฟังก์ชั่น AddEvent
คัดลอกรหัสดังต่อไปนี้: addEvent.execeVentHandles = function (evt) {// transize ฟังก์ชั่นการจัดการเหตุการณ์ทั้งหมดและดำเนินการ
if (! this .__ eventhandles) {return true;}
evt = fixevent (evt || window.event); // มาตรฐานที่นี่
var fns = this .__ eventhandles [evt.type];
สำหรับ (var i = 0; i <fns.length; i ++) {
if (fns [i] ฟังก์ชันอินสแตนซ์) {
fns [i]. call (this, evt); // และใช้เป็นพารามิเตอร์แรกของฟังก์ชันตัวจัดการเหตุการณ์
// ด้วยวิธีนี้คุณสามารถใช้วิธีการรวมเพื่อเข้าถึงวัตถุเหตุการณ์ภายในฟังก์ชันตัวจัดการเหตุการณ์}}};
ข้างต้นเขียนโดยอาจารย์และต่อไปนี้เป็นตัวอย่างของเหตุการณ์การตรวจสอบจริง
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd html 4.01 transitional // en" >/
<html>
<head>
<title> test6.html </title>
<script type = "text/javascript">
ฟังก์ชั่นทดสอบ () {
window.alert ("คุณโหวตครั้งเดียว");
document.getElementById ("1"). detachevent ("onclick", ทดสอบ);
-
</script>
</head>
<body>
<input type = "button" value = "vote" id = "1"/>
<script type = "text/javascript">
document.getElementById ("1"). attaintEvent ("onclick", ทดสอบ);
</script>
</body>
</html>
ที่นี่ document.getElementById ("1"). แนบ ("onclick", ทดสอบ); ใช้สำหรับการเชื่อมโยงเหตุการณ์แบบไดนามิกและรหัสคัดลอกจะใช้ดังนี้:
document.getElementById ("1"). detachevent ("onclick", ทดสอบ) ยกเลิกเวลาแบบไดนามิกเพื่อให้เหตุการณ์นี้สามารถสอดคล้องกันเพียงครั้งเดียวและจะไม่มีผลกระทบใด ๆ เมื่อคลิกปุ่มนี้ในครั้งต่อไป
ถัดไปการสาธิตเหตุการณ์แป้นพิมพ์อีกครั้งที่ได้รับการตรวจสอบในเวลาที่เหมาะสมเพื่อตรวจสอบว่าอินพุตเป็นตัวเลขหรือไม่ หากไม่ใช่ตัวเลขมันจะได้รับการแจ้งเตือนแบบไดนามิกแล้วปฏิเสธอินพุต
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd html 4.01 transitional // en" >/
<html>
<head>
<title> test7.html </title>
<script type = "text/javascript">
การทดสอบฟังก์ชั่น (เหตุการณ์) {
// ทุกครั้งที่ผู้ใช้กดปุ่มเขาจะพิจารณาว่าเป็นตัวเลข
if (event.keycode <48 || event.keycode> 57) {
window.alert ("คุณกำลังเข้าสู่ตัวเลข");
กลับเท็จ;
-
-
</script>
</head>
<body>
<อินพุต type = "text" onkeypress = "การทดสอบส่งคืน (เหตุการณ์);" /> กรุณากรอกหมายเลข
</body>
</html>
เหตุการณ์ที่นี่เป็นวัตถุเหตุการณ์ซึ่งสามารถส่งคืนข้อมูลจำนวนมาก โปรดดูเอกสารที่เกี่ยวข้องสำหรับรายละเอียด
ภาคผนวก: ความเข้ากันได้ในการตรวจสอบเหตุการณ์
1. IE ใช้วิธีการแนบ/detachevent เพื่อเพิ่มและลบผู้ฟังเหตุการณ์; W3C ใช้วิธี AddEventListener/RemoveEventListener
2. IE ใช้วิธีการตั้งชื่ออย่างมากสำหรับเหตุการณ์ในขณะที่ W3C เป็นวิธีการตั้งชื่อสำหรับเหตุการณ์
3. ผู้ฟังเหตุการณ์ IE ใช้วัตถุเหตุการณ์ทั่วโลกในขณะที่ W3C ผ่านวัตถุเหตุการณ์เป็นพารามิเตอร์ไปยังผู้ฟัง
4. เพื่อหลีกเลี่ยงการทริกเกอร์พฤติกรรมเหตุการณ์เริ่มต้นเช่นวิธีการของ IE คือการกำหนดให้โปรแกรมเมอร์ตั้งค่าคุณสมบัติ ReturnValue ในวัตถุเหตุการณ์เป็นเท็จในขณะที่วิธีการของ W3C คือการดำเนินการวิธี PreventDefault
5. IE ไม่ได้ให้การสนับสนุนขั้นตอนการจับเหตุการณ์
6. ในการหยุดการส่งมอบเหตุการณ์วิธีการของ IE คือการตั้งค่า cancelBubble ของวัตถุเหตุการณ์เป็น TRUE ในขณะที่วิธีการของ W3C คือการตั้งค่าวิธีการหยุดการทำงานของการดำเนินการ
7. IE เรียกฟังเหตุการณ์เป็นฟังก์ชั่นอิสระในขณะที่อยู่ใน W3C เรียกว่าเป็นวิธีวัตถุ ซึ่งหมายความว่าใน IE คำหลักนี้ในเหตุการณ์ผู้ฟังชี้ไปที่วัตถุเหตุการณ์ที่เกิดขึ้น แต่เป็นวัตถุทั่วโลกที่ไร้ประโยชน์ (วัตถุหน้าต่าง)
8. IE มีปัญหาการรั่วไหลของหน่วยความจำในการใช้ผู้ฟังเหตุการณ์ ในเบราว์เซอร์ IE หากคุณต้องการสร้างเหตุการณ์ฟังเหตุการณ์สำหรับองค์ประกอบและใช้องค์ประกอบนั้นในผู้ฟังพื้นที่หน่วยความจำที่ถูกครอบครองโดยผู้ฟังและโหนด DOM ที่เกี่ยวข้องจะไม่ถูกปล่อยออกมาก่อนที่ผู้ใช้จะเข้าสู่หน้าอื่น
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน