概述:
js事件是有级别的, 原生的事件, on开头的事件, 我们称之为dom0级事件, 还有dom2级事件.
1. dom0级事件和dom2级事件
阶段
dom事件是有阶段之说的:
一个事件分为捕获阶段, 冒泡阶段, dom0级事件只有冒泡阶段, 没有捕获阶段
捕获阶段 : window --> document --> body --> div
冒泡阶段: window <-- document <-- body <-- div
dom0级事件只有冒泡阶段,没有捕获阶段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } div.outer{ position: relative; 100px; height: 100px; background-color: red; margin: auto; } div.inner{ position: absolute; margin-left: 30px; margin-top: 30px; 40px; height: 40px; background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="inner"> </div> </div> <script> // dom0级事件,是以onxxx开头的事件,只有冒泡阶段, 没有捕获阶段 var inner = document.querySelector('.inner'); var outer = document.querySelector('.outer'); window.onclick = function(){ alert('我是冒泡阶段的windo') }; document.onclick = function(){ alert('我是冒泡阶段的document') }; document.body.onclick = function(){ alert('我是冒泡阶段的body') }; outer.onclick = function(){ alert('我是外层的div 我触发了') }; inner.onclick = function () { alert('我是内层div, 我触发了') } </script> </body> </html>
点击内层黄色的div, 发现所有点击事件都触发了,出发顺序从内层到外层依次出发, 这就称之为冒泡
dom2级事件
不仅仅有冒泡阶段,还有捕获阶段
语法: div.addEventListener(eventType, callback, 布尔值)
1: 第一个参数是事件的类型, click, dbclick, mouserover .....
2:第二个参数是回调函数,当事件触发的时候,回调函数会执行
3:如果布尔值是true,则表示该函数是捕获阶段,否则为冒泡阶段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ position: relative; 100px; height: 100px; margin: auto; margin-top: 100px; background-color: red; } .inner{ position: absolute; margin-top: 40px; margin-left: 40px; 30px; height: 30px; background-color: yellow; } </style> </head> <body> <div id="outer" class="outer"> <div id="inner" class="inner"> </div> </div> <script> var inner = document.getElementById('inner'); var outer = document.getElementById('outer'); // window对象的捕获阶段 window.addEventListener('click', function () { alert('我是window的捕获阶段') }, true); document.addEventListener('click', function () { alert('我是document的捕获阶段') }, true); document.body.addEventListener('click', function () { alert('我是body的捕获阶段') }, true); outer.addEventListener('click', function () { alert('我是outer的捕获阶段') }, true); inner.addEventListener('click', function (argument) { alert('我执行了') }, true) </script> </body> </html>
点击最内层的div会发现从window开始由大到小依次执行点击事件的捕获阶段
单机事件的第三个参数设置为false时,改事件执行冒泡阶段
2. 事件的移除
dom2 级事件的移除方法是 removeEventListenr(eventtype, callback, 布尔值)
如果不传递第三个参数,默认是冒泡阶段
3.特殊事件
概述: 在js当中有两个非常出名的事件 onmouseenter 和 onmouseout 不冒泡
onmouseenter和onmouseleave不会有冒泡事件
onmouseover和onmouseout有冒泡事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #num1{ position: relative; 100px; height: 100px; background: red; margin: 50px auto; } #num2{ position: absolute; 50px; height: 50px; background-color: yellow; margin: 25px 25px; } #num3{ position: absolute; 25px; height: 25px; background-color: blue; margin: 12.5px 12.5px; } </style> </head> <body> <div id="num1"> <div id="num2"> <div id="num3"> </div> </div> </div> <script> // var num1 = document.getElementById('num1'); // num1.onmouseover = function(){ // console.log('我是mum1的mouseouver'); // }; // var num2 = document.getElementById('num2'); // num2.onmouseover = function(){ // console.log('我是mum2的mouseouver'); // }; // var num3 = document.getElementById('num3'); // num3.onmouseover = function(){ // console.log('我是mum3的mouseouver'); // }; var num1 = document.getElementById('num1'); num1.onmouseenter = function(){ console.log('我是mum1的mouseouver'); }; var num2 = document.getElementById('num2'); num2.onmouseenter = function(){ console.log('我是mum2的mouseouver'); }; var num3 = document.getElementById('num3'); num3.onmouseenter = function(){ console.log('我是mum3的mouseouver'); }; </script> </body> </html>