Eingehende Analyse des Ereignisobjekts Event in JS

Nachdem ein Ereignis eintritt, wird ein Ereignisobjekt (Ereignis) generiert, das den Status des Ereignisses darstellt. Der folgende Artikel vermittelt Ihnen ein tiefgreifendes Verständnis des Ereignisobjekts Event in JS und eine detaillierte Interpretation davon. Ich hoffe, dass er für alle hilfreich ist!

1. Was ist ein Ereignisobjekt Event

 Wenn jedes Ereignis ausgelöst wird, wird ein entsprechendes Ereignisobjekt event generiert, das die Elemente enthält, die das Ereignis ausgelöst haben, Tastatur und Mausstatus, Standort usw. 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

    Immer wenn ein Benutzer ein Ereignis auslöst, generiert JS automatisch ein event-Objekt. Abhängig vom auslösenden Ereignis enthält dieses Objekt beispielsweise unterschiedliche Inhalte code>MouseEvent-Objekt, das die Position der Maus und andere Inhalte enthält; das Auslösen eines Ereignisses über die Tastatur generiert ein KeyboardEvent-Objekt, das tastenbezogene Informationen enthält. 🎜
  • event-Objekt stellt den Status des Ereignisses dar, z. B. das Element, das das Ereignis ausgelöst hat, den Status der Tastaturtasten, die Position der Maus, den Status der Maus Schaltflächen usw.;
  • Das event-Objekt ist ein impliziter Parameter und nur während des event;
  • event-Objekts gültig hat je nach auslösender Methode unterschiedliche Eigenschaften, d. h. einige Eigenschaften sind nur für bestimmte Ereignisse gültig, alle Inhalte werden jedoch vom Event-Objekt geerbt;
  • 🎜event-Objekte verhalten sich in Browsern wie IE und Chrome unterschiedlich. Beispielsweise stellt event.target das Element dar Das löst das Ereignis aus. Im IE muss der Code mit event.srcElement abgerufen werden > Das Objekt selbst ist ein Konstruktor, mit dem neue Instanzen generiert werden können. 🎜

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

    🎜Event-Konstruktor akzeptiert zwei Parameter. Der erste Parameter type ist eine Zeichenfolge, die den Namen des Ereignisses angibt; der zweite Parameter options ist ein Objekt, das die Konfiguration des Ereignisobjekts angibt. Dieses Objekt hat hauptsächlich die folgenden zwei Eigenschaften. 🎜
    • 🎜bubbles: Boolescher Wert, optional, standardmäßig auf „false“ gesetzt, der angibt, ob das Ereignisobjekt Blasen wirft. 🎜
    • 🎜cancelable: Boolescher Wert, optional, standardmäßig auf „false“ gesetzt, der angibt, ob das Ereignis abgebrochen werden kann, d. h. ob es mit Event.preventDefault abgebrochen werden kann ()</code >Dieses Ereignis absagen. Sobald ein Ereignis abgebrochen wird, ist es so, als ob es nie stattgefunden hätte und das Standardverhalten des Browsers für dieses Ereignis wird nicht ausgelöst. 🎜</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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜Der obige Code erstellt eine neue <code>look-Ereignisinstanz und verwendet dann die Methode dispatchEvent, um das Ereignis auszulösen. 🎜🎜Beachten Sie, dass das generierte Ereignis die Abhörfunktion nur in der „Erfassungsphase“ auslösen kann, wenn das Attribut bubbles nicht explizit als true angegeben ist. 🎜

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

      🎜Im obigen Code gibt das p-Element ein click-Ereignis aus, das standardmäßig nicht sprudelt. Die Methode div.addEventListener gibt das Abhören während der Bubbling-Phase an, sodass die Abhörfunktion nicht ausgelöst wird. Wenn es als div.addEventListener('click', callback, true) geschrieben ist, kann dieses Ereignis während der „Erfassungsphase“ überwacht werden. 🎜🎜Andererseits, wenn dieses Ereignis auf einem div-Element ausgelöst wird. 🎜

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

      🎜Dann wird die Abhörfunktion ausgelöst, unabhängig davon, ob das div-Element in der Sprudelphase oder in der Erfassungsphase lauscht. Da das div-Element zu diesem Zeitpunkt das Ziel des Ereignisses ist, besteht kein Zweifel daran, dass das div-Element das Ereignis immer empfängt und somit das verursacht Abhörfunktion wirksam werden. 🎜🎜🎜2. Ereignisattribute 🎜🎜🎜  Wir haben bereits erwähnt, dass das event-Objekt je nach Auslösemethode unterschiedliche Attribute haben wird: 🎜🎜🎜< span style="color:#006cb7">Gemeinsame Eigenschaften🎜 (Eigenschaften, die unabhängig davon besitzen, ob sie durch Tastatur oder Maus ausgelöst werden)🎜
      • 🎜bubbles< /code> Ob das Ereignis wird aufblasen, boolescher Wert; 🎜</li><li>🎜<code>cancanable Ob das Ereignis ein Standardverhalten hat, boolescher Wert;
          Das Standardverhalten bezieht sich auf das Verhalten im Browser. Einige vorgeschriebene Verhaltensweisen B. durch Klicken auf das Tag <a> wird zum Link gesprungen, durch Drücken der Eingabetaste im Tag <form> wird der Link automatisch gesendet usw. 🎜
      • 🎜currentTarget Das Element, für das der Event-Handler gerade das Ereignis verarbeitet, gibt ein Element-Objekt 🎜
      • 🎜 zurück < code>defaultPrevented Ob das Ereignis das Standardverhalten aufhebt, Boolescher Wert; 🎜
      • 🎜detail Gibt eine Zahl zurück, die die Ereignisdetails enthält
          In In den Ereignissen click, mousedown und mouseup stellt diese Zahl die aktuelle Anzahl der Klicks dar. Im Ereignis dblclick beträgt diese Zahl immer 2 . Bei Tastaturereignissen und Mouseover-Ereignissen ist diese Zahl immer 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. Ereigniskompatibilitätsverarbeitung

       Unter Berücksichtigung der Unterschiede zwischen Ereignisobjekten von Browsern wie IE und Chrome müssen die folgenden vier Attribute verarbeitet werden. 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);

        • ruft das event-Objekt
          var event = event || window.event;

      • ruft ab target object
        var target = event.target ||. event.srcElement;

      • Browser-Standardverhalten verhindern
        event .preventDefault ? event.preventDefault() : (event.returnValue = false);
      • 🎜Ereignisblasen verhindern
        event.stopPropagation ? event.stopPropagation() : (event .cancelBubble = true );🎜🎜🎜🎜【Verwandte Empfehlungen: 🎜Javascript-Lern-Tutorial🎜🎜】🎜🎜

      Das obige ist der detaillierte Inhalt vonEingehende Analyse des Ereignisobjekts Event in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!