Js summary (3) – DOM

event

1. Use on-starting times such as onclick, etc

2. addEventListener

3. The difference between the two is that the same element and the same event can be set to more than one function. The function that starts on overwrites the function that starts on, but the listener that does not

   
   html
   <button> Traditional registration event </button>
   The  method listens for the registration event </button>
       <script>  var btns = document.querySelectorAll('button');  btns[0].onclick = function () {  alert('hh')  }  btns[0].onclick = function () {  alert('enen')  } / / the pop-up 'enen'  btns[1].addEventListener('click'.function () {  console.log(1);  })  btns[1].addEventListener('click'.function () {  console.log(2);  })// Pop 1 and 2 respectively Copy the code

Delete events

• Traditionally, events are assigned a value of NULL

• RemoveEventListener, where the function is a named function

   <div>1</div>
   <div>2</div>
   <div>3</div>
   // Print only once
          var divs = document.querySelectorAll('div');
   divs[0].onclick = function () {  console.log(1);  divs[0].onclick = null;  }  divs[1].addEventListener('click', fn)  function fn() {  console.log(22);  divs[1].removeEventListener('click', fn)  } Copy the code

The DOM event flow

There are three stages in the transmission of events

• Capture phase
• Current target stage
• Bubbling phase

Let’s start with an image capture phase

 <div class="father">
        father
        <div class="son">son</div>
    </div>
    <script>  var son = document.querySelector('.son');  var father = document.querySelector('.father');  son.addEventListener('click'.function () {  console.log(11)  }, true)  father.addEventListener('click'.function () {  console.log(22)  }, true)  // Print 11 before 22  </script> Copy the code

The principle of capture stage is as follows: the event is propagated according to document HTML body father son. When Son clicks, the capture starts from Document; when father has a click event, it triggers and outputs 22; then son has a click event and outputs 11

• Only one of the phases can be captured or bubbled in js

• Onclick only reaches the bubbling stage

• The third argument to addEventListener is true to trigger the program during the capture phase. The default is false,

  Indicates that the program can only be called during the bubbling phase

• Some events do not bubble, such as onblur, onFocus, onMouseEnter, onmouseleave

Event object

Event delegation

Suppose there are the following scenarios:

< ul > < li > reform spring breeze blowing all < / li > < li > reform spring breeze blowing all < / li > < li > reform spring breeze blowing all < / li > < li > reform spring breeze blowing all < / li > < li > reform spring breeze blowing all < / li > < / ul >Copy the code

So clicking on each li will bring up a dialog box,

 // The traditional way is this
var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                alert('hhh')
 }  } Copy the code

The principle of event delegation: instead of setting event listeners on each child node, set event listeners on the parent node. Using the bubbling principle, when each child node has an action, the corresponding action of the parent node will be triggered

var ul = document.querySelector('ul');
        ul.addEventListener('click'.function (e) {
            e.target.style.backgroundColor = 'pink'
        })
Copy the code

Animation function encapsulation

Principle: Continuously move the box position through the timer setInterval

Steps:

1. Gets the current position of the box
2. Add a movement distance to the current position of the box
3. Use a timer and repeat
4. Add a timer end condition
5. Note that this element must be positioned to use element.style.left

Slow animation

Let the box move less distance each time

Thread :(target value – current position) /10

The stop condition is: make the current box position equal to the target position to stop the timer

Add a callback function: execute the callback function when the box stops moving

   function  animate(obj, target, callback) {
            clearInterval(obj.time)
            obj.time = setInterval(function () {
                if (obj.offsetLeft == target) {
                    clearInterval(obj.time)
 // if (callback) {  // callback()  // }  callback && callback();  }  var step = (target - obj.offsetLeft) / 10;  step = step > 0 ? Math.ceil(step) : Math.floor(step)  obj.style.left = obj.offsetLeft + step + 'px'  }, 30)  } Copy the code