Event對象+事件的冒泡和捕獲

時間 2019-11-21

原文原文鏈接

Event對象

Event種類

mouseEvent
keyboardEvent
focusEvent

<body>  
      <input type="text" onfocus="doFocus(event)">//這裏的參數必須寫event(也就是window.event)，若是不寫則console的結果就是undefined。
      <script>
          function doFocus(ev){
              console.log(ev);//類型是focusEvent
      }
      </script>
  </body>
  /*onblur（失去焦點時觸發）同onfocus（獲得焦點時觸發）都是 焦點事件（focusEvent）*/

屬性

clientX 只有鼠標事件纔有，鼠標指針相對於當前窗口（文檔）的水平座標。
clientY 只有鼠標事件纔有
keyCode 只有鍵盤事件纔有

target 具體觸發事件的元素（無論是什麼類型的事件均可以用。用target能夠獲得具體點了哪個元素）css

具體代碼以下(點document中的任何元素都會變綠)：
  document.onclick=function(ev){
      ev.target.style.backgroundColor="green";
  }
  //能夠給新添加的元素綁定事件
  代碼：
  css樣式：
  <style>
      ul{樣式};li{樣式};li.current{樣式};
  </style>
  html文件：
  <ul class="myList">多個<li></li></ul>
  <button onclick="addLi()">添加</button>
  js文件：
  var myList=document.getElementById("myList");
  var lis=myList.getElementsByTagName("li");
  //循環
  for（var i=0;i<lis.length;i++）{
      lis[i].onmouseover=function(){this.className="current";}
      lis[i].onmouseout=function(){this.className="";}
  }
  //添加li
  function addli(){
  var liObj=document.createElement("li");//建立元素
  liObj.innerHTML="我是新的li";
  myList.appendChild(liObj);//添加
  }
  /*新添加以後的效果:點擊button按鈕會新添加li,可是新添加的li當鼠標滑過期不會改變顏色，緣由是：綁定事件時，新的元素尚未建立。*/
  //解決方案以下：
  myList.onmouseover=function(ev){var e=ev||window.event;
  var currentEle=e.target;//獲得具體觸發的那個元素
  //console.log(currentEle.tagName);//獲得當前鼠標滑過的元素名
  if(currentEle.tagName==="LI"){currentEle.className="current";}
  }
  myList.onmouseout=function(ev){var e=ev||window.event;//兼容IE
  var currentEle=e.target;//獲得具體觸發的那個元素
  //console.log(currentEle.tagName);//獲得當前鼠標滑過的元素名
  if(currentEle.tagName==="LI"){currentEle.className="";}
  }
  /*分析以下：把事件綁定給ul,經過target來得到當前鼠標滑過的元素，因li是ul的子元素，因此滑過li就等於滑過了ul*/

事件的冒泡和捕獲

捕獲：瀏覽器由最外層向內捕獲，直到找到被觸發的那個元素。
冒泡：瀏覽器由內向外冒泡（找子元素的父元素的...父元素）。
只有冒泡的時候才觸發事件，捕獲的時候不會觸發事件。
bigEle.addEventListener("click",function(){alert("big");},true)//第三個參數寫true是捕獲階段觸發，不寫（默認是false）則是冒泡階段觸發。
IE8以及如下不存在事件的捕獲，只有事件的冒泡。html

方法
stopPropagation() 阻止冒泡

preventDefault() 阻止默認動做瀏覽器

<a href="http://www.so.com" onclick="fn(event)">我是超連接</a>
  <script>
      function fn(ev){
          alert("彈出")；
          ev.preventDefault();//阻止a的默認動做，也就是說不會跳轉到http://www.so.com。。。
      }
  </script>