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的事件中遇到的一些难点，也都是咱们学完后本身的领悟。