事件的截獲

時間 2019-11-09

標籤事件截獲简体版

原文原文鏈接

1.事件截獲原理javascript

利用事件的捕獲階段，添加事件。html

再利用觸發事件元素(e.target)來判斷(根據必定的標識或者某些特徵)是不是咱們須要劫持的dom。java

2.具體攔截dom

這裏使用id做爲一個判斷根據，真實場景中確定不是這樣的。spa

這裏的特徵是須要根據必定的規則去尋找的。(這裏只是爲了演示原理)3d

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>118boys</title>
</head>
<body>

<div style="width: 200px;height: 200px;border:1px solid" id="warp">
    <div style="width: 100px;height: 100px;border:1px solid" id="ok">可疑目標</div>    
</div>


</body>
<script type="text/javascript">
    
    var warp = document.getElementById('warp'), dom = document.getElementById('ok'); dom.addEventListener('click', function(){ console.log("可疑目標") },false) warp.addEventListener('click', function(e){ var e = event || window.event, target = e.target || e.srcElement; if(target.getAttribute('id') === 'ok'){ console.log('劫持id=ok的dom,成功!') console.log('觸發事件元素(e.target)與事件綁定元素(e.currentTarget) :' + e.target == e.currentTarget) //處理攔截到的可疑目標
 } },true) </script>
</html>