Enkapsulasi menambah dan memadam kemahiran js events_javascript asli

Untuk menambah atau memadam acara dalam pelayar IE, gunakan attachEvent dan detachEvent. Dalam pelayar standard lain, addEventListener dan removeEventListener digunakan. Yang berikut merangkumi penambahan dan pemadaman peristiwa. Mari lihat kodnya!

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

Tambahan lain tentang makna parameter ketiga addEventListener

Parameter ketiga addEventListener

Fungsi yang digunakan untuk menambah peristiwa pencetus dalam W3C DOM dipanggil AddEventListener, tetapi saya tidak pernah tahu untuk apa parameter ketiga fungsi ini digunakan betapa berbezanya perbezaannya, akhirnya saya melihat penjelasannya apabila saya membaca ppk pada javascript dua hari yang lalu Bagi dokumen standard DOM yang wujud lama dahulu, saya sebenarnya tidak pernah mencari maklumat tentang parameter ini di semua.

Parameter ini dipanggil useCapture, iaitu nilai boolean, yang benar atau salah Jika benar dihantar, penyemak imbas akan menggunakan kaedah Tangkapan Jika palsu, ia akan memberi kesan di bawah tertentu Keadaan biasanya disyorkan untuk menjadi palsu Situasi yang akan memberi kesan ialah elemen sasaran (elemen sasaran) mempunyai unsur nenek moyang (elemen leluhur), dan ia juga mempunyai fungsi yang sepadan dengan peristiwa yang sama lebih jelas dengan melihat gambar.

Contoh blok div dua lapisan

Seperti yang ditunjukkan dalam gambar ini, contoh saya mempunyai dua lapisan elemen div, dan kedua-duanya ditetapkan dengan peristiwa klik Secara umumnya, jika saya mengklik pada elemen biru dalam, bukan sahaja elemen biru akan dicetuskan juga akan mencetuskan peristiwa klik unsur merah pada masa yang sama dan parameter useCapture mengawal tertib dua peristiwa klik pada masa ini. Jika ia adalah palsu, maka menggelegak akan digunakan Ia adalah proses dalam-keluar, jadi peristiwa klik unsur biru akan dilaksanakan terlebih dahulu dan kemudian peristiwa klik unsur merah Jika ia benar, ia akan ditangkap . Berbeza dengan menggelegak, ia akan dilaksanakan oleh Outside-in, acara klik elemen merah akan dilaksanakan terlebih dahulu dan kemudian acara klik elemen biru akan dilaksanakan. Dilampirkan dua contoh, tangkapan dan menggelegak Satu-satunya perbezaan antara kedua-dua fail adalah parameter ini boleh didapati bahawa susunan acara adalah berbeza.

Bagaimana jika elemen dalam lapisan berbeza menggunakan useCaptures yang berbeza? Iaitu, mula-mula ia akan mencari set acara untuk menangkap dari elemen paling luar ke elemen sasaran Selepas mencapai elemen sasaran dan melaksanakan acara elemen sasaran, ia kemudian akan mencari acara yang ditetapkan untuk menggelegak ke luar sepanjang asal. laluan.