Finally understand DOM events!

takeaway

Several ways to bind DOM events
- The DOM element is bound above
- Js code anonymously bound
- IE event listener binding: attachEvent/detachEvent
- Event listener binding: addEventListener/removeEventListener
- Compatible with IE event listening
Flow of events
- What are the phases of the event flow?
- Evolution of THE DOM event flow
Event delegation
- What is event delegation
- Benefits of event delegation
- Event delegate in jquery
- How do you implement event delegation
What is the difference between Target and currentTarget?

🐑 several ways to bind DOM events

1.DOM element binding

<button onclick="btnClick1()" onclick="btnClick2()">click me</button>

<script>
function btnClick1(){console.log('click! 1 ')}

function btnClick2(){console.log('click! 2 ')}
</script>
Copy the code

If multiple onclick events are bound to the same element, only the first one is executed.

2. Anonymous binding of js code

btn.onclick = function(){console.log('1')}
btn.onclick = function(){console.log('2')}
Copy the code

If it is anonymously bound in JS, only the last one will be executed.

3. The IE event listening binding is attachEvent/detachEvent

btn.attachEvent('onclick'.function(){})
Copy the code

1. Event name, with ON

2. If multiple click events are bound to the same element, they will all be executed in sequence.

3. Note: This method is not supported by Chrome, only by IE

4. Unbind events to avoid memory leaks

4. Event listener binding: addEventListener/removeEventListener

btn.addEventListener('click'.function(){}, false) // The capture phase can be distinguished from the bubble phase
Copy the code

1. The event name does not contain ON

2. If multiple click events are bound to the same element, they are executed in sequence.

3. The third parameter indicates whether to enable/enable the event capture phase. The default is false, which means the bubble phase is enabled by default.

4. Unbind events to avoid memory leaks

5. Compatible with IE event monitoring

if (a.addEventListener) {
	a.addEventListener('click'.function(){
      console.log('is addEventListener! ')})}else if (a.attachEvent) {
	a.attachEvent('onclick'.function(){
      console.log('is attachEvent! ')})}else {
	console.log('others')}Copy the code

🐑 Event flow?

What are the phases of the event flow?

1. Capture stage: from top to bottom, document will first capture, to HTML, body,… , up to the element that triggered the event

2. Target stage: The element that triggers the event

3. Bubble phase: from the bottom up, the element that triggered the event goes to the parent element… , to body, HTML, document

Evolution of THE DOM event flow

In fact, at the beginning of DOM0, there was only the target phase and the bubble phase, until the emergence of DOM2, the capture phase was introduced.

1.DOM0

The DOM0 event flow has only two phases: target phase + bubble phase

btn.onclick = function(){}Copy the code

2.DOM2(Not supported by IE)

The DOM2 event flow has only three phases: capture phase + target phase + bubble phase

How do you distinguish the capture phase from the bubble phase in DOM2?

The second parameter addEventListener means whether to enable event capture. Can distinguish true event capture, default is false event bubble.

btn.addEventListener('click'.function(){},true) // true event capture

btn.removeEvenetListener('click'.function(){},false) // false event bubble (default)

Copy the code

🐑 Event delegate

What is event delegation

Event delegation is to delegate the response events of your element to other elements. It’s usually the delegate on the parent element.

Benefits of event delegation

1. Reduce memory consumption

If it is a list, we bind the same event to each list item, which is very memory consuming.

We can bind to the parent component list to reduce memory consumption;

2. Reduce rework

Our list items, if deleted or added, have to do the same thing repeatedly: delete events and bind events.

If we bind to the parent component, we don’t have to do all this work.

Event delegate in jquery

on/delegate

How do you implement event delegation

Event delegation is typically implemented by event bubbling

Example 🌰 : use addEventListener to click li to pop up content, and add li dynamically

<ul id="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
Copy the code

// Bind events to parent elements
document.getElementById('list').addEventListener('click'.function (e) {
  var target = event.target
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML); }});Copy the code

🐑 Target and currentTarget what is the difference?

Target refers to the target stage.

CurrentTarget refers to the capture, target, and bubbling phases. (Usually refers to the parent of the target element)

<div id="c">c
    <div id="b">b
    	<div id="a">a</div>
  </div>
</div>
Copy the code

const b = document.getElementById('b');
const a = document.getElementById('a');
const c = document.getElementById('c');

b.addEventListener('click', (e)=>{
  console.log("click b=>"."target:",e.target, "currentTarget:",e.currentTarget)
})
//b.addEventListener('click', (e)=>{
// console.log("click b=>", "target:",e.target, "currentTarget:",e.currentTarget)
//},true) // Capture phase

a.addEventListener('click',(e)=>{
  console.log("click a=>"."target:",e.target, "currentTarget:",e.currentTarget)
})
//a.addEventListener('click',(e)=>{
// console.log("click a=>", "target:",e.target, "currentTarget:",e.currentTarget)
//},true) // Capture phase

c.addEventListener('click',(e)=>{
  console.log("click c=>"."target:",e.target, "currentTarget:",e.currentTarget)
})
//c.addEventListener('click',(e)=>{
// console.log("click c=>", "target:",e.target, "currentTarget:",e.currentTarget)
//},true)// Capture phase

Copy the code

1. When clicking on module C

Capture phase: C (currentTarget)

Target stage: C (Target)

Bubbling phase: C (currentTarget)

2. When clicking on module B

Capture phase: C

The click event is triggered by the C module, so the currentTarget of c module is C module, but the target of C module is B module

Target stage: B

For the B module itself, target and currentTarget are themselves

Bubble stage: C

The click event is triggered by the C module, so the currentTarget of c module is C module, but the target of C module is B module

Click on b module.jpg

3. When clicking module A

Capture phase: C — B

It passes through c and B modules, so the click events of C and B modules are triggered. For a C module, currentTarget is the C module and target is the A module. For module B, currentTarget is module B, target is module A.

Target stage: A

For the A module itself, target and currentTarget are themselves

Bubble stage: B — C

The last