当前位置：网站首页>JS event introduction

JS event introduction

2022-07-29 01:33:00 【godton】

Flow of events

Click on an element in a page , This element is not the only one that triggers , It also includes all the parent content outside this element ; Use the description of the red book ： Draw several concentric circles on a piece of paper , Put your finger in the center of the circle , It is also placed in the center of all circles . IE Browser and Netscape browser use two methods to deal with this contradiction .
1. Event Bubbling
IE The browser adopts the bubbling method , Bubbling is from the underlying element To the highest element Document First floor One layer bubbles upward ：
div -> body -> html -> document

2. Event capture
Netscape browser is just the opposite , From the top , The element finally captures the event
document -> html -> body -> div

And in the DOM2 period , Three stages of the event are defined , Event capture 、 Reach the target 、 Event Bubbling .

Event handler

Event handling is divided into DOM0 and DOM2 Event handling ,DOM0 In design pattern, it is observer pattern , Is triggered in the bubbling stage

DOM0 Event handler

let btn = document.getElementById('mybtn')
btn.onClick = function() {
    
	console.log('clicked')
}

but DOM1 The event will be overwritten , Only one corresponding function can be processed .

DOM2 Event handler

DOM2 The event processing of can control whether it is triggered in the bubbling stage or the capture stage , Is the publish subscribe mode .
addEventListener( 'Event', Function, Boolean)
Event Is the name of the triggered event ,Function Is the corresponding processing function ,Boolean Of flase Is the default value , Indicates that in the bubbling stage ;true For the capture phase .

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' _ => {
     console.log('clicked'), true)

DOM2 The advantage of is that you can add multiple processing functions , And will not be covered

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' _ => {
     console.log('clicked'), true)
btn.addEventLisenter('click' _ => {
     console.log('HelloWorld'), false)

Event object

All events have their own event object , This object will be passed in when calling the function

let btn = document.getElementById('mybtn')
btn.onClick = function(e) {
    
	console.log(e) //PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
}

let btn = document.getElementById('mybtn')
btn.addEventLisenter('click' e => {
     console.log(e), true)
//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}