javascript事件的那些事

時間 2019-12-14

原文原文鏈接

javascript語言中的事件是javascript的一個重要組成部分，因此清楚的瞭解javascript的事件是很是重要的。javascript

js事件添加的方法

obj.addEventListen('event',function(){
   // 代碼部分 
})

//on+事件名稱
obj.onclick = function(){
  // 代碼部分
}

JS事件對象經常使用屬性

給對象添加js事件後，咱們在回調函數裏面能夠訪問event對象，能夠看到事件對象的全部屬性和方法。html

// 這兒以click事件做爲例子來說解
obj.onclick = function(event){
  //因爲IE9如下不支持參數event，爲作到兼容
  var event = event || window.event;
// 打印event對象的熟悉和方法
  console.log(event);
}

js的事件對象中經常使用的屬性：target、type、bubbles（是否支持冒泡）、timestamp（事件執行事件）、pageX、pageY、clientX、clientY、screenX、screenYjava

// target：執行事件的對象，IE的話使用srcElement
  var target = event.target || event.srcElement;

// type: 事件的類型
  var type = event.type

// bubbles:是否支持冒泡，值通常爲bool
  var bubbles = event.bubbles

// timestamp:事件執行的事件
  var times = event.timestamp

// pageX / pageY 事件觸發時鼠標距離文檔（也就是body標籤內容）的左距離 / 上距離
// 這兒IE又存在兼容問題，通常會使用clientX / clientY - scrollLeft / scrollTop 來表示
// scrollLeft / scrollTop 也會存在兼容性問題，後面講到js動畫要素的三大系列會講到
  var pageX = event.pageX || event.clientX - document.body.scrollLeft;
  var pageY = event.pageY || event.clientY - document.body.scrollTop;

// clientX / clientY 事件觸發時鼠標距離瀏覽器窗口左上角的橫/縱方向上面的距離
  var x = event.clientX;
  var y = event.clientY;

 // screenX /screenY 事件觸發時鼠標距離屏幕窗口左上角的橫/縱方向上面的距離
  var x = event.screenX;
  var y = event.screenY;

js的事件對象中咱們經常使用的方法：stopPropagation()瀏覽器

obj.onclick = function(event){
  var event = event || window.event;
  // 阻止事件的冒泡
  event.stopPropagation();
}

js事件傳播階段

事件傳播的三個階段是：捕獲、冒泡和目標。捕獲階段事件從最上一級標籤開始往下查找，直到捕獲到事件目標(target)；冒泡階段事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。app

js事件的冒泡

事件冒泡: 當一個元素上的事件被觸發的時候，好比說鼠標點擊了一個按鈕，一樣的事件將會在那個元素的全部祖先元素中被觸發。這一過程被稱爲事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。函數

冒泡順序：學習

IE 6.0: 動畫

div -> body -> html -> documentthis

其餘瀏覽器: htm

div -> body -> html -> document -> window

阻止冒泡：因爲存在冒泡機制，事件執行時可能發生咱們意想不到的事情，當不須要默認的冒泡機制時，咱們能夠選擇手動阻止冒泡

w3c的方法是：（火狐、谷歌、IE11）
	event.stopPropagation()
IE10如下則是使用：event.cancelBubble = true
兼容代碼以下：

  var event = event || window.event;
 if(event && event.stopPropagation){
            event.stopPropagation();
  }else{
            event.cancelBubble = true;
  }

咱們知道js事件存在冒泡機制，但不是全部的事件都會冒泡，咱們經常使用的js事件中也存在不冒泡的事件：focus、blur、unload、load、mouseenter、mouseleave。

javascript事件委託

上面講到事件冒泡的時候，好像沒發現事件冒泡機制有什麼意義，好像先事件的時候都在阻止事件冒泡。下面我從一個小案例上講事件冒泡的意義，事件委託就是經過事件冒泡完成的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件委託</title>
</head>
<body>
  <button>新增LI</button>
  <ul>
    <li>本地li</li>
    <li>本地li</li>
    <li>本地li</li>
  </ul>
  <script>
    var ul = document.getElementsByTagName('ul')[0];
    var liArr = ul.children;
   var btn = document.getElementsByTagName('button')[0];
    for (var i = 0; i < liArr.length; i++) {
      liArr[i].onclick = function(){
        console.log('this is li');
      } 
    }
    btn.onclick = function(){
      var newLi = document.createElement('li');
      newLi.innerHTML = "我是新增的li";
      ul.appendChild(newLi);
   }
 </script>
</body>
</html>

執行上面的代碼咱們會發現，新增長的li上面是不能綁定點擊事件的，這就是js事件弊端。這時候咱們能夠經過冒泡機制，給父元素綁定事件，判斷事件的target是否是爲li，是的話就執行事件。

<script>
    var ul = document.getElementsByTagName('ul')[0];
    var liArr = ul.children;
    for (var i = 0; i < liArr.length; i++) {
      ul.onclick = function(event){
        var event = event || window.event;
          // 兼容性
          var target = event.target || event.srcElement;
          if(target === 'Li'){
            console.log('I am li')
          }
        }
      } 
    var newLi = document.createElement('li');
    ul.appendChild(newli);
  </script>

上面是我在學習js的事件中遇到的一些難點，也都是咱們學完後本身的領悟。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。