Deepen understanding after practice One: Event flow Understanding of the next event flow chart
Two: event delegation Principle of event delegation
When there are a large number of events of the same type, you can use the delivery process of the event stream to bind the event response logic to the common ancestor node of all event targets. At the same time, use the event object .target to get the specific event target node and then get the content of the event target.
Advantages of event delegation
Since the event processing logic is bound to the ancestor node instead of each event target, you only need to register the event once in the ancestor node, instead of managing the number of child nodes or dynamically adding child nodes.
Practice process One: Event capture and event bubbling The test code is as follows < ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> 事件流< / title>
< style type= "text/css" >
#outer{
width: 150 px; height: 150 px; background- color: red; }
#inner{
width: 80 px; height: 80 px; background- color: green; }
< / style>
< / head>
< body>
< div id= "outer" > outer box
< div id= "inner" > inner box< / div>
< / div>
< script type= "text/javascript" >
let inner = document. getElementById ( 'inner' ) ;
let outer = document. getElementById ( "outer" ) ;
let body = document. getElementsByTagName ( "body" ) [ 0 ] ;
let nodeArr = [ inner, outer, body, document, window] ;
let tipsArr = [ "inner" , "outer" , "body" , "document" , "window" ] ;
nodeArr. forEach ( ( ele, index) => {
ele. addEventListener ( 'click' , ( e) => {
console. log ( ` ${
tipsArr[ index] } click 捕获` ) ;
} , true ) ;
ele. addEventListener ( 'click' , ( e) => {
console. log ( ` ${
tipsArr[ index] } click 冒泡` ) ;
} , false ) ;
} ) ;
< / script>
< / body>
< / html>
Operation result (click the inner area)
Small details: the capture and bubbling of target object events are related to the execution order of capture events/bubbling events [tests are as follows]
Adjust the order of capture/bubbling event registration
nodeArr. forEach ( ( ele, index) => {
ele. addEventListener ( 'click' , ( e) => {
console. log ( ` ${
tipsArr[ index] } click 冒泡` ) ;
} , false ) ;
ele. addEventListener ( 'click' , ( e) => {
console. log ( ` ${
tipsArr[ index] } click 捕获` ) ;
} , true ) ;
} ) ;
Operation result (click the inner area, that is, the target object event is the capture and bubbling of inner)
Capture/bubble interception
Event registration code, add event interception (the following example intercepts bubbling)
nodeArr. forEach ( ( ele, index) => {
ele. addEventListener ( 'click' , ( e) => {
console. log ( ` ${
tipsArr[ index] } click 捕获` ) ;
} , true ) ;
ele. addEventListener ( 'click' , ( e) => {
console. log ( ` ${
tipsArr[ index] } click 冒泡` ) ;
e. stopPropagation ( ) ;
} , false ) ;
} ) ;
operation result
Two: event delegation (agent) The test code is as follows < ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> 事件委托< / title>
< style>
ul{
float: left;
}
< / style>
< / head>
< body>
< ul>
< li> < button> one< / button> < / li>
< li> < button> two< / button> < / li>
< li> < button> three< / button> < / li>
< li> < button> four< / button> < / li>
< li> < button> five< / button> < / li>
< / ul>
< script>
let ul = document. getElementsByTagName ( 'ul' ) [ 0 ] ;
ul. addEventListener ( 'click' , ( e) => {
let btn = e. target;
console. log ( btn. textContent) ;
} , true ) ;
function addLi ( text) {
let li = document. createElement ( 'li' ) ;
let btn = document. createElement ( 'button' ) ;
btn. textContent = text;
li. appendChild ( btn) ;
ul. appendChild ( li) ;
}
< / script>
< / body>
< / html>
operation result
