js事件（2）

• 如何获取事件对象：

  事件对象e是事件处理函数的参数。IE8不兼容。

  也可以直接在事件处理函数中使用event, 但是FF低版本不兼容。

• 所以兼容的写法是：

  box.onclick = function(e) {
      e = e || window.event;
  }

关于事件目标：

currentTarget: 返回监听节点。即ele.onclick=xxx, 返回的是ele。始终与this相同。

target: 返回事件的实际目标对象。就是即使ele.onclick=xxx, 返回的有可能是ele的子对象。

srcElement和target性质相同。

浏览器兼容性：IE8不支持target. 火狐不支持srcElement.

兼容的写法：

box.onclick = function(e) {
    e = e || window.event;
    target = e.target || e.srcElement;
    target.style.xxx = xxx;
}

关于事件代理：

又叫事件委托。比如一个ul下有5个li, 每个li上的点击事件，都会通过事件冒泡冒到ul, 所以可以把li上的事件委托给ul处理。

事件代理的优点：提高性能，降低了代码复杂性。尤其是相对于给每个li都添加事件处理函数，可以更好的兼容动态添加li节点的场景。

关于事件冒泡：

bubbles, cancenBubble, stopPropagation(), stopImmediatePropagation().

bubbles: 返回一个布尔值，表示当前事件是否会冒泡，只读。大部分事件都会冒泡，但是focus, scroll, blur等事件不会冒泡。

stopPropagation(): 表示取消事件的进一步冒泡，无返回值。但是无法阻止同一事件的其他监听函数被调用。（dom2的多个addEventLinstener, 不能同时阻止）

<script>
    window.onload = function () {
        var btn = document.getElementById('btn')
        btn.addEventListener('click', function (e) {
          e = e || window.event;
          btn.style.backgroundColor = 'red'
          e.stopPropagation()
        });
        btn.addEventListener('click', function (e) {
          e = e || window.event;
          btn.innerHTML = '点击了';
        });
         document.body.addEventListener('click', function (e) {
          e = e || window.event;
          console.log('点击了body')
        });
    }
</script>

stopImmediatePropagation(): 既阻止冒泡，又阻止其他监听器。

cancelBubble： 阻止冒泡，可读写，默认为false, 如果设置为true, 可以取消事件的冒泡。全浏览器支持。stopPropagation/stopImmediatePropagation在IE8中不兼容。

兼容写法：

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

事件流阶段：

e.eventPhase: 0 事件未发生 1 事件捕获阶段 2 目标阶段 3. 冒泡阶段

取消默认事件：

<a href=’javascript:void(0);’>test</a>

<a href=’javascript:;’>test</a>

js中有两种方式取消默认行为，preventDefault和returnValue

btn.onclike = function(e) {
    e = e || window.event;
    e.preventDefault();
    this.innerHTML = 'changed';
}

btn.onclike = function(e) {
    e = e || window.event;
    e.returnValue = false;
    this.innerHTML = 'changed';
}

3. 兼容性写法

btn.onclike = function(e) {
    e = e || window.event;
    if (e.preventDefault) { //非IE8及以下
        e.preventDefault();
    } else {
        e.returnValue = false; // IE8及以下
    }
    this.innerHTML = 'changed';
}

最后，return false, 全浏览器兼容。

事件对象的坐标位置：

clientX/Y, x/y, offsetX/Y, screenX/Y,pageX/Y

clientX/Y 和x/y: 相对于浏览器有效区域的x轴/y轴的距离

offsetX/Y: 相对于事件源的左上角的x轴/y轴的距离

screenX/Y: 相对于显示器屏幕的x轴和y轴的距离

pageX/Y: 相对于页面左上角的x轴/y轴的距离，在出现滚动条的时候跟clientX/Y不同