Selepas peristiwa berlaku, objek acara (Acara) akan dijana, mewakili status acara. Artikel berikut akan memberi anda pemahaman yang mendalam tentang Peristiwa objek acara dalam JS dan tafsiran terperinci mengenainya. Saya harap ia akan membantu semua orang!
Apabila setiap peristiwa dicetuskan, objek peristiwa yang sepadan akan dihasilkanevent
, yang mengandungi unsur-unsur yang mencetuskan peristiwa, status, kedudukan, dsb. papan kekunci dan tetikus.
Setiap kali pengguna mencetuskan peristiwa, JS akan menjana objek event
secara automatik Bergantung pada peristiwa pencetus, objek ini mengandungi kandungan yang berbeza Contohnya, jika peristiwa klik dicetuskan oleh tetikus, MouseEvent
objek akan dihasilkan 🎜> objek, yang mengandungi kedudukan tetikus dan kandungan lain; KeyboardEvent
event
event
event
Event
dan event
> mewakili peristiwa pencetus. Elemen perlu diperoleh menggunakan IE
dalam Chrome
; objek event.target
IE
event.srcElement
Event
event = new Event(type, options);
ialah objek, menunjukkan konfigurasi objek acara. Objek ini terutamanya mempunyai dua sifat berikut. Event
type
options
bubbles
cancelable
Event.preventDefault()
var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev);
look
Perhatikan bahawa jika atribut dispatchEvent
tidak dinyatakan secara eksplisit sebagai
bubbles
true
Dalam kod di atas, elemen
// HTML 代码为 // <div><p>Hello</p></div> var div = document.querySelector('div'); var p = document.querySelector('p'); function callback(event) { var tag = event.currentTarget.tagName; console.log('Tag: ' + tag); // 没有任何输出 } div.addEventListener('click', callback, false); var click = new Event('click'); p.dispatchEvent(click);
menentukan mendengar semasa fasa menggelegak, jadi fungsi mendengar tidak akan dicetuskan. Jika ditulis sebagai p
, acara ini boleh dipantau semasa "fasa tangkapan". click
div.addEventListener
Sebaliknya, jika acara ini menyala pada elemen div. div.addEventListener('click', callback, true)
Kemudian, tidak kira sama ada elemen
sedang mendengar dalam fasa menggelegak atau mendengar dalam fasa menangkap, fungsi mendengar akan dicetuskan. Oleh kerana elemendiv.dispatchEvent(click);
akan sentiasa menerima acara, sekali gus menyebabkan fungsi mendengar berkuat kuasa. div
div
div
2. Atribut acara
event
Atribut biasa (atribut yang dimiliki sama ada dicetuskan oleh papan kekunci atau tetikus)
akan diserahkan secara automatik, dsb. bubbles
Elemen yang pengendali acaranya sedang memproses acara mengembalikan objek cancelable
<a>
<form>
currentTarget
Element
Mengembalikan nombor yang mengandungi butiran acara
, ini Nombor mewakili semasa bilangan klik Dalam acara defaultPrevented
, bilangannya sentiasa 2. Dalam acara papan kekunci dan tetikus ke atas acara, nombor ini sentiasa 0.
eventPhase
返回一个代表事件处理程序发生时所在阶段的数字;
0表示当前阶段未发生其他事件;1表示当前事件在捕获阶段发生;2表示当前事件处于目标阶段;3表示当前事件处于冒泡阶段;
isTrusted
表示该事件是由用户行为触发的,还是由 JS 代码触发的,布尔值;
当事件是由用户行为(点击等)触发时,值为 true
,当事件是通过 EventTarget.dispatchEvent()
派发的时候,这个属性的值为 false
。
<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li></ul><script> document.querySelector('ul').addEventListener("click", fn1, true) document.querySelector('ul').addEventListener("click", fn1, false) document.querySelector("li").addEventListener("click", fn1, true) function fn1() { console.log(this); // 打印当前事件对象 console.log(event.eventPhase); // 打印 }</script>
点击列表1后,控制台打印如下结果:
target
返回触发该事件的目标节点,返回一个 Element
对象;
target
并不一定与 this
指向相同,this
指向的是当前发生事件的元素,而 target
指向的是触发该事件的元素,可以将上方代码中的 console.log(event.eventPhase);
换成 console.log(event.target);
来具体体验一下两者的不同。
在 IE
浏览器中应使用 srcElement
来代替 target
。
type
返回触发的事件名称,例 click
,keydown
等;
鼠标属性
button
当事件被触发时,哪个鼠标按钮被点击;clientX
当事件被触发时,鼠标指针的 x 轴坐标;clientY
当事件被触发时,鼠标指针的 y 轴坐标;screenX
当事件被触发时,鼠标指针的 x 轴坐标;screenY
当事件被触发时,鼠标指针的 y 轴坐标;键盘属性
altKey
当事件被触发时,“Alt” 是否被按下;ctrlKey
当事件被触发时,“Ctrl” 是否被按下;metaKey
当事件被触发时,“meta” 是否被按下;shiftKey
当事件被触发时,“Shift” 是否被按下;Location
返回按键在设备上的位置;charCode
当事件被触发时,触发键值的字母代码;key
按下按键时返回按键的标识符;keyCode
返回 keypress
事件触发的键的值的字符代码,或者 keydown
或 keyup
事件的键的代码;which
返回 keypress
事件触发的键的值的字符代码,或者 keydown
或 keyup
事件的键的代码;relatedTarget
返回与事件的目标节点相关的节点。IE属性
cancelBubble
如果想阻止事件冒泡,必须把该属性设为 true
;fromElement
对于 mouseover
和 mouseout
事件,fromElement
引用移出鼠标的元素;returnValue
等同于 defaultPrevented
;srcElement
等同于 target
;toElement
对于 mouseover
和 mouseout
事件,该属性引用移入鼠标的元素;x
事件发生的位置的 x 坐标;y
事件发生的位置的 y 坐标;initEvent()
初始化新创建的 Event
对象的属性;preventDefault()
阻止触发事件元素的默认行为;stopPropagation()
阻止事件冒泡; 如果想要阻止事件元素的默认行为,例如点击 <a>
标签时执行点击事件,不要跳转链接,需要在事件处理程序中调用 preventDefault
方法:
<a href="http://baidu.com">百度一下,你就知道</a> <script> document.querySelector("a").onclick = function () { event.preventDefault(); // do something } </script>
如果想要阻止事件冒泡,例如点击子元素标签时执行子元素的点击事件,而不想要执行父级元素的事件处理程序,则需要调用 stopPropagation
方法:
<ul> <li>不要触发 ul 的点击事件处理程序</li> </ul> <script> document.querySelector("ul").onclick = function () { alert("事件冒泡,触发 ul 的点击事件") } document.querySelector("li").onclick = function () { event.stopPropagation(); // do something } </script>
其他相关方法
addEventListener()
给目标元素注册监听事件;createEvent()
创建一个 Event
对象;dispatchEvent()
将事件发送到目标元素的监听器上;handleEvent()
把任意对象注册为事件处理程序;initMouseEvent()
初始化鼠标事件对象的值;initKeyboardEvent()
初始化键盘事件对象的值;initMutationEvent()
初始变动事件和 HTML
事件对象的值;initCustomEvent()
初始自定义事件对象的值;removeEventListener()
删除目标元素上的某个监听事件;另外关于 createEvent
方法,根据传入参数的不同,会返回不同的 event
对象:
MouseEvents
创建鼠标事件对象,返回的对象中包含 initMouseEvent()
方法;KeyboardEvent
创建键盘事件对象,返回的对象中包含 initKeyEvent()
方法;KeyEvents
在 firefox
中创建键盘事件对象需要传入该参数;MutationEvents
模拟变动事件和 HTML 事件的事件对象,返回的对象中包含 initMutationEvent
方法;CustomEvent
创建自定义事件对象,返回的对象中包含 initCustomEvent()
方法; 我们可以通过 createEvent()
方法可以创建一个新的 event
对象,借助 initMouseEvent()
方法来对这个鼠标事件对象的值进行初始化,该方法接受十五个参数,分别与鼠标事件中的各个属性一一对应,按照 type
、bubbles
、cancelable
、view
、detail
、screenX
、screenY
、clientX
、clientY
、ctrlKey
、altKey
、shiftKey
、、metaKey
、button
、relatedTarget
的顺序传入即可:
var oBtn = document.querySelector("button"); // 为 button 绑定事件处理程序 oBtn.addEventListener("click", function () { console.log(event); }) var event = document.createEvent("MouseEvents"); // 通过 initMouseEvent() 方法初始化鼠标事件的 event 对象 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); // 通过 dispatchEvent() 方法来触发 oBtn 上绑定的点击事件,此时浏览器打印的 event 对象为自定义的 event oBtn.dispatchEvent(event);
初始化事件对象时,最重要的是前四个参数,因为浏览器在触发事件时,这四个参数是必须的,而剩余的参数只有在事件处理程序中才会被使用,target
会在执行 dispatchEvent
方法时自动赋值;
同样需要先使用 createEvent()
方法可以创建一个新的 event
对象,但需要使用 initKeyEvent
来对键盘事件对象的值进行初始化,该方法接收八个参数,分别于键盘事件对象中的各个属性一一对应,按照 type
、bubbles
、cancelable
、view
、key
、location
、modifiers
、repeat
的顺序传入即可。但在 firefox
中,需要按照 type
、bubbles
、cancelable
、view
、ctrlKey
、altKey
、shiftKey
metaKey
keyCode
charCode
` 的顺序传入十个参数
document.onkeydown = function () { console.log(event); } var event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keydown", false, false, document.defaultView, "a", 0, "Shift", 0); document.dispatchEvent(event);
如果想要模拟其他事件,诸如 submit
、focus
等 HTML
和变动事件,则需要通过 MutationEvents
方法来创建事件,通过 initEvent
方法来进行初始化,按照type
、bubbles
、cancelable
、relatedNode
、preValue
、newValue
、attrName
、attrChange
的顺序传入参数。
<input type="text"> <script> var oInput = document.querySelector("input"); oInput.addEventListener("focus", function () { this.style.background = "#ccc" }) var event = document.createEvent("HTMLEvents"); event.initEvent("focus", true, false); oInput.dispatchEvent(event); </script>
自定义事件不是由 DOM 原生触发的,它的目的是让开发人员创建自己的事件。要创建新的自定义事件,可以调用 createEvent("CustomEvent")
,返回的对象有一个名为 initCustomEvent()
的方法,接收 type
、bubbles
、cancelable
、detail
四个参数。
var oInput = document.querySelector("input"); oInput.addEventListener("myEvent", function () { console.log(event); }) var event = document.createEvent("CustomEvent"); event.initCustomEvent("myEvent", true, false, "自定义事件myEvent"); oInput.dispatchEvent(event);
上方代码创建了一个自定义事件,事件名为 myEvent
, 该事件可以向上冒泡,不可以执行在浏览器中的默认行为, detail
属性的值为 自定义事件myEvent
,可以在绑定该事件的元素或者元素的父级元素上绑定事件处理程序来查看 event
对象。
Terutamanya mempertimbangkan perbezaan antara IE
penyemak imbas dan Chrome
dan objek acara penyemak imbas lain, empat atribut berikut perlu diproses Pengendalian khas:
mendapat event
objekvar event = event || window.event;
mendapat target
objekvar target = event.target || event.srcElement;
Halang kelakuan lalai penyemak imbasevent.preventDefault ? event.preventDefault() : (event.returnValue = false);
Cegah acara menggelegakevent.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
[Cadangan berkaitan: tutorial pembelajaran javascript]
Atas ialah kandungan terperinci Analisis mendalam tentang objek acara Acara dalam JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!