Event bubbling mechanisms for mouseover and Mouseout

2, code,

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <div class="outer" id="outer"> <div class="inner" id="inner"></div> </div> </body> </html> <style> .outer { width: 100px; height: 100px; background: indigo; } .inner { width: 50px; height: 50px; background: lightcoral; </style> <script> //mouseover and mouseout Outer. Onmouseout = function () {console.log('outer over')} outer. Onmouseout = function () { console.log('outer out') } inner.onmouseover = function () { console.log('inner over') } inner.onmouseout = function () { console.log('inner out') } </script>Copy the code

Execution Result:

3. Event propagation mechanisms for MouseEnter and Mouseleave

4, code,

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <div class="outer" id="outer"> <div class="inner" id="inner"></div> </div> </body> </html> <style> .outer { width: 100px; height: 100px; background: indigo; } .inner { width: 50px; height: 50px; background: lightcoral; </style> <script> //mouseover and mouseout Outer. Onmouseenter = function () {console.log('outer over')} outer. Onmouseleave = function () { console.log('outer out') } inner.onmouseenter = function () { console.log('inner over') } inner.onmouseleave = function () { console.log('inner out') } </script>Copy the code

Execution Result: