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 !

1. Qu'est-ce qu'un objet événementiel Event

 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(&#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);

上面代码中，p元素发出一个click事件，该事件默认不会冒泡。div.addEventListener方法指定在冒泡阶段监听，因此监听函数不会触发。如果写成div.addEventListener('click', callback, true)，那么在“捕获阶段”可以监听到这个事件。

另一方面，如果这个事件在div元素上触发。

div.dispatchEvent(click);

那么，不管div元素是在冒泡阶段监听，还是在捕获阶段监听，都会触发监听函数。因为这时div元素是事件的目标，不存在是否冒泡的问题，div元素总是会接收到事件，因此导致监听函数生效。

二、Event 属性

  我们在前面提到，根据触发方式的不同 event 对象会具有不同的属性，我们可以将其大体分为四部分：

通用属性 (无论是通过键盘还是鼠标触发都拥有的属性)

• bubbles 事件是否会冒泡，布尔值；

• cancelable 事件是否具有默认行为，布尔值；
    默认行为指的是浏览器中规定的一些行为，比如 <a> 标签点击后会跳转链接，<form> 标签内按回车会自动提交等等。

• currentTarget 事件处理程序当前正在处理事件的那个元素，返回一个 Element 对象；

• defaultPrevented 事件是否取消了默认行为，布尔值；

• detail 返回一个包含事件详细信息的数字
    在 click 、 mousedown 和 mouseup 事件中，该数字表示当前的点击次数， dblclick

    Chaque fois que l'utilisateur déclenche un événement, JS générera automatiquement un objet 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. ;
  • L'objet 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 ;
  • 🎜 L'objet 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 🎜
  🎜L'Événement</code ; > l'objet lui-même est un constructeur qui peut être utilisé pour générer de nouvelles instances. Le constructeur 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;ul&gt; &lt;li&gt;列表1&lt;/li&gt; &lt;li&gt;列表2&lt;/li&gt; &lt;li&gt;列表3&lt;/li&gt; &lt;li&gt;列表4&lt;/li&gt;&lt;/ul&gt;&lt;script&gt; document.querySelector(&amp;#39;ul&amp;#39;).addEventListener(&quot;click&quot;, fn1, true) document.querySelector(&amp;#39;ul&amp;#39;).addEventListener(&quot;click&quot;, fn1, false) document.querySelector(&quot;li&quot;).addEventListener(&quot;click&quot;, fn1, true) function fn1() { console.log(this); // 打印当前事件对象 console.log(event.eventPhase); // 打印 }&lt;/script&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜<code>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 ()</code >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é. 🎜</li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;a href=&quot;http://baidu.com&quot;&gt;百度一下，你就知道&lt;/a&gt; &lt;script&gt; document.querySelector(&quot;a&quot;).onclick = function () { event.preventDefault(); // do something } &lt;/script&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜Le code ci-dessus crée une nouvelle instance d'événement <code>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". 🎜

    <ul>
    	<li>不要触发 ul 的点击事件处理程序</li>
    </ul>
    <script>
    	document.querySelector("ul").onclick = function () {
    		alert("事件冒泡，触发 ul 的点击事件")
    	}
    
    	document.querySelector("li").onclick = function () {
    		event.stopPropagation();
    		// do something
    	}
    </script>

    🎜Dans le code ci-dessus, l'élément 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 ;
        Le comportement par défaut fait référence au comportement dans le navigateur. Certains comportements prescrits , comme cliquer sur la balise <a> pour accéder au lien, appuyer sur Entrée dans la balise <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 🎜
    • 🎜 ; < code>defaultPrevented Indique si l'événement annule le comportement par défaut, valeur booléenne ; 🎜
    • 🎜detail Renvoie un nombre contenant les détails de l'événement
        In 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 。

    <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. Traitement de compatibilité des événements

     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);

      • obtient l'objet event
var event = event window.event;

    • gets target object
      var target = event.target || event.srcElement;

    • Empêcher le comportement par défaut du navigateur
      event .preventDefault ? event.preventDefault() : (event.returnValue = false);
    • 🎜Empêcher le bouillonnement d'événement
      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!