We know , If form Inside button Element binding event , Need to consider whether it will trigger form Of submit behavior . besides , For other occasions button
Element binding event , You hardly have to worry about the unintended side effects of this event , It's natural to write event handling code like this :
var button = document.querySelector('button') button.addEventListener('click',
function (e) { console.log(' Click the button ') })
Why don't you worry , Because of this button Element does not use event agent , That is, events that do not represent any child elements .

Event agent means , You want to bind events for an element , But you don't bind events directly to the element itself , It is bound to the parent element of this element . When an event of a child element ( For example, click event ) When triggered , The same event will be triggered for its parent element ( The events we often talk about are bubbling ), At this point, we say that the parent element represents the event of the child element .

for instance , Like a button Element contains a gear Icon :
<button> <svg> <use xlink:href="#gear"></use> </svg> </button>
When the user clicks the Gear Icon , Must trigger click event , But you don't bind events directly to svg or use On element , It's bound to their parent button upper . Namely :
document.querySelector('button').addEventListener('click', function (e) {
console.log(' Click the button ') })
This is the case , We can say ,button Element represents the click event .

however , When this event agent situation occurs , We have to be careful .

To illustrate the problem more intuitively , We put “ father ” Elements that rise to the top document element :
document.documentElement.addEventListener('click', function (e) {
console.log(' I was clicked ') })
As long as any part of the page is clicked , Will trigger binding in document Click event on element .​ Want to know which element the event happened on , Available through event objects
target Attribute to judge .
document.documentElement.addEventListener('click', function (e) {
console.log(e.target) })
It's easy to know which element the event happened to . So in the example above , If the parent element document What do you want to do when the button is clicked , It's natural for us to write that :
document.documentElement.addEventListener('click', function (e) { if
(e.target.tagName === 'BUTTON') { console.log(' Button clicked ') } })
And then there's the problem , Even if the button is clicked if
Conditions are not necessarily true , That's not necessarily output “ Button clicked ”. Because the user clicked somewhere on the button , According to the location clicked by the user ,e.target There are three possible scenarios :

* BUTTON element
* SVG element
* USE element
This is the actual situation :

Our real intention is , As long as the click is on the button , No matter where the button is , We should all think that the button was clicked . Um. , simple , Let's change it again , Write like this :
document.documentElement.addEventListener('click', function (e) { if
(['BUTTON', 'SVG', 'USE'].includes(e.target.tagName.toUpperCase())) { // Click the button
} })
It doesn't seem to be a problem , It's true that we can achieve our goal , But it always looks awkward . Because this is the case for the top document
In terms of , You need to know about each child element , I just need to care about the nearest button Element is OK .

according to OOP The idea of inner encapsulation ,button Things inside the element should be digested inside , Its child elements are invisible , It should only be exposed button
Element itself . According to this thought and the bubbling characteristics of the event , We have a better solution : Just ban button Event response for internal elements ( Including event bubbling ) Only allowed button
The event of the element itself happens . There are two ways to do this .

One is to use CSS prohibit button Event response for internal elements :
button > * { pointer-events: none; }
The other is to use JS To stop button Event response for internal elements ( Including event bubbling ):
document.querySelector('button > svg').addEventListener('click', function (e)
{ e.stopPropagation() e.preventDefault() })
document.querySelector('button').addEventListener('click', function (e) {
console.log(e.target.tagName) })
Both of these methods can achieve the expected results :

To sum up , When handling events for specific elements , If the element has an event agent , You have to be careful with the child elements it represents .

Technology
©2019-2020 Toolsou All rights reserved,
Unity Scene loading asynchronously ( Implementation of loading interface )ESP8266/ESP32 System : Optimize system startup time vue Of v-if And v-show The difference between JS How to operate college examination for the self-taught An overview of Marxism Faster RCNN Explanation of series algorithm principle ( note )CSS architecture design NOI2019 travels IAR Installation and use tutorial sort ( one ) bubble sort