Selama proses pengembangan front-end, kita sering menghadapi masalah menambahkan acara ke elemen halaman. Ada juga banyak metode JS untuk menambahkan peristiwa, termasuk ditambahkan langsung ke struktur halaman, dan beberapa metode pemantauan acara JS. Karena setiap browser memiliki mekanisme yang berbeda untuk pemantauan acara gelembung acara, Le Browser hanya memiliki gelembung acara dan tidak ada mekanisme pemantauan acara, dan masalah kompatibilitas mendengarkan acara adalah masalah terbesar:
1. Tulis metode acara secara langsung pada struktur halaman
function eventFun () {//console.log(this); } <input type = "tombol" onclick = "eventFun ()" value = "Tombol"/> // Ini melibatkan masalah ruang lingkup ini. EventFun juga merupakan fungsi global di sini. Objeknya adalah [jendela objek], dan ini menunjuk ke jendela.Untuk mengatasi masalah ruang lingkup ini, Anda dapat menggunakan metode menambahkan variabel acara ke fungsi global, dan meneruskan objek ini sebagai parameter ke fungsi di dalam struktur halaman
<input type = "tombol" onclick = "eventFun2 (this)" value = "button2"/> function eventFun2 (eve) {// Di sini objek acara dilewatkan sebagai parameter ke metode global eve.name = "Alex"; window.name = "robin"; console.log (this); // [jendela objek] console.log (eve); // [objek htmlinputElement] console.log (this.name); // robin console.log (eve.name); // alexvar self = eve; console.log (this.name); // robin console.log (self.name); // alx alert (window.name); waspada (self.name); }2. Menggunakan metode penetapan nilai ke atribut acara adalah metode pengikatan pada peristiwa, tetapi batasan metode ini adalah bahwa ia hanya dapat mengikat satu metode pada peristiwa. Jika beberapa binding terikat, satu metode akan menang.
HtmlelementObject.onClick = fucntion () {// Gunakan metode ini untuk menetapkan nilai ke atribut acara, pointer ini akan menunjuk ke objek jendela, bukan objek peristiwa, jadi metode ini adalah referensi
// js code fun1 (); fun2 (); fun3 (); console.log (this); // window.object} function dosomething () {// js code} htmlelementObject.onClick = dosomething; // Gunakan bentuk ini untuk menetapkan nilai ke atribut objek peristiwa, pointer ini menunjuk ke acara eksekusi acara Console.log (this); // htmlel3. Perbanyakan acara - Bubble and Capture
Standar acara DOM mendefinisikan dua aliran acara, yang secara signifikan berbeda dan mungkin memiliki dampak yang cukup besar pada aplikasi Anda. Dua aliran acara ini ditangkap dan gelembung. Seperti banyak teknologi web, Netscape dan Microsoft mengimplementasikannya secara berbeda sebelum menjadi standar. Netscape memilih untuk mengimplementasikan aliran acara Capture, sementara Microsoft menerapkan aliran acara gelembung. Untungnya, W3C memutuskan untuk menggunakan kedua metode dalam kombinasi, dan sebagian besar browser baru mengikuti dua metode streaming acara ini.
Secara default, acara menggunakan aliran acara gelembung, dan tidak ada aliran event capture yang digunakan. Namun, di Firefox dan Safari, Anda dapat secara eksplisit menentukan penggunaan aliran event capture dengan menyerahkan parameter Usecapture saat mendaftarkan acara dan mengatur parameter ini ke True.
Aliran Acara Gelembung
Ketika suatu peristiwa dipicu pada elemen DOM, misalnya, pengguna mengklik mouse pada node nama klien, acara akan mengikuti berbagai node induk yang diwarisi dari mana simpul menggelembung melalui seluruh hierarki node DOM hingga menemukan simpul yang dilampirkan pada prosesor jenis acara. Pada saat ini, acara tersebut adalah acara OnClick. Gelembung peristiwa dapat diakhiri kapan saja selama proses menggelegak. Di browser yang mematuhi standar W3C, Anda dapat menghubungi metode stoppropagation () pada objek acara, dan di Internet Explorer, Anda dapat mengatur atribut BatalBubble dari objek acara ke True. Jika acara tidak dihentikan, acara akan menggelembung melalui DOM sampai mencapai akar dokumen.
Capture Event Flow
Pemrosesan acara dimulai pada akar tingkat DOM, bukan dari elemen target yang memicu acara, dan acara tersebut diturunkan secara berurutan dari semua elemen leluhur dari elemen target. Dalam proses ini, peristiwa ditangkap oleh berbagai elemen turunan yang diwariskan dari root dokumen ke elemen target acara. Jika pendengar acara menetapkan atribut Usecapture ke True saat terdaftar, mereka dapat ditugaskan ke elemen apa pun selama periode ini untuk menangani acara; Kalau tidak, peristiwa akan diteruskan ke elemen berikutnya pada jalur elemen yang diturunkan sampai elemen target. Setelah acara mencapai elemen target, kemudian akan menggelembung melalui simpul DOM.
Metode pengikatan acara modern
Untuk pelajaran sebelumnya, menggunakan ikatan acara tradisional memiliki banyak kelemahan, seperti ketidakmampuan untuk mendaftarkan beberapa penangan acara pada acara yang sama dari suatu objek. Dan browser dan W3C bukan tanpa mempertimbangkan hal ini, jadi di browser modern, mereka memiliki metode sendiri untuk mengikat peristiwa.
W3C DOM
OBJ.AddeventListener (EvType, FN, Usecapture) - W3C menyediakan metode untuk menambahkan fungsi penanganan acara. OBJ adalah objek untuk menambahkan peristiwa, evType adalah jenis acara, tanpa awalan, FN adalah fungsi event handler, jika usecapture benar, fungsi event handler dieksekusi dalam tahap penangkapan, jika tidak ia dieksekusi dalam tahap gelembung
OBJ.RemoveEventListener (EvType, FN, Usecapture)-W3C menyediakan metode untuk menghapus fungsi penanganan acara
Metode Microsoft IE
OBJ.AttachEvent (EVTYPE, FN) - Metode yang disediakan oleh IE untuk menambahkan fungsi penanganan acara. OBJ adalah objek untuk menambahkan acara, evType adalah jenis acara, dengan awalan, FN adalah fungsi event handler, yaitu tidak mendukung event capture
obj.detachevent (evType, fn,) - IE menyediakan metode untuk menghapus fungsi penanganan acara, evType berisi pada awalan
Cara untuk mengintegrasikan keduanya
fungsi addevent (obj, evType, fn, usecapture) {if (obj.addeventListener) {obj.addeventListener (evType, fn, usecapture); } else { obj.attachEvent("on"+evtype,fn);//IE does not support event capture} else { obj["on"+evtype]=fn;//In fact, this situation will not exist} } function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) { obj.removeeventlistener (evtype, fn, usecapture); } else {obj.detachevent ("on"+evType, fn); } else {obj ["on"+evType] = null; }}Ada masalah dengan metode pemasangan IE, yaitu ketika menggunakan lampiran, ini menunjuk ke jendela, bukan obj! Tentu saja, ada solusi untuk ini!
Tetapi ada masalah lain dengan metode lampiran IE. Fungsi yang sama dapat didaftarkan dengan objek yang sama dan peristiwa yang sama beberapa kali. Solusi: Abandon IE's AttachmentEvent Metode! Metode lampiran di bawah IE tidak mendukung penangkapan, yang tidak jauh berbeda dari pendaftaran peristiwa tradisional (kecuali untuk mengikat beberapa penangan acara), dan metode lampiran IE lampiran memiliki masalah kebocoran memori!
Addevent, versi modern delevent
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<title> JS Listening event </title> <tabel> TAGA {font: 12px: JS; Border-Bottom: 1px solid #efefefef;} </tyle> </head> <body> <div id = "outele" style = "padding: 10px; perbatasan: 1px solid #b2b2b2; latar belakang: #efefefefef;"> <input type = "kancing" ontlick = "eventfun ()" nilai "" nilai "" nilai "<putput =" kancing /kancing "uctclick =" evenfun () "ID =" " OnClick = "EventFun2 (This);" ID = "Button2" value = "Button2" /> <br /> <input type = "button" id = "button3" value = "button3" /> <br /> <input type = "tombol" id = "button4" value = "button4" /> <br /> <table id = "htmleletable" style = "boature: 1px #b2 id = "1111"> <td> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 id = "33333333333333333333333333333333333333 </td> </tr> <tr id = "44444"> <td> 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 <TR ID = "55555555555555555555555555 </td> </tr> </able> </div> <bahasa skrip =" JavaScript "type =" Text/JavaScript "> Fungsi Evenfun () {// 1. Langsung tulis metode JS pada konsol struktur halaman.log (ini); // Ini melibatkan masalah dengan ruang lingkup ini. EventFun adalah fungsi global, objeknya adalah jendela, dan ini menunjuk ke peringatan jendela (ini); } function eventFun2 (eve) {// Di sini lulus objek acara sebagai parameter ke metode global eve.name = "Alex"; // window.name = "robin"; console.log (this); // [jendela objek] console.log (eve); // [objek htmlinputeLement] console.log (this.name); // robin console.log (eve.name); // alex var self = eve; console.log (this.name); // robin console.log (self.name); // alx alert (window.name); waspada (self.name); } function eventFun3 () {// 1. Langsung tulis metode JS pada konsol struktur halaman.log (ini); // Ini melibatkan masalah ruang lingkup ini. EventFun adalah fungsi global, objeknya adalah jendela, dan ini menunjuk ke window console.log (this.id); waspada (ini); waspada (ini); waspada (this.id); // var outeleobj = eventutil. $ ("outele"); // lepas (outeleobj, "klik", eventFun3); } /* var eventutil = {}; Eventutil. $ = Function (id) {return document.getElementById (id); } Eventutil.openmes = eventFun3; Eventutil.addeventhandle = function (EventTarget, EventType, EventHandle) {// Tentukan elemen objek, jenis acara untuk mendengarkan acara, fungsi acara jika (eventTarget.attachevent) {eventTarget.attachevent ("on"+eventType, eventhandle); } else if (eventTarget.addeventListener) {eventTarget.addeventListener (eventType, eventhandle, false)} else {eventTarget ["on" + eventType] = null; }}; EventUtil.Deleeventhandle = function (EventTarget, EventType, EventHandle) {// Tentukan elemen objek, jenis acara untuk mendengarkan acara, fungsi acara if (eventTarget.DetACHEVENT) {alert ("on"+eventType); alert ("on"+EventHandle); EventTarget.DetachEvent ("On"+EventType, EventHandle); } else if (eventTarget.removeEventListener) {eventTarget.removeEventListener (eventType, eventhandle, false)} else {eventTarget ["on" + eventType] = null; }};*/ var eventUtil = {$: function (id) {return document.getElementById (id); }, but4fun: function () {console.log (ini); this.addeventhandle (); }, eventFun3: function () {console.log (this); waspada (ini); delevent (obj, evtype, fn, usecapture); }} /*** Gunakan AddEventListener, lampiran untuk fungsi mendengarkan addevent (obj, evType, fn, usecapture) {if (obj.addeventListener) {obj.addeventListener (evType, fn, usecapture); } lain jika (obj.attachevent) {obj.attachevent ("on"+evType, function () {fn.call (obj);}); } else {obj ["on"+evType] = fn; // Faktanya, situasi ini tidak akan ada}} function delevent (obj, evType, fn, usecapture) {if (obj.removeEventListener) {obj.removeEventener (evType, fn, usecapture) {obj.removeEventener (evType, fn, Usecapture) } lain jika (obj.detachevent) {obj.detachevent ("on"+evType, fn); } else {obj ["on"+evType] = null; }} fungsi addEvent (obj, evType, fn, usecapture) {if (obj.addeventListener) {// prioritas diberikan kepada skema pendaftaran acara W3C obj.addeventListener (evType, fn, !! usecapture); } else {// Ketika AddEventListener tidak didukung (yaitu), karena IE tidak mendukung penangkapan pada saat yang sama, lebih baik menggunakan ikatan acara tradisional jika (! fn .__ eventId) {fn .__ eventId = addevent .__ eventhandlescounter ++;} // Tetapkan ID unik untuk setiap acara Handler. {obj .__ eventhandles = {};} // _ Atribut Eventhandles digunakan untuk menyimpan referensi ke semua penangan acara // diklasifikasikan berdasarkan jenis acara jika (! Obj .__ Eventhandles [evType]) {// pada pertama kali acara terdaftar OBJ .__ EventHandles [evType] = {}; if (obj ["on"+evType]) {// Fungsi penanganan acara telah terdaftar dengan cara tradisional sebelumnya (obj .__ Eventhandles [evType] [0] = obj ["on"+evType]) .__ eventId = 0; // tambahkan ke 0 bits // dan tambahkan id ke fungsi handling}}}}}}}}}}}}}}} dan tambahkan evt. // Ketika suatu peristiwa terjadi, execeventhandles melintasi tabel obj .__ evlemhandles [evType] dan menjalankan fungsi di dalamnya}}}} addevent .__ eventhandlescounter = 1; // counter, 0 bit cadangan dengan addevent.execeventhandles function (evt) {// tronquility {{evtl lles EVT = EVT || window.event; var fns = ini .__ Eventhandles [evt.type]; untuk (var i di fns) {fns [i] .call (ini); }}; /* fungsi delevent (obj, evType, fn, usecapture) {if (obj.removeeventlistener) {// pertama -tama gunakan metode w3c untuk menghapus fungsi pawang event obj.removeeventlistener (evType, fn, !! usecapture); } else {if (obj .__ eventhandles) {var fns = obj .__ eventhandles [evType]; if (fns) {delete fns [fn .__ eventId];}}}}} fungsi fixevent (evt) {// fungsi fixEvent tidak dijalankan secara terpisah. Itu harus memiliki parameter objek acara, dan itu akan dieksekusi hanya ketika peristiwa terjadi! Cara terbaik adalah mengintegrasikannya ke dalam execEventHandles dari fungsi addEvent if (! Evt.target) {evt.target = evt.srcelement; evt.preventDefault = fixevent.preventdefault; evt.stoppropagation = fixevent.stoppropagation; if (evt.type == "mouseOver") {evt.relatedTarget = evt.fromElement; } else if (evt.type == "mouseout") {evt.relatedTarget = evt.toElement; } evt.charcode = (evt.type == "keypress")? evt.keycode: 0; EVT.EventPhase = 2; // IE hanya berfungsi dalam tahap gelembung evt.Timestamp = (tanggal baru ()). getTime (); // Setel hanya ke waktu saat ini} return evt; } fixeVent.preventDefault = function () {this.returnValue = false; // Ini di sini menunjuk pada objek peristiwa tertentu, bukan fixevent}; fixevent.stoppropagation = function () {this.cancelbubble = true; };*///console.log(eventutil.$("Button3") ;///return atribut objek dari fungsi Eventutil //eventutil.$("Button3").onClick= EventFun; // 2. Gunakan metode penetapan nilai ke atribut acara objek untuk mewujudkan mendengarkan peristiwa //eventutil.$("button3"). = function () {function getById (id) {return document.getElementById (id); }; // written by Dean Edwards, 2005 // with input from Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else {// Tetapkan setiap penangan acara ID unik jika (! Handler. $$ GUID) Handler. $$ GUID = ADDEVENT.GUID ++; // Buat tabel hash jenis acara untuk elemen if (! element.events) element.events = {}; // Buat tabel hash penangan acara untuk setiap elemen/pair event var handlers = element.events [type]; if (! handlers) {handlers = element.events [type] = {}; // Simpan event handler yang ada (jika ada) if (elemen ["on" + type]) {handlers [0] = elemen ["on" + type]; }} // Simpan event handler di penangan tabel hash [handler. $$ guid] = handler; // Tetapkan pawang acara global untuk melakukan semua elemen kerja ["on" + type] = handleEvent; }}; // penghitung yang digunakan untuk membuat ID unik addevent.guid = 1; fungsi lepas (elemen, type, handler) {if (element.removeEventListener) {element.removeEventListener (type, handler, false); } else {// hapus event handler dari tabel hash if (element.events && element.events [type]) {delete element.events [type] [handler. $$ guid]; }}}; function handleevent (event) {var returnValue = true; // ambil objek acara (yaitu menggunakan objek acara global) Event = Event || fixEvent (((this.OwnerDocument || this.document || this) .parentWindow || window) .event); // Dapatkan referensi ke tabel hash event handlers var handlers = this.events [event.type]; // Jalankan setiap penangan acara untuk (var i in handlers) {this. $$ handleevent = handlers [i]; if (this. $$ handleevent (event) === false) {returnValue = false; }} returnValue return; }; Function FixEvent (Event) {// Tambahkan W3C Metode Acara Standar Event.preventDefault = fixEvent.PreventDefault; event.stoppropagation = fixevent.stoppropagation; acara kembali; }; fixeVent.preventDefault = function () {this.returnValue = false; }; fixevent.stoppropagation = function () {this.cancelbubble = true; }; function tableaddevent () {}; return {add: addEvent, rontact: removeEvent, $: getById}} (); var outeleobj = eventutil. $ ("outele"); //addevent.Apply(Eventutil ,$Outeleobj ,"Click ", EventFun3]); //Eventutil.add(outeleobj ,"click",eventfun3); var inputObj = eventutil. $ ("button4"); var tableele = eventutil. $ ("htmleletable"); var tabtrele = tableele.geteLementsByTagname ("tr"); Eventutil.add (Tableele, "Click", EventFun3); untuk (i = 0; i <tabtrele.length; i ++) {eventutil.add (tabtrele [i], "klik", eventFun3); } Eventutil.remove (Tableele, "Click", EventFun3); // Metode Penghapusan Acara Eventutil.add (Tableele, "Klik", EventFun3); // Eventutil.add (InputObj, "Click", EventFun3); //Eventutil.remove(outeleobj ,"click",eventfun3); //Console.log(addevent); // addEvent (inputObj, "klik", eventFun3, true); // delevent (outeleobj, "klik", eventFun3, false); </script> </body> </html>PS: Di sini kami memberi Anda alat online tentang acara JS, yang merangkum jenis acara yang umum digunakan dan fungsi fungsi JS:
Daftar lengkap acara dan fungsi JavaScript:
http://tools.vevb.com/table/javascript_event