首頁 > 開發者 > JavaScript
標籤：
事件流
事件流是描述的從頁面接受事件的順序，當幾個都具有事件的元素層疊在一起的時候，那麼你點擊其中一個元素，並不是只有當前被點擊的元素會觸發事件，而層疊在你點擊範圍的所有元素都會觸發事件。事件流包括兩種模式：冒泡和捕獲。
事件冒泡，是從裡往外逐個觸發。事件捕獲，是從外往裡逐個觸發。那麼現代的瀏覽器預設情況下都是冒泡模型，而捕獲模式則是早期的 Netscape 預設情況。而現在的瀏覽器要使用 DOM2 級模型的事件綁定機制才能手動定義事件流模式。
<script type="text/javascript"> window.onload = function(){ document.onclick = function () { alert(‘我是 document‘); }; document.documentElement.onclick = function () { alert(‘我是 html‘); }; document.body.onclick = function () { alert(‘我是 body‘); }; document.getElementById(‘box‘).onclick = function () { alert(‘我是 div‘); }; document.getElementsByTagName(‘input‘)[0].onclick = function () { alert(‘我是 input‘); }; }; </script></head><body> <div id="box" style="width:100px; height:100px; background-color:#F00"> <input type="button" value="按鈕"/> </div></body>
阻止冒泡
<script type="text/javascript"> window.onload = function(){ document.onclick = function () { alert(‘我是 document‘); }; document.documentElement.onclick = function () { alert(‘我是 html‘); }; document.body.onclick = function () { alert(‘我是 body‘); }; document.getElementById(‘box‘).onclick = function () { alert(‘我是 div‘); }; document.getElementsByTagName(‘input‘)[0].onclick = function (evt) { var e = evt || window.event; alert(‘我是 input‘); e.stopPropagation() }; };</script></head><body> <div id="box" style="width:100px; height:100px; background-color:#F00"> <input type="button" value="按鈕"/> </div></body>
JavaScript的事件對象_事件流
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
