Perbincangan ringkas tentang prinsip jQuery event binding_jquery

Terdapat kaedah data dalam jq, yang mengikat data yang berkaitan dengan elemen DOM. Apabila acara terikat pada dom menggunakan kaedah jq, senarai masa yang sepadan akan dihasilkan Anda boleh melihat contoh berikut (sila lihat dalam firefox kerana objek dalam firefox menyokong kepadaSource())

Salin kod Kod adalah seperti berikut: http://common.cnblogs.com/script/jquery.js"> > window.onload = function(){ alert($.data($('#test')[0],'events'));//null alert($.data($('#test')[0],'handle'));//null $('#test') .bind('klik',function(){ makluman(1) }) .bind('mouseover',function(){ makluman(2) }) .bind('klik',function(){ makluman(3) }) .bind('klik',function(){ makluman(4) }) alert($.data($('#test')[0],'events').toSource());//Senarai masa alert($.data($('#test')[0],'handle').toSource());//Fungsi yang dilaksanakan }

data digunakan untuk mengikat data kepada elemen Sumber data ialah objek cache Apabila elemen terikat pada data, atribut jQueryxxx akan ditambahkan pada elemen xxx ialah cap masa untuk melaksanakan jq Biar saya jelaskan di sini, terdapat uuid yang terkumpul Nilai jQueryxxx ialah uuid ini Kunci cache ialah uuid ini nilai ialah data yang akan disimpan Data sangat penting untuk mengikat peristiwa........................

Salin kod Kod adalah seperti berikut: berfungsi sekarang(){ kembalikan Tarikh baharu; }; var win = ini, expando = "jQuery" sekarang(), uuid = 0, cache = {}; win.data = fungsi(elemen, nama, data){ var id = elem[expando]; jika(!id) id = elem[expando] = uuid; if(nama&&!cache[id]) cache[id] = {}; if(data !== undefined) cache[id][name] = data; kembalikan nama ? cache[id][name] : id; } win.removeData = fungsi(elemen, nama){ var id = elem[expando]; jika (nama){ jika (cache[id]) { padam cache[id][nama]; nama = ""; untuk ( nama dalam cache[ id ] ) pecah; jika ( !nama ) removeData(elemen); } }lain{ cuba { padam elem[expando]; } tangkap(e){ jika ( elem.removeAttribute ) elem.removeAttribute( expando ); } padam cache[id]; } } win.each = fungsi( objek, panggil balik, args ) { nama var, i = 0, panjang = objek.panjang; jika ( args ) { jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.apply( object[ name ], args ) === false ) pecah; } lain untuk ( ; i if ( callback.apply( object[ i ], args ) === false ) pecah; } lain { jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) pecah; } lain untuk ( nilai var = objek[0]; i } objek kembali; }

Kemudian laksanakan penambahan acara

Dalam jq ialah kaedah tambah dalam jQuery.event Beberapa fungsi dilaksanakan dalam kaedah tambah Dapatkan peristiwa elemen dan kendalikan data yang terikat pada dua data ini acara menyimpan senarai acara Formatnya adalah seperti berikut { klik: [{handler:function(){},type:"click",guid:'xx'}.....], tetikus:[...] } pemegang ialah fungsi yang dilaksanakan (Semua fungsi pelaksanaan adalah sama. Mereka melintasi senarai acara dan melaksanakan acara yang sepadan) Kemudian lintasi jenis kerana berbilang acara boleh diikat Fungsi panggil balik juga akan memberikan beberapa atribut Andaikan fungsi panggil balik ialah pengendali handler.guid = gevent.guid handler.type = nama nama harus dianggap sebagai nama khas untuk pemadaman mudah Contohnya $('#xx') .bind('klik',function(){}) .bind('click.d',pengendali) Namanya d Apabila memadam, anda hanya boleh memadamkan acara d tanpa memadamkan acara klik di atas

Akhirnya, acara terikat pada elemen, tetapi fungsi yang dilaksanakan adalah semua fungsi(){ gevent.handle.apply(arguments.callee.elem, arguments); });

Salin kod Kod adalah seperti berikut: win.gevent = { panduan: 1, Tambah : fungsi (elemen, jenis, pengendali){ Jika (elem.nodeType == 3 || elem.nodeType == 8) kembali; jika ( elem.setInterval && elem != window ) elem = tingkap; //Berikan fungsi indeks unik untuk memudahkan pemadaman acara kemudian jika ( !pengendali.panduan ) handler.guid = this.guid; //Dapatkan data di bawah pemegang acara elemen var peristiwa = data(elemen, "acara") || pemegang =data(elem, "handle") || data(elem, "handle", function(){ //gevent.handle ialah fungsi yang akan dilaksanakan selepas pelbagai gelagat dicetuskan gevent.handle.apply(arguments.callee.elem, arguments); }); pemegang.elem = elem; //Lintas nama acara kerana ia boleh klik tetikus Setiap(jenis.split(/s /), fungsi(indeks, jenis) { ruang nama var = type.split("."); //Dapatkan nama acara jenis = namespaces.shift(); //Alih keluar benda itu selepas titik Ia adalah nama khas Apabila memadam, anda boleh menentukan untuk memadamkannya, seperti klik.d //Gunakan jenis acara untuk merekodkan nama istimewa ini pengendali.jenis = ruang nama.slice().sort().join("."); //Dapatkan sama ada acara sudah wujud dalam objek acara pengendali var = acara[jenis]; //Jika peristiwa itu tidak wujud, ikat peristiwa itu kepada elemen jika (!pengendali) { pengendali = acara[jenis] = {}; Jika (elem.addEventListener) elem.addEventListener(jenis, pemegang, palsu); jika tidak (elem.attachEvent) elem.attachEvent("on" type, handle); } //Letakkan fungsi ke dalam senarai acara elemen pengendali[handler.guid] = pengendali; }); elem = null; } }

gevent.hander ialah fungsi yang sebenarnya dilaksanakan oleh acara terikat Terdapat juga tempat untuk penamaan khas dalam gevent.hander, tetapi saya tidak tahu untuk apa ia digunakan Acara ini pertama kali dibungkus dalam pengendali Untuk pembungkusan lihat gevent.fix dan setEvent Perkara utama ialah membuat salinan acara asli dan kemudian menggabungkan kaedah yang tidak serasi menjadi tulisan yang serasi Kemudian dapatkan acara (senarai acara) elemen Kemudian lintasi senarai acara untuk menentukan sama ada jenis adalah kunci senarai acara Jika ya, laksanakan acara Nilai pulangan akan dinilai apabila melaksanakan fungsi senarai Jika anda mengembalikan palsu, anda juga boleh mengatur acara menggelegak dan gelagat lalai

Salin kod Kod adalah seperti berikut: win.gevent = { pemegang : fungsi(acara){ var semua, pengendali; //Acara pembungkusan acara = argumen[0] = gevent.fix( acara || window.event ); event.currentTarget = ini; //Di sini... var ruang nama = event.type.split("."); event.type = namespaces.shift(); semua = !namespaces.length; var namespace = RegExp("(^|\.)" namespaces.slice().sort().join(".*\.") "( \.|$ )"); //Dapatkan senarai acara bagi kelakuan elemen ini pengendali = (data(ini, "acara") || {} )[event.type]; //Lintas senarai acara ini dan laksanakan perkara yang akan dilaksanakan untuk ( var j dalam pengendali ) { pengendali var = pengendali[j]; Jika ( semua || ruang nama.test(pengendali.jenis) ) { // Hantarkan rujukan kepada fungsi pengendali itu sendiri // Supaya kita boleh mengeluarkannya kemudian // Komen pada jq ditulis seperti ini Rujuk pengendali acara kepada acara ini untuk kemudahan dan alih keluarnya kemudian // Tetapi dalam pengalihan keluar, pengendali acara tidak digunakan di sini Dan apabila terdapat beberapa acara, acara ini digantikan acara.pengendali = pengendali; //Laksanakan acara dan ia adalah acara yang dipanggil dengan elemen Anda boleh melaksanakan elemen ini dalam acara dan ret ialah nilai pulangan bagi fungsi var ret = handler.apply(this, arguments); //Jika terdapat nilai pulangan dan nilai pulangan adalah palsu, pelaksanaan menghalang acara daripada menggelegak dan tingkah laku lalai acara pelaksanaan disekat Jika( ret !== undefined ){ acara. keputusan = ret; Jika ( ret === false ) { acara.preventDefault(); acara.stopPropagation(); } } }, props: "altKey attrChange attrName buih butang boleh dibatalkan charCode clientX clientY ctrlKey currentPeristiwa butiran data sasaranFasa daripada kunci pengendali ElemenKod metaKey newValue asalSasaran halamanX halamanY prevValue berkaitanNod berkaitan Skrin sasaranX skrinY shiftKey srcElement yang "sasaran Elemen ke Elemen yang mana" . Betulkan : fungsi(acara){ //new setEvent akan memberikan acara itu atribut expando Jika terdapat mana-mana atribut, ini bermakna acara itu telah dijana dan tidak perlu membungkus acara itu lagi jika ( acara [expando] ) acara pemulangan; //Kekalkan acara asal // baharu Acara baharu Ini berbeza daripada acara asal var originalEvent = acara; acara = setEvent baharu(originalEvent); //Dapatkan nilai atribut acara asal Apakah nilai atribut yang ada. Lihat ini untuk ( var i = this.props.length, prop; i; ){ prop = this.props[ --i ]; acara[ prop ] = originalEvent[ prop ]; } //Satukan elemen sasaran menjadi acara.sasaran Jika ( !event.target ) event.target = event.srcElement || document; // Pembetulan #1925 di mana srcElement mungkin tidak ditakrifkan sama ada //Jika ia didapati sebagai nod teks, dapatkan nod induknya Jika ( event.target.nodeType == 3 ) event.target = event.target.parentNode; Jika ( !event.relatedTarget && event.fromElement ) event.relatedTarget = event.fromElement == event.target ? acara pemulangan; } win.setEvent = fungsi(src){ // Benarkan instantiasi tanpa kata kunci 'baharu' // Objek acara Jika( src && src.type ){ This.originalEvent = src; This.type = src.type; // Jenis acara }lain This.type = src; // timeStamp adalah buggy untuk beberapa acara di Firefox(#3843) // Jadi kami tidak akan bergantung pada nilai asli This.timeStamp = sekarang(); // Tandai sebagai tetap Ini[expando] = benar; } fungsi returnFalse(){ Kembalikan palsu; } fungsi returnTrue(){ kembali benar; } setEvent.prototype = { preventDefault: function() { var e = this.originalEvent; Jika( !e ) kembali; // jika preventDefault wujud jalankannya pada acara asal Jika (e.preventDefault) e.preventDefault(); // sebaliknya tetapkan sifat returnValue acara asal kepada false (IE) e.returnValue = palsu; }, stopPropagation: function() { var e = this.originalEvent; Jika( !e ) kembali; // jika stopPropagation wujud jalankannya pada acara asal Jika (e.stopPropagation) e.stopPropagation(); // sebaliknya tetapkan sifat cancelBubble acara asal kepada benar (IE) e.cancelBubble = benar; }, stopImmediatePropagation:function(){ This.isImmediatePropagationStopped = returnTrue; This.stopPropagation(); }, isImmediatePropagationStopped: returnFalse };

Contoh lengkap

Salin kod Kod adalah seperti berikut: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> (fungsi(doc,undefined){ berfungsi sekarang(){ kembalikan Tarikh baharu; }; var win = ini, expando = "jQuery" sekarang(), uuid = 0, cache = {}; win.data = fungsi(elemen, nama, data){ var id = elem[expando]; jika(!id) id = elem[expando] = uuid; if(nama&&!cache[id]) cache[id] = {}; if(data !== undefined) cache[id][name] = data; kembalikan nama ? cache[id][name] : id; } win.removeData = fungsi(elemen, nama){ var id = elem[expando]; jika (nama){ jika (cache[id]) { padamkan cache[id][nama]; nama = ""; untuk ( nama dalam cache[ id ] ) rehat; jika ( !nama ) removeData(elem); } }lain{ cuba { padam elem[expando]; } tangkap(e){ jika ( elem.removeAttribute ) elem.removeAttribute( expando ); } padamkan cache[id]; } } win.each = fungsi( objek, panggil balik, args ) { nama var, i = 0, panjang = objek.panjang; jika ( args ) { jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.apply( object[ name ], args ) === false ) rehat; } lain untuk ( ; i if ( callback.apply( object[ i ], args ) === false ) rehat; } lain { jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) rehat; } lain untuk ( nilai var = objek[0]; i } kembalikan objek; } win.gevent = { panduan : 1, tambah : fungsi (elemen, jenis, pengendali){ jika ( elem.nodeType == 3 || elem.nodeType == 8 ) kembali; jika ( elem.setInterval && elem != window ) elem = tingkap; //给函数一个唯一标识的索引 方便后面删除该事件 jika ( !pengendali.panduan ) handler.guid = this.guid ; //获得该元素的events mengendalikan 下的数据 var peristiwa = data(elem, "peristiwa") || data(elemen, "acara", {}), handle =data(elem, "handle") || data(elem, "pemegang", fungsi(){ //gevent.handle才是各种行为触发后会执行的函数 gevent.handle.apply(arguments.callee.elem, arguments); }); handle.elem = elem; //遍历事件名 因为可以是 klik tetikus setiap(jenis.split(/s /), fungsi(indeks, jenis) { var namespaces = type.split("."); //获得事件名 type = namespaces.shift(); //去掉点后面的东西 是个特殊的命名 在删除的时候可以指定删除他 如 click.d //用事件的type 记录住这个特殊的命名 handler.type = namespaces.slice().sort().join("."); //获得该事件是否已经存在events 这个对象里面了 pengendali var = acara[jenis]; //如果不存在该事件 给元素绑定该事件 jika (!pengendali) { pengendali = acara[jenis] = {}; jika (elem.addEventListener) elem.addEventListener(jenis, pemegang, palsu); else if (elem.attachEvent) elem.attachEvent("on" type, handle); } //吧函数放到元素的该事件的列表里面 pengendali[handler.guid] = pengendali; }); elem = null; }, alih keluar: fungsi(elemen, jenis, pengendali) { jika ( elem.nodeType == 3 || elem.nodeType == 8 ) kembali; //获取这个元素的所有行为列表 如 {klik:{},mouseocer:{}} var peristiwa = data(elem, "peristiwa"), ret, indeks; jika(peristiwa){ //如果没出入行为类型 则删除这个元素的所有事件 //如果传入的是.xx这种形式的 把所有行为的包含.xx命名的全部干掉 if ( types === undefined || (typeof types === "string" && types.charAt(0) == ".") ){ untuk ( var jenis dalam acara ) this.remove( elem, type (types || "") ); }lain{ //不知道干嘛的 jika ( jenis.jenis ) { pengendali = jenis.pengendali; jenis = jenis.jenis; } //因为删除事件可以一次支持删除多个 如klik mouseover 所有要遍历删除 setiap(jenis.split(/s /),fungsi(indeks, jenis){ var namespaces = type.split("."); type = namespaces.shift(); var namespace = RegExp("(^|\.)" namespaces.slice().sort().join(".*\.") "( \.|$ )"); jika ( peristiwa[jenis] ) { //如果传了第3个参数 函数 则删除这个事件 jika ( pengendali ) padamkan acara[type][handler.guid]; lain{ //遍历中个这个的所有行为 untuk ( pemegang var dalam acara[jenis] ){ // Mengendalikan pengalihan keluar acara ruang nama //删除有特殊命名的函数 //Jika tiada nama khas, ungkapan biasa ialah /^|..|$/, yang boleh dipadankan dengan kosong, jadi fungsi tanpa nama khas juga boleh dipadamkan jika ( namespace.test(events[type][handle].type) ) padamkan acara[type][handle]; } } } untuk ( ret dalam acara[jenis] ) rehat; //Jika peristiwa[jenis] menjadi kosong, iaitu, {} padamkan peristiwa pengikatan elemen ini jika ( !ret ) { jika (elem.removeEventListener) elem.removeEventListener(jenis, data(elem, "pemegang"), palsu); else if (elem.detachEvent) elem.detachEvent("on" type, data(elem, "handle")); ret = null; padamkan acara[jenis]; } }); } untuk ( ret dalam acara ) rehat; //Jika didapati semua peristiwa unsur adalah kosong //Kosongkan pemegang dan kosongkan semua rujukannya jika ( !ret ) { var handle = data( elem, "handle" ); if ( handle ) handle.elem = null; removeData( elem, "events" ); removeData( elem, "pemegang" ); } } }, pemegang: fungsi(acara){ var semua, pengendali; //Acara pembungkusan acara = argumen[0] = gevent.fix( acara || window.event ); event.currentTarget = ini; //Sini...... var namespaces = event.type.split("."); event.type = namespaces.shift(); semua = !namespaces.length; var namespace = RegExp("(^|\.)" namespaces.slice().sort().join(".*\.") "( \.|$ )"); //Dapatkan senarai acara bagi kelakuan elemen ini pengendali = (data(ini, "acara") || {} )[event.type]; //Lintas senarai acara ini dan laksanakan perkara yang akan dilaksanakan untuk (var j dalam pengendali) { pengendali var = pengendali[j]; jika ( semua || ruang nama.test(pengendali.jenis) ) { // Hantarkan rujukan kepada fungsi pengendali itu sendiri // Supaya kita boleh mengeluarkannya kemudian // Komen pada jq ditulis seperti ini Pengendali acara merujuk kepada acara ini untuk kemudahan dan boleh dialih keluar kemudian // Tetapi dalam keluarkan, pengendali acara tidak digunakan Saya tidak tahu apa kegunaannya Dan apabila terdapat berbilang acara, acara ini digantikan event.handler = pengendali; //Laksanakan acara dan ia adalah acara yang dipanggil dengan elemen Anda boleh melaksanakan elemen ini dalam acara dan ret ialah nilai pulangan bagi fungsi var ret = handler.apply(this, arguments); //Jika terdapat nilai pulangan dan nilai pulangan adalah palsu, pelaksanaan menghalang acara daripada menggelegak dan tingkah laku lalai acara pelaksanaan disekat if( ret !== undefined ){ event.result = ret; jika ( ret === palsu ) { event.preventDefault(); event.stopPropagation(); } } } } }, props: "altKey attrChange attrName buih butang boleh dibatalkan charCode clientX clientY ctrlKey currentPeristiwa butiran data sasaranFasa daripada Elemen pengendali keyCode metaKey newValue originalSasaran pageX pageY prevValue relatedNod relatedSasaran screenX screenY shiftKey srcElement target toElement viewDelta" . Elemen view wheelDelta" betulkan : fungsi(acara){ //new setEvent akan memberikan acara itu atribut expando Jika terdapat mana-mana atribut, ini bermakna acara itu telah dijana dan tidak perlu membungkus acara itu lagi jika ( acara[expando] ) acara kembali; //Kekalkan acara asal // newA new event Ini berbeza daripada acara asal var originalEvent = acara; acara = new setEvent(originalEvent); //Dapatkan nilai atribut acara asal Apakah nilai atribut yang ada. Lihat ini untuk (var i = this.props.length, prop; i; ){ prop = this.props[ --i ]; acara[ prop ] = originalEvent[ prop ]; } //Satukan elemen sasaran menjadi acara.sasaran jika ( !event.target ) event.target = event.srcElement || dokumen; // Pembetulan #1925 di mana srcElement mungkin tidak ditakrifkan sama ada //Jika ia didapati sebagai nod teks, ambil nod induknya jika (event.target.nodeType == 3) event.target = event.target.parentNode; jika ( !event.relatedTarget && event.fromElement ) event.relatedTarget = event.fromElement == event.target ? acara.toElement : event.fromElement; acara kembali; } } win.setEvent = fungsi(src){ // Benarkan instantiasi tanpa kata kunci 'baharu' // Objek acara jika( src && src.type ){ this.originalEvent = src; this.type = src.type; // Jenis acara }lain this.type = src; // timeStamp adalah buggy untuk beberapa acara di Firefox(#3843) // Jadi kami tidak akan bergantung pada nilai asli this.timeStamp = sekarang(); // Tandai sebagai tetap ini[expando] = benar; } fungsi returnFalse(){ pulangkan palsu; } fungsi returnTrue(){ kembali benar; } setEvent.prototype = { preventDefault: function() { var e = this.originalEvent; jika( !e ) kembali; // jika preventDefault wujud jalankannya pada acara asal jika (e.preventDefault) e.preventDefault(); // sebaliknya tetapkan sifat returnValue acara asal kepada false (IE) e.returnValue = palsu; }, stopPropagation: function() { var e = this.originalEvent; jika( !e ) kembali; // jika stopPropagation wujud jalankannya pada acara asal jika (e.stopPropagation) e.stopPropagation(); // sebaliknya tetapkan sifat cancelBubble acara asal kepada benar (IE) e.cancelBubble = benar; }, stopImmediatePropagation:function(){ this.isImmediatePropagationStopped = returnTrue; this.stopPropagation(); }, isImmediatePropagationStopped: returnFalse }; })(dokumen); var $ = function(id){return document.getElementById(id)} var a = function(){alert(1)} window.onload = function(){ gevent.add($('xx'),'klik',a); gevent.add($('xx'),'klik',function(){alert(1)}); gevent.add($('xx'),'click',function(){alert(2)}); gevent.add($('xx'),'klik',function(){alert(3)}); gevent.add($('xx'),'click.xx',function(){alert(4)}); }

以上内容只是自己的一些理解,水平有限,难免有错,望指正...