Apakah peristiwa DOM JavaScript?

Acara js dom termasuk: batalkan, cetakan selepas, kabur, canplay, tukar, klik, salin, potong, dblclick, seret, lepas, tamat, ralat, fokus, buka, muatkan, mainkan, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Acara HTML DOM

Acara HTML DOM membenarkan JavaScript mendaftarkan pengendali acara yang berbeza pada elemen dalam dokumen HTML.

Acara sering digunakan bersama-sama dengan fungsi yang tidak dilaksanakan sehingga peristiwa itu berlaku (seperti apabila pengguna mengklik butang).

Acara	Penerangan
gugurkan	Acara ini berlaku apabila pemuatan media dihentikan.
afterprint	Acara ini berlaku apabila halaman mula mencetak atau apabila kotak dialog cetakan ditutup.
animationend	Berlaku apabila animasi CSS selesai.
animationiteration	Berlaku apabila animasi CSS diulang.
animationstart	Acara ini berlaku apabila animasi CSS bermula.
sebelum cetak	Berlaku apabila halaman hendak dicetak.
beforeunload	Berlaku sejurus sebelum dokumen dipunggah.
kabur	Acara ini berlaku apabila elemen hilang fokus.
canplay	Acara ini berlaku apabila penyemak imbas boleh mula memainkan media.
canplaythrough	Acara ini berlaku apabila penyemak imbas boleh memainkan media tanpa menghentikan penimbal.
ubah	Acara ini berlaku apabila kandungan elemen borang, kandungan yang dipilih atau keadaan yang dipilih berubah
klik	Acara ini berlaku apabila pengguna mengklik pada elemen.
contextmenu	Acara ini berlaku apabila pengguna mengklik kanan pada elemen untuk membuka menu konteks.
salin	Acara ini berlaku apabila pengguna menyalin kandungan elemen.
potong	Acara ini berlaku apabila pengguna memotong kandungan elemen.
dblclick	Acara ini berlaku apabila pengguna mengklik dua kali pada elemen.
seret	Berlaku apabila elemen diseret.
dragend	Acara ini berlaku apabila pengguna telah selesai menyeret elemen.
dragenter	Berlaku apabila elemen yang diseret memasuki sasaran jatuh.
dragleave	Berlaku apabila elemen yang diseret meninggalkan sasaran jatuh.
dragover	Berlaku apabila elemen yang diseret melepasi sasaran jatuh.
dragstart	Acara ini berlaku apabila pengguna mula menyeret elemen.
jatuhkan	Peristiwa ini berlaku apabila elemen yang diseret dijatuhkan pada sasaran jatuh.
durationchange	Acara ini berlaku apabila tempoh media berubah.
berakhir	Berlaku apabila media sampai ke penghujungnya.
ralat	Acara ini berlaku apabila ralat berlaku semasa memuatkan fail luaran.
fokus	Peristiwa ini berlaku apabila elemen mendapat fokus.
fokuskan	Berlaku apabila elemen akan mendapat fokus.
fokus fokus	Berlaku apabila elemen hampir hilang fokus.
perubahan skrin penuh	Acara ini berlaku apabila elemen dipaparkan dalam mod skrin penuh.
ralat skrin penuh	Acara ini berlaku apabila elemen tidak boleh dipaparkan dalam mod skrin penuh.
perubahan cincang	Acara ini berlaku apabila bahagian utama URL berubah.
input	Acara ini berlaku apabila elemen mendapat input pengguna.
tidak sah	Acara ini berlaku apabila elemen tidak sah.
keydown	Acara ini berlaku apabila pengguna menekan kekunci.
tekan kekunci	Acara ini berlaku apabila pengguna menekan kekunci.
keyup	Acara ini berlaku apabila pengguna melepaskan kunci.
muat	Peristiwa ini berlaku apabila objek telah dimuatkan.
loadeddata	Acara ini berlaku selepas data media dimuatkan.
loadedmetadata	Berlaku apabila metadata (seperti saiz dan tempoh) dimuatkan.
muat mula	Acara ini berlaku apabila penyemak imbas mula mencari media yang ditentukan.
mesej	Acara ini berlaku apabila mesej diterima melalui sumber acara ini.
turun tetikus	Acara ini berlaku apabila pengguna menekan butang tetikus pada elemen.
masuk tetikus	Acara ini berlaku apabila penuding bergerak ke atas elemen.
mouseleave	Berlaku apabila penuding bergerak keluar dari elemen.
mousemove	Acara ini berlaku apabila penuding bergerak ke atas elemen.
mouseout	Acara ini berlaku apabila pengguna mengalihkan penuding tetikus keluar daripada elemen atau elemen anak di dalamnya.
alih tetikus	Peristiwa ini berlaku apabila penuding bergerak ke atas elemen atau elemen anaknya.
mouseup	Acara ini berlaku apabila pengguna melepaskan butang tetikus pada elemen.
luar talian	Acara ini berlaku apabila penyemak imbas mula berfungsi di luar talian.
dalam talian	Acara ini berlaku apabila penyemak imbas mula berfungsi dalam talian.
terbuka	Acara ini berlaku apabila sambungan kepada sumber acara dibuka.
pagehide	Acara ini berlaku apabila pengguna menavigasi keluar dari halaman web.
pageshow	Acara ini berlaku apabila pengguna menavigasi ke halaman web.
tampal	Acara ini berlaku apabila pengguna menampal beberapa kandungan ke dalam elemen.
jeda	Acara ini berlaku apabila media dijeda oleh pengguna atau secara pengaturcaraan.
main	Berlaku apabila media telah dimulakan atau tidak dijeda lagi.
bermain	Berlaku apabila media dijeda atau dihentikan untuk memainkan selepas penimbal.
popstate	Peristiwa ini berlaku apabila sejarah tetingkap berubah.
kemajuan	Peristiwa ini berlaku apabila penyemak imbas sedang dalam proses mendapatkan data media.
perubahan kadar	Acara ini berlaku apabila kelajuan main balik media berubah.
set semula	Berlaku apabila borang ditetapkan semula.
saiz semula	Berlaku apabila paparan dokumen diubah saiz.
skrol	Peristiwa ini berlaku apabila bar skrol elemen itu ditatal.
carian	Acara ini berlaku apabila pengguna menaip dalam medan carian.
dicari	Acara ini berlaku apabila pengguna telah selesai bergerak/melompat ke lokasi baharu dalam media.
mencari	Acara ini berlaku apabila pengguna mula bergerak/melompat ke lokasi baharu dalam media.
pilih	Acara ini berlaku selepas pengguna memilih teks (untuk dan ) </td> </tr> <tr> <td> tunjukkan</td> <td>Berlaku apabila elemen <menu> dipaparkan sebagai menu konteks. </td> </tr> <tr> <td>terhenti</td> <td>Acara ini berlaku apabila penyemak imbas cuba mendapatkan data media tetapi data tidak tersedia. </td> </tr> <tr> <td>storan</td> <td>Acara ini berlaku apabila kawasan storan Web dikemas kini. </td> </tr> <tr> <td>serahkan</td> <td>Acara ini berlaku apabila borang diserahkan. </td> </tr> <tr> <td>gantung</td> <td>Acara ini berlaku apabila penyemak imbas dengan sengaja tidak mendapatkan data media. </td> </tr> <tr> <td>kemas kini masa</td> <td>Acara ini berlaku apabila kedudukan main balik berubah. </td> </tr> <tr> <td>togol</td> <td>Acara ini berlaku apabila pengguna membuka atau menutup elemen <butiran> </td> </tr> <tr> <td>batal sentuh</td> <td>Acara ini berlaku apabila sentuhan terganggu. </td> </tr> <tr> <td>sentuh</td> <td>Acara ini berlaku apabila jari dikeluarkan daripada skrin sentuh. </td> </tr> <tr> <td>touchmove</td> <td>Acara ini berlaku apabila jari diseret melintasi skrin. </td> </tr> <tr> <td>touchstart</td> <td>Acara ini berlaku apabila jari diletakkan pada skrin sentuh. </td> </tr> <tr> <td>tamat peralihan</td> <td>Acara ini berlaku apabila peralihan CSS selesai. </td> </tr> <tr> <td>muat turun</td> <td>Acara ini berlaku selepas halaman telah dipunggah (untuk <body>). </td> </tr> <tr> <td>perubahan volum</td> <td>Acara ini berlaku apabila volum media telah berubah. </td> </tr> <tr> <td>menunggu</td> <td>Acara ini berlaku apabila media telah dijeda tetapi dijangka akan disambung semula. </td> </tr> <tr> <td>roda</td> <td>Peristiwa ini berlaku apabila roda tetikus menatal ke atas atau ke bawah pada elemen. </td> </tr> </tbody></table> <p>[Pembelajaran yang disyorkan: <a href="https://www.php.cn/course/list/2.html" target="_blank">tutorial lanjutan javascript</a>]</p><p>Atas ialah kandungan terperinci Apakah peristiwa DOM JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>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</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Adakah javascript bahasa yang ditaip dengan kuat?" href="http://m.php.cn/ms/faq/484551.html">Adakah javascript bahasa yang ditaip dengan kuat?</a></span><span>Artikel seterusnya：<a class="dBlack" title="Adakah javascript bahasa yang ditaip dengan kuat?" href="http://m.php.cn/ms/faq/484581.html">Adakah javascript bahasa yang ditaip dengan kuat?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/484462.html" title="Bagaimana untuk menukar rentetan javascript kepada Boolean" class="aBlack">Bagaimana untuk menukar rentetan javascript kepada Boolean</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/484463.html" title="Bagaimana untuk melaksanakan fungsi salin dan tampal dalam javaScript" class="aBlack">Bagaimana untuk melaksanakan fungsi salin dan tampal dalam javaScript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/484537.html" title="Bagaimana untuk menukar nombor titik terapung kepada integer dalam javascript" class="aBlack">Bagaimana untuk menukar nombor titik terapung kepada integer dalam javascript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/484542.html" title="Apakah punca kebocoran memori javascript?" class="aBlack">Apakah punca kebocoran memori javascript?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/484543.html" title="Apakah jenis data rujukan javascript" class="aBlack">Apakah jenis data rujukan javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><p>Rumah</p></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><p>Kursus</p></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><p>Soal Jawab</p></a></li><li><a href="http://m.php.cn/ms/login"><b class="icon5"></b><p>saya</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ms/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ms/"><b class="icon1"></b><span>Rumah</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course.html"><b class="icon2"></b><span>Kursus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/wenda.html"><b class="icon4"></b><span>Soal Jawab</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/dic.html"><b class="icon6"></b><span>Kamus</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/xiazai/"><b class="icon8"></b><span>Muat turun</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ms/faq/zt" title="Topik"><b class="icon12"></b><span>Topik</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ms/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ms/" >Rumah</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/wenda.html" >Soal Jawab</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/course.html" >Kursus</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/faq/zt" >Topik</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/xiazai" >Muat turun</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/game" >Permainan</a></div><div class="swiper-slide"><a href="http://m.php.cn/ms/dic.html" >Kamus</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>