Menerapkan metode hidup dan mati yang sederhana
memperkenalkan:
Objek acara:
funchcist: {}, // simpan metode yang terikat oleh delegasi
IEFUNCLIST: {} // Simpan metode pengikatan di bawah IE
Metode hidup dan mati dalam objek acara terutama disebut
Event.addevent, Event.DelegateHandle Metode
Event.addevent: Hubungi AddeventListener yang mendasarinya untuk menambahkan acara mendengarkan
Event.delegateHandle: Ketika suatu peristiwa terjadi, ketika peristiwa menggelembung, tentukan elemen dari delegasi acara, dan jalankan fungsi callback yang sesuai.
AddEvent / Offevent:
obj.addeventlistener (tipe, fn, false);
obj.removeeventlistener (tipe, fn, false);
Kode - Event.js
/** * AddEvent * Penulis [email protected] */window.event = {}; var event = {funclist: {}, // Simpan metode yang terikat untuk mendelegasikan iefunclist: {}, // karena metode ini tersimpan di bawah IE di: function (obj, tipe,, fn) {fale) {if! var fnnew = event.delegateHandle (obj, pemilih, fn); Event.addevent (obj, type, fnnew); /* Simpan metode terikat ke event.funclist untuk operasi yang tidak mengikat nanti*/ if (! Event.funclist [selector]) {event.funclist [selector] = {}; } if (! event.funclist [selector] [type]) {event.funclist [selector] [type] = {}; } Event.funclist [selector] [type] [fn] = fnnew; }, off: function (obj, selector, type, fn) {if (! obj ||! selector ||! event.funclist [selector]) {return false; } var fnnew = event.funclist [selector] [type] [fn]; if (! fnnew) {return; } Event.offevent (obj, type, fnnew); Event.funclist [pemilih] [type] [fn] = null; }, DelegateHandle: function (obj, selector, fn) { /* Implementasikan metode konversi delegasi. Fungsi callback akan dieksekusi hanya ketika acara menggelembung dan naik. */ var func = function (event) {var event = event || window.event; var target = event.srcelement || event.target; var induk = target; Fungsi berisi (item, elmname) {if (elmname.split ('#') [1]) {// oleh id if (item.id && item.id === elmname.split ('#') [1]) {return true; }} if (elmname.split ('.') [1]) {// by class if (hasclass (item, elmname.split ('.') [1])) {return true; }} if (item.tagname == elmname.touppercase ()) {return true; // oleh tagname} return false; } while (Parent) { /* Jika elemen yang dipicu adalah anak dari elemen (pemilih). */ if (obj == induk) {return false; // elemen pemicu itu sendiri} if (contile (induk, pemilih)) {fn.call (obj, peristiwa); kembali; } Parent = Parent.ParentNode; }}; return func; }, addEvent: function (target, type, fn) {if (! target) return false; var add = function (obj) {if (obj.addeventListener) {obj.addeventListener (type, fn, false); } else {// untuk yaitu if (! event.iefunclist [obj]) event.iefunclist [obj] = {}; if (! event.iefunclist [obj] [type]) event.iefunclist [obj] [type] = {}; Event.iefunclist [obj] [type] [fn] = function () {fn.Apply (obj, argumen); }; obj.attachevent ("on" + type, event.iefunclist [obj] [type] [fn]); }} if (target.length> = 0 && target! == window &&! target.tagname) {for (var i = 0, l = target.length; i <l; i ++) {add (target [i])}} else {add (target); }}, offevent: function (target, type, fn) {if (! target) return false; var Remove = function (obj) {if (obj.addeventListener) {obj.removeEventListener (type, fn, false); } else {// untuk yaitu if (! event.iefunclist [obj] ||! event.iefunclist [obj] [type] ||! event.iefunclist [obj] [type] [fn]) {return; } obj.detachevent ("on" + type, event.iefunclist [obj] [type] [fn], false); Event.iefunclist [obj] [type] [fn] = {}; }} if (target.length> = 0 && target! == window &&! target.tagname) {for (var i = 0, l = target.length; i <l; i ++) {hapus (target [i])}} else {rampa (target); }},};
Kode - demo.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> tes </itement> </head> <body> <p> Event </p> <v ID = Content> <ul> <li> <buton id = "btn1"> </tombol> </buttion> </Li> <li> <Li> <buton id = "btn1"> </button> </buttion> </Li> <li> <li> <Li> <buton id = "btn1"> </button> </li> <li> <li> <Li> <buton id = "btn1"> </tombol> </li> <li> <li> <li> id = "btn3"> 3 </button> </li> <li> <tombol id = "btn4"> 4 </button> </li> <li> <tombol id = "btn5"> 5 </button> </li> </ul> <tombol id = "unbind"> unbinding </butt> </div> </ul> <knel = "TEKP"> PRIPT "> BUPTER </TOMBOT> </Div> </div> </pup. src = "addEvent.js"> </script> <script> (function () {/* demo demo*/var $ id = function (id) {return document.getElementById (id) || id;} var outer = $ id ("content"), btn = $ id ("text"); event.on (outer, 'kancing "), btn = $ ID (" TEXT "); event.on (outer,' kancing", "catton", "Teks"); event.on (outer, 'outer,' outer, 'outer,' outer, 'outter,' outter, 'outter,' outter, ' Event.on (Outer, 'Unbind', "klik", hapus); var Target = E.Srcelement || E.Target; }}) (); </script> </body> </html>