Analisis mendalam tentang objek acara Acara dalam JS

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!

1. Apakah objek peristiwa Acara

 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

• objek mewakili status acara, seperti elemen yang mencetuskan acara, status kekunci papan kekunci, kedudukan tetikus, status butang tetikus, dsb. .; event
• objek ialah parameter tersirat dan hanya sah semasa objek event
• akan mempunyai sifat yang berbeza bergantung pada kaedah pencetus, yang bermaksud bahawa sesetengah sifat adalah hanya sah untuk acara tertentu. Tetapi semua kandungan diwarisi daripada objek eventEvent
• dalam penyemak imbas seperti

  dan event > mewakili peristiwa pencetus. Elemen perlu diperoleh menggunakan IE dalam Chrome; objek event.targetIEevent.srcElement

itu sendiri ialah pembina yang boleh digunakan untuk menjana kejadian baharu.

Event

Pembina menerima dua parameter. Parameter pertama

event = new Event(type, options);

ialah rentetan, yang menunjukkan nama acara; parameter kedua

ialah objek, menunjukkan konfigurasi objek acara. Objek ini terutamanya mempunyai dua sifat berikut. Eventtypeoptions

: Nilai Boolean, pilihan, lalai kepada palsu, menunjukkan sama ada objek acara menggelembung.

• bubbles

: Nilai Boolean, pilihan, lalai kepada palsu, menunjukkan sama ada acara itu boleh dibatalkan, iaitu sama ada acara itu boleh dibatalkan menggunakan
• . Sebaik sahaja acara dibatalkan, ia seolah-olah ia tidak pernah berlaku dan tingkah laku lalai penyemak imbas untuk acara itu tidak dicetuskan.

  cancelableEvent.preventDefault()

Kod di atas mencipta tika acara

dan kemudian menggunakan kaedah

var ev = new Event(
  'look',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);

untuk mencetuskan acara.

lookPerhatikan bahawa jika atribut dispatchEvent tidak dinyatakan secara eksplisit sebagai

, peristiwa yang dijana hanya boleh mencetuskan fungsi mendengar dalam "fasa tangkapan".

bubblestrueDalam kod di atas, elemen

memancarkan acara

// HTML 代码为
// <div><p>Hello</p></div>
var div = document.querySelector(&#39;div&#39;);
var p = document.querySelector(&#39;p&#39;);

function callback(event) {
  var tag = event.currentTarget.tagName;
  console.log(&#39;Tag: &#39; + tag); // 没有任何输出
}

div.addEventListener(&#39;click&#39;, callback, false);

var click = new Event(&#39;click&#39;);
p.dispatchEvent(click);

, yang tidak menggelembung secara lalai. Kaedah

menentukan mendengar semasa fasa menggelegak, jadi fungsi mendengar tidak akan dicetuskan. Jika ditulis sebagai p, acara ini boleh dipantau semasa "fasa tangkapan". clickdiv.addEventListenerSebaliknya, 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 elemen

div.dispatchEvent(click);

ialah sasaran acara pada masa ini, tidak timbul persoalan sama ada elemen

akan sentiasa menerima acara, sekali gus menyebabkan fungsi mendengar berkuat kuasa. divdivdiv 2. Atribut acara

Kami telah menyebut sebelum ini bahawa objek akan mempunyai atribut yang berbeza bergantung pada kaedah pencetus, dan kami boleh membahagikannya secara kasar kepada Empat bahagian:

event

Atribut biasa (atribut yang dimiliki sama ada dicetuskan oleh papan kekunci atau tetikus)

Sama ada acara itu akan menggelegak, nilai Boolean; kerana tag
• akan melompat ke pautan selepas diklik, menekan Enter dalam tag

  akan diserahkan secara automatik, dsb. bubbles

• Elemen yang pengendali acaranya sedang memproses acara mengembalikan objek cancelable
<a><form>

  sama ada acara itu; Tingkah laku lalai ditindas, Boolean;

• currentTargetElement Mengembalikan nombor yang mengandungi butiran acara

    Dalam peristiwa
,
• dan

  , 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(&#39;ul&#39;).addEventListener("click", fn1, true)

    document.querySelector(&#39;ul&#39;).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 坐标；

三、Event 方法

• 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() 方法；

四、模拟事件

4.1 模拟鼠标事件

  我们可以通过 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 方法时自动赋值；

4.2 模拟键盘事件

  同样需要先使用 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);

4.3 模拟其他事件

  如果想要模拟其他事件，诸如 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>

4.4 自定义 DOM 事件

  自定义事件不是由 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 对象。

5. Pemprosesan keserasian acara

Terutamanya mempertimbangkan perbezaan antara IE penyemak imbas dan Chrome dan objek acara penyemak imbas lain, empat atribut berikut perlu diproses Pengendalian khas:

• mendapat event objek
  var event = event || window.event;

• mendapat target objek
  var target = event.target || event.srcElement;

• Halang kelakuan lalai penyemak imbas
  event.preventDefault ? event.preventDefault() : (event.returnValue = false);

• Cegah acara menggelegak
  event.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!