Maison > Article > interface Web > Analyse approfondie de l'objet événementiel Event en JS
Après qu'un événement se produise, un objet événement (Event) sera généré, représentant le statut de l'événement. L'article suivant vous donnera une compréhension approfondie de l'objet événementiel Event dans JS et une interprétation détaillée de celui-ci. J'espère qu'il sera utile à tout le monde !
Lorsque chaque événement est déclenché, un objet événement correspondant event
sera généré, qui contient les éléments qui ont déclenché l'événement, le clavier et état de la souris, emplacement, etc. event
,其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容。
每当用户触发一个事件后,JS 就会自动生成一个 event
对象,根据触发事件的不同,这个对象包含的内容也不同,比如通过鼠标触发点击事件,会产生一个 MouseEvent
对象,其中包含了鼠标的位置等内容;通过键盘触发事件,会产生一个 KeyboardEvent
对象其中包含按键相关的信息。
event
对象代表事件的状态,比如触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按键的状态等等;event
对象是一个隐式参数,并且只在事件发生的过程中才有效;event
对象根据触发方式的不同会具有不同的属性,也就是说某些属性只对特定事件有效,但所有内容都是继承自 Event
对象;event
对象在 IE
与 Chrome
等浏览器表现不尽相同,例如说 event.target
表示触发事件的元素,在 IE
中需要使用 event.srcElement
获取;
Event
对象本身就是一个构造函数,可以用来生成新的实例。
event = new Event(type, options);
Event
构造函数接受两个参数。第一个参数type
是字符串,表示事件的名称;第二个参数options
是一个对象,表示事件对象的配置。该对象主要有下面两个属性。
bubbles
:布尔值,可选,默认为false,表示事件对象是否冒泡。
cancelable
:布尔值,可选,默认为false,表示事件是否可以被取消,即能否用Event.preventDefault()
取消这个事件。一旦事件被取消,就好像从来没有发生过,不会触发浏览器对该事件的默认行为。
var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev);
上面代码新建一个look
事件实例,然后使用dispatchEvent
方法触发该事件。
注意,如果不是显式指定bubbles
属性为true
,生成的事件就只能在“捕获阶段”触发监听函数。
// 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);
上面代码中,p
元素发出一个click
事件,该事件默认不会冒泡。div.addEventListener
方法指定在冒泡阶段监听,因此监听函数不会触发。如果写成div.addEventListener('click', callback, true)
,那么在“捕获阶段”可以监听到这个事件。
另一方面,如果这个事件在div元素上触发。
div.dispatchEvent(click);
那么,不管div
元素是在冒泡阶段监听,还是在捕获阶段监听,都会触发监听函数。因为这时div
元素是事件的目标,不存在是否冒泡的问题,div
元素总是会接收到事件,因此导致监听函数生效。
我们在前面提到,根据触发方式的不同 event
对象会具有不同的属性,我们可以将其大体分为四部分:
通用属性 (无论是通过键盘还是鼠标触发都拥有的属性)
bubbles
事件是否会冒泡,布尔值;
cancelable
事件是否具有默认行为,布尔值;
默认行为指的是浏览器中规定的一些行为,比如 <a></a>
标签点击后会跳转链接,<form></form>
标签内按回车会自动提交等等。
currentTarget
事件处理程序当前正在处理事件的那个元素,返回一个 Element
对象;
defaultPrevented
事件是否取消了默认行为,布尔值;
detail
返回一个包含事件详细信息的数字
在 click
、 mousedown
和 mouseup
事件中,该数字表示当前的点击次数, dblclick
event
En fonction de l'événement déclencheur, cet objet contient différents contenus. Par exemple, déclencher un événement de clic via la souris générera un <. code>MouseEvent, qui contient la position de la souris et d'autres contenus ; le déclenchement d'un événement via le clavier générera un objet KeyboardEvent
qui contient des informations relatives aux touches. L'objet 🎜event
représente l'état de l'événement, comme l'élément qui a déclenché l'événement, l'état des touches du clavier, la position de la souris, l'état de la souris boutons, etc. ;event
est un paramètre implicite et n'est valide que pendant l'événement ;event
objet aura des propriétés différentes selon la méthode de déclenchement, c'est-à-dire que certaines propriétés ne sont valables que pour des événements spécifiques, mais tout le contenu est hérité de l'objet Event
;event
dans les navigateurs tels que IE
et Chrome
se comporte différemment. Par exemple, event.target
représente l'élément. qui déclenche l'événement. Dans IE
, le code> doit être obtenu en utilisant event.srcElement
🎜Événement
; > l'objet lui-même est un constructeur qui peut être utilisé pour générer de nouvelles instances. Le constructeur 🎜
Event
accepte deux paramètres. Le premier paramètre type
est une chaîne, indiquant le nom de l'événement ; le deuxième paramètre options
est un objet, indiquant la configuration de l'objet événement. Cet objet possède principalement les deux propriétés suivantes. 🎜bubbles
: valeur booléenne, facultative, par défaut sur false, indiquant si l'objet événementiel fait des bulles. 🎜cancelable
: valeur booléenne, facultative, par défaut false, indiquant si l'événement peut être annulé, c'est-à-dire s'il peut être annulé en utilisant Event.preventDefault ()
Annuler cet événement. Une fois qu'un événement est annulé, c'est comme s'il ne s'était jamais produit et le comportement par défaut du navigateur pour cet événement n'est pas déclenché. 🎜<a>百度一下,你就知道</a> <script> document.querySelector("a").onclick = function () { event.preventDefault(); // do something } </script>🎜Le code ci-dessus crée une nouvelle instance d'événement
look
, puis utilise la méthode dispatchEvent
pour déclencher l'événement. 🎜🎜Notez que si l'attribut bulles
n'est pas explicitement spécifié comme true
, l'événement généré ne peut déclencher la fonction d'écoute qu'en "phase de capture". 🎜
p
émet un événement click
, qui ne fait pas de bulle par défaut. La méthode div.addEventListener
spécifie l'écoute pendant la phase de bouillonnement, donc la fonction d'écoute ne sera pas déclenchée. S'il est écrit sous la forme div.addEventListener('click', callback, true)
, alors cet événement peut être surveillé pendant la "phase de capture". 🎜🎜Par contre, si cet événement se déclenche sur un élément div. 🎜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);🎜Ensuite, peu importe que l'élément
div
écoute en phase de bouillonnement ou en phase de capture, la fonction d'écoute sera déclenchée. Étant donné que l'élément div
est la cible de l'événement à ce moment-là, il n'est pas question de savoir s'il apparaît. L'élément div
recevra toujours l'événement, provoquant ainsi l'événement. fonction d'écoute pour prendre effet. 🎜🎜🎜2. Attributs d'événement 🎜🎜🎜 Nous avons mentionné plus tôt que l'objet event
aura des attributs différents selon la méthode de déclenchement. Nous pouvons grossièrement le diviser en quatre parties : 🎜🎜🎜<. span style="color:#006cb7">Propriétés communes🎜 (propriétés détenues, qu'elles soient déclenchées par le clavier ou la souris)🎜bulles
Si l'événement va bouillonner, valeur booléenne ; 🎜annulable
Si l'événement a un comportement par défaut, valeur booléenne ;<a></a>
pour accéder au lien, appuyer sur Entrée dans la balise <form></form>
pour le soumettre automatiquement, etc. 🎜currentTarget
L'élément pour lequel le gestionnaire d'événements traite actuellement l'événement renvoie un objet Element
🎜detail
Renvoie un nombre contenant les détails de l'événement Dans les événements click
, mousedown
et mouseup
, ce nombre représente le nombre actuel de clics. Dans l'événement dblclick
, ce nombre est. toujours 2 . Dans les événements de clavier et de survol de la souris, ce nombre est toujours 0. 🎜eventPhase
返回一个代表事件处理程序发生时所在阶段的数字;
0表示当前阶段未发生其他事件;1表示当前事件在捕获阶段发生;2表示当前事件处于目标阶段;3表示当前事件处于冒泡阶段;
isTrusted
表示该事件是由用户行为触发的,还是由 JS 代码触发的,布尔值;
当事件是由用户行为(点击等)触发时,值为 true
,当事件是通过 EventTarget.dispatchEvent()
派发的时候,这个属性的值为 false
。
点击列表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></a>
标签时执行点击事件,不要跳转链接,需要在事件处理程序中调用 preventDefault
方法:
<a>百度一下,你就知道</a> <script> document.querySelector("a").onclick = function () { event.preventDefault(); // do something } </script>
如果想要阻止事件冒泡,例如点击子元素标签时执行子元素的点击事件,而不想要执行父级元素的事件处理程序,则需要调用 stopPropagation
方法:
其他相关方法
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> <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
对象。
Considérant principalement la différence entre les objets d'événement des navigateurs tels que IE
et Chrome
, les quatre attributs suivants doivent être traités Traitement spécial : IE
浏览器与 Chrome
等浏览器事件对象的区别,针对下面四个属性,需要进行特殊处理:
获得 event
对象var event = event || window.event;
获得 target
对象var target = event.target || event.srcElement;
阻止浏览器默认行为event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止事件冒泡event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
event
var event = event window.event;
gets target objectvar target = event.target || event.srcElement;
event .preventDefault ? event.preventDefault() : (event.returnValue = false);
event.stopPropagation event.stopPropagation() : (event .cancelBubble = true );
🎜🎜🎜🎜【Recommandations associées : 🎜Tutoriel d'apprentissage Javascript🎜🎜】🎜🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!