DOM event object

The event object will be obtained when the event is triggered , Object contains some information about the current event , For example, click the event to get the clicked location , Keyboard input events can get the pressed key .

1. Get event object

In giving DOM When a node binds an event , You need to pass an event handler , It is essentially a function , Called when the event triggers .

When the event handler is called , By default, a parameter will be passed , This parameter is the event object .

2. Properties and methods under common event objects

2.1 attribute

2.1.1 target

target Indicates the target finally captured by the current event .

<div class="a">
   I am the first node  a
  <div class="b">
     I am the second node  b
    <div class="c">
       I am the third node  c
      <div class="d">
         I am the fourth node  d
        <div class="e">
           I am the fifth node  e
          <div class="f">
             I am the innermost element  f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: 16px;"></div>

<script> var resultEle = document.querySelector('.result'); document.querySelector('.a').addEventListener('click', function(e) {
       resultEle.innerText = ' The captured element class name is ' + e.target.className; }); </script>

You can see that the event is bound to the class named c Node , When clicking on its child nodes , The child node is the element finally captured .

Empathy , Clicking on other nodes will also capture the corresponding element class name

2.1.2 currentTarget

adopt currentTarget You can get the element that triggers the event at present .

<div class="a">
   I am the first node  a
  <div class="b">
     I am the second node  b
    <div class="c">
       I am the third node  c
      <div class="d">
         I am the fourth node  d
        <div class="e">
           I am the fifth node  e
          <div class="f">
             I am the innermost element  f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: 16px;"></div>

<script> var resultEle = document.querySelector('.result'); document.querySelector('.a').addEventListener('click', function(e) {
       resultEle.innerText = [ ' The class name of the element that currently triggers the event is ：', e.currentTarget.className, '. The currently captured element class name is ：', e.target.className, ].join(''); }); </script>

No matter which child node is clicked ,currentTarget Are nodes that represent the current trigger event .

2.2 Method

2.2.1 stopPropagation

Calling this method will prevent the event from bubbling , Most of the scenarios used are when a parent element and the element itself are bound with the same event .

2.2.2 preventDefault

This method can cancel the default behavior of the event , For example, click on hyperlinks , Jump will occur , Jump action is the default behavior .

Bind click events to hyperlinks , Call preventDefault attribute , The default behavior will be canceled , That is, there will be no jump .

<a href="http://www.baidu.com/"> Baidu </a>

<script> var aTag = document.querySelector('a'); aTag.onclick = function(e) {
       e.preventDefault(); alert(' Jump terminated ！'); }; </script>

3. Summary

The event object contains information about the event , There are event objects , In order to do deeper interaction optimization for each event .