概述:
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; width: 100px; height: 100px; background-color: red; margin: auto; } div.inner{ position: absolute; margin-left: 30px; margin-top: 30px; width: 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; width: 100px; height: 100px; margin: auto; margin-top: 100px; background-color: red; } .inner{ position: absolute; margin-top: 40px; margin-left: 40px; width: 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时,改事件执行冒泡阶段