Rumah hujung hadapan web tutorial js DOM 中的事件处理介绍_DOM

DOM 中的事件处理介绍_DOM

May 16, 2016 pm 05:56 PM
pengendalian acara

该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。

DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法。 实现 Event 接口的对象一般作为第一个参数传入事件处理函数,以用来提供当前事件相关的一些信息。

事件注册
根据 DOM 2 Events 中描述,节点使用 'addEventListener' 和 'removeEventListener' 方法绑定和解绑事件监听器,但 IE6 IE7 IE8 不支持这两个方法, 而使用 'attachEvent' 和 'detachEvent' 方法作为替代方案,Opera 两类方法都支持。Chrome Safari Firefox 只支持标准方法。

为了解决浏览器兼容问题,可以自定义函数来解决。例如:

复制代码 代码如下:

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};


关于 'addEventListener' 和 'attachEvent' 有几点需要注意:

IE 不支持在捕获阶段触发事件监听器,'attachEvent' 方法没有提供参数说明是否响应在捕获阶段触发的事件;
'addEventListener' 和 'attachEvent' 都可以注册多个事件监听器;
在 Firefox Chrome Safari Opera 中给同一事件注册同一个事件监听器多次,重复注册的会被丢弃;而在 IE 中重复注册的事件监听器会被重复执行多次;
当给同一元素注册了多个事件监听器的时候,IE6 IE7 的事件监听器执行顺序是随机的,IE8 是倒序的,Firefox Chrome Safari Opera 是顺序的;
当元素注册的事件监听器中有非法的事件监听器时(非函数),在 IE Firefox 中会抛出异常,而在 Chrome Safari Opera 中则会忽略非法的事件监听器,继续执行其他的事件监听器。
事件对象
在ie中,事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发的,还是其他事件, 都会更新window.event 对象。 所以在代码中,只要轻松调用 window.event 就可以轻松获取 事件对象, 再 event.srcElement 就可以取得触发事件的元素进行进一步处理。

对于标准的 DOM 处理来说, 事件对象却不是全局对象,一般情况下,是现场发生,现场使用,把事件对象自动传递给对应的事件处理函数。 在代码中,函数的第一个参数就是事件对象了。

为了解决兼容性问题,通常在代码中如下处理:
复制代码 代码如下:

function handler(e){
e = e || window.event;
}

需要注意的是,使用 进行事件注册,标准方式下却不能在事件处理方法中取得事件对象。

原因是 onclick="foo()" 就是直接执行了, foo() 函数,没有任何参数传递给 foo 函数。

有两个办法解决这个问题。

第一,将注册的方法修改为 ,注意,这里的 event 不是形参,而是实参,必须名为 event。这样 foo 函数就可以得到事件参数了。

第二,不修改注册的代码,在事件处理方法上进行处理。关键在于此时实际上存在事件对象,只不过没有传递给 foo 函数罢了,我们可以找到调用 foo 函数的那个函数,当然这是一个系统函数,没有关系,通过 foo.caller 可以取得当前调用 foo 函数的函数,这个函数的第一个参数就是事件对象,所以,我们可以这样取得这个事件对象了。foo.caller.arguments[0]。

注意:

只有在使用 attachEvent 方法注册事件监听器的时候,IE 才支持使用事件监听器传入的第一个参数作为事件对象的方式;
Chrome Safari Opera 两种获取事件对象的方式都支持;
Firefox 只支持获取事件对象的标准方式。
事件对象的属性
IE 对事件对象的标准属性和方法支持有限,针对大部分属性和方法,IE 都提供了一套替代非标准的替代方案; 而 Firefox Chrome Safari Opera 除了全面支持事件对象的标准属性和方法外,还在不同程度上支持了 IE 提供的非标准替代方案。

使用特性判断使用与标准对应的非标准方法及属性

  target          srcElement

  preventDefault()     returnValue

  stopPropagation()    cancelBubble

  relatedTarget      fromElement toElement

例如:
复制代码 代码如下:

getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}


参考资料:

SD9011: 事件模型在各浏览器中存在差异

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pengaturcaraan GUI Python: Mulakan dengan cepat dan mudah buat antara muka interaktif Pengaturcaraan GUI Python: Mulakan dengan cepat dan mudah buat antara muka interaktif Feb 19, 2024 pm 01:24 PM

Pengenalan ringkas kepada GUI pengaturcaraan GUI python (Antara Muka Pengguna Grafik, antara muka pengguna grafik) ialah cara yang membolehkan pengguna berinteraksi dengan komputer secara grafik. Pengaturcaraan GUI merujuk kepada penggunaan bahasa pengaturcaraan untuk mencipta antara muka pengguna grafik. Python ialah bahasa pengaturcaraan popular yang menyediakan perpustakaan GUI yang kaya, menjadikan pengaturcaraan GUI Python sangat mudah. Pengenalan kepada perpustakaan GUI Python Terdapat banyak perpustakaan GUI dalam Python, yang paling biasa digunakan ialah: Tkinter: Tkinter ialah perpustakaan GUI yang disertakan dengan perpustakaan standard Python Ia mudah dan mudah digunakan, tetapi mempunyai fungsi yang terhad. PyQt: PyQt ialah perpustakaan GUI merentas platform dengan fungsi yang berkuasa.

Bagaimana untuk menguruskan baris gilir pekeliling lengkap acara dalam C++? Bagaimana untuk menguruskan baris gilir pekeliling lengkap acara dalam C++? Sep 04, 2023 pm 06:41 PM

Pengenalan CircularQueue ialah penambahbaikan pada baris gilir linear, yang diperkenalkan untuk menyelesaikan masalah sisa ingatan dalam baris gilir linear. Baris gilir pekeliling menggunakan prinsip FIFO untuk memasukkan dan memadam elemen daripadanya. Dalam tutorial ini, kami akan membincangkan pengendalian baris gilir bulat dan cara mengurusnya. Apakah giliran pekeliling? Baris pekeliling ialah satu lagi jenis baris gilir dalam struktur data di mana hujung hadapan dan hujung belakang disambungkan antara satu sama lain. Ia juga dikenali sebagai penampan bulat. Ia beroperasi sama seperti baris gilir linear, jadi mengapa kita perlu memperkenalkan baris gilir baharu dalam struktur data? Apabila menggunakan baris gilir linear, apabila baris gilir mencapai had maksimumnya, mungkin terdapat sedikit ruang memori sebelum penuding ekor. Ini mengakibatkan kehilangan ingatan, dan algoritma yang baik seharusnya dapat menggunakan sumber sepenuhnya. Untuk menyelesaikan pembaziran ingatan

Pustaka pemprosesan acara dalam PHP8.0: Acara Pustaka pemprosesan acara dalam PHP8.0: Acara May 14, 2023 pm 05:40 PM

Pustaka pemprosesan acara dalam PHP8.0: Peristiwa Dengan pembangunan berterusan Internet, PHP, sebagai bahasa pengaturcaraan akhir belakang yang popular, digunakan secara meluas dalam pembangunan pelbagai aplikasi Web. Dalam proses ini, mekanisme yang didorong oleh peristiwa telah menjadi bahagian yang sangat penting. Pustaka pemprosesan acara Acara dalam PHP8.0 akan menyediakan kami kaedah pemprosesan acara yang lebih cekap dan fleksibel. Apakah pengendalian acara? Pengendalian acara adalah konsep yang sangat penting dalam pembangunan aplikasi web. Acara boleh terdiri daripada sebarang jenis baris pengguna

Apakah maksud peristiwa menggelegak Apakah maksud peristiwa menggelegak Feb 19, 2024 am 11:53 AM

Peristiwa menggelegak bermakna bahawa dalam pembangunan web, apabila peristiwa dicetuskan pada elemen, peristiwa itu akan merebak ke elemen atas sehingga mencapai elemen akar dokumen. Kaedah penyebaran ini adalah seperti gelembung yang beransur-ansur naik dari bawah, jadi ia dipanggil peristiwa menggelegak. Dalam perkembangan sebenar, mengetahui dan memahami cara acara menggelegak berfungsi adalah sangat penting untuk mengendalikan acara dengan betul. Berikut akan memperkenalkan konsep dan penggunaan peristiwa menggelegak secara terperinci melalui contoh kod tertentu. Mula-mula, kami mencipta halaman HTML ringkas dengan elemen induk dan tiga anak

Aplikasi praktikal acara menggelegak dan jenis acara yang berkenaan Aplikasi praktikal acara menggelegak dan jenis acara yang berkenaan Feb 18, 2024 pm 04:19 PM

Senario aplikasi acara menggelegak dan jenis peristiwa yang disokongnya Acara menggelegak bermaksud bahawa apabila peristiwa pada elemen dicetuskan, peristiwa itu akan dihantar kepada elemen induk elemen tersebut, dan kemudian kepada elemen moyang elemen tersebut sehingga ia. dihantar ke nod akar dokumen. Ia merupakan mekanisme penting model acara dan mempunyai pelbagai senario aplikasi. Artikel ini akan memperkenalkan senario aplikasi acara menggelegak dan meneroka jenis acara yang disokongnya. 1. Senario aplikasi Acara menggelegak mempunyai pelbagai senario aplikasi dalam pembangunan web Berikut ialah beberapa senario aplikasi biasa. pengesahan borang dalam borang

Kajian mendalam tentang pelaksanaan kod utama PHP dan Vue dalam fungsi peta otak Kajian mendalam tentang pelaksanaan kod utama PHP dan Vue dalam fungsi peta otak Aug 27, 2023 pm 12:15 PM

Kajian mendalam tentang pelaksanaan kod utama PHP dan Vue dalam fungsi peta otak Ringkasan: Artikel ini akan menyelidiki pelaksanaan kod utama PHP dan Vue dalam merealisasikan fungsi peta minda. Pemetaan otak ialah alat grafik yang biasa digunakan untuk memaparkan struktur pemikiran dan perhubungan Ia digunakan secara meluas dalam bidang seperti perancangan projek, pengurusan pengetahuan dan organisasi maklumat. Dengan mempelajari pengetahuan yang berkaitan tentang PHP dan Vue, kami boleh melaksanakan aplikasi pemetaan otak yang mudah tetapi berkuasa. Fahami PHPPHP ialah bahasa skrip sebelah pelayan yang biasa digunakan. Ia mudah dipelajari dan sangat berskala

Ralat Java: Ralat Pengendalian Acara JavaFX, Cara Mengendalikan dan Mengelak Ralat Java: Ralat Pengendalian Acara JavaFX, Cara Mengendalikan dan Mengelak Jun 24, 2023 pm 10:49 PM

Sebagai bahasa pengaturcaraan yang popular, Java sering menghadapi pelbagai ralat dan masalah semasa proses pembangunan. Antaranya, ralat pengendalian acara JavaFX adalah masalah biasa, yang boleh menyebabkan aplikasi ranap atau gagal. Artikel ini akan memperkenalkan punca, penyelesaian dan langkah pencegahan ralat pemprosesan acara JavaFX untuk membantu pembangun mengelakkan dan menangani ralat tersebut. Ralat menyebabkan ralat pemprosesan acara JavaFX biasanya disebabkan oleh sebab berikut: 1) Ralat kod: Apabila menulis kod JavaFX, ralat kod sering berlaku

Analisis arahan v-on dalam Vue: cara mengendalikan acara penyerahan borang Analisis arahan v-on dalam Vue: cara mengendalikan acara penyerahan borang Sep 15, 2023 am 09:12 AM

Analisis arahan v-on dalam Vue: Cara mengendalikan acara penyerahan borang Dalam Vue.js, arahan v-on digunakan untuk mengikat pendengar acara dan boleh menangkap serta memproses pelbagai acara DOM. Antaranya, memproses acara penyerahan borang adalah salah satu operasi biasa dalam Vue. Artikel ini akan memperkenalkan cara menggunakan arahan v-on untuk mengendalikan acara penyerahan borang dan memberikan contoh kod khusus. Pertama sekali, adalah perlu untuk menjelaskan bahawa peristiwa penyerahan borang dalam Vue merujuk kepada peristiwa yang dicetuskan apabila pengguna mengklik butang hantar atau menekan kekunci Enter. Dalam Vue, anda boleh lulus

See all articles