This is the ninth day of my participation in the First Challenge 2022

Hi I am small 17 _, today is the ninth day of the Chinese New Year, before finishing up some basic knowledge about JS events, here to share with you.

The three stages of the event

Capture: from the window object to the target node. 2. Target: fires 3 on the target node. Bubble: From the target node to the Window object

Codepen. IO/ubuntugx/PE…

Register event handlers for DOM elements

EventTarget.addEventListener

myButton.addEventListener('click'.function(){}, false);
Copy the code

Note: Internet Explorer 6-8 does not support this method and instead provides a similar element.attachevent API. For cross-browser use, consider using a valid JavaScript library. Codepen. IO/ubuntugx/PE… The two are different:

  1. Ie8 and below does not support capture, so attachEvent does not have a third argument
  2. AttachEvent has ‘on’ before the first argument
  3. This points to a different attachEvent. This points to a window, and addEventListener points to the object being processed

Advantages:

  1. An event can register multiple listeners
  2. You can choose to capture or bubble (the other two can only be triggered during bubble)
  3. This works for any DOM element, not just HTML elements

HTML attributes

<div onclick="alert('clicked! ')"></div>
Copy the code

Disadvantages: increases the number of tags in HTML, poor readability, does not separate behavior from structure, bugs are hard to trace

DOM element attributes

myButton.onclick = function(){console.log('clicked! ')}
Copy the code

Disadvantages: You can only set one handler per element and event

Codepen. IO/ubuntugx/PE…

The event broker is also called the event delegate

Use event bubbling during event propagation to listen for events on the parent element and determine which element triggers the event according to E.target.

<ul>
	<li></li>
	<li></li>
</ul>
Copy the code
document.querySelector('ul').addEventListener('click'.function(e){
	if(e.target.tagName.toLowerCase === 'li') {console.log('clicked! ')}},false)
Copy the code

Advantages:

  1. No need for circular event registration, function declaration, reduce memory overhead
  2. When an element is rendered dynamically, new elements are added without having to bind the event again

Codepen. IO/ubuntugx/PE…

E. arget and e.c. with our fabrication: urrentTarget

e.target

The element that triggers the event

e.currentTarget

The element of the currently registered event (such as the DOM object that calls addEventListener)

Codepen. IO/ubuntugx/PE…

This points to the

Use addEventListener to register events for the element, and this is a reference to the element. When using the HTML event attribute, the string passed later is wrapped in a function whose this pointer corresponds to the addEventListener when executed. So:

<table id="t" onclick="modifyText();">
Copy the code

for

function(){
	// This refers to the table DOM object
	modifyText();  // this points to window (strictly undefined)
}
Copy the code

To change the this pointer, you can use bind, but be careful to save the function reference for unbinding.

Developer.mozilla.org/zh-CN/docs/…

Codepen. IO/ubuntugx/PE…