js事件相关知识

js事件

事件源：谁导致的事件发生，谁就是事件源。谁的事件this就指向谁。

<script>
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function(e) {
        // 事件源  ：有谁导致的谁就是事件源。
        console.log(e.target);//e.target返回事件源
        // this 对当前对象引用 ：谁的事件 this就是谁
        console.log(this);
    }
</script>

事件流

事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段；

• 捕获阶段：当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。事件由页面元素接收，逐级向下，到具体的元素。
• 目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段。具体的元素本身。
• 冒泡阶段：事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。跟捕获相反，具体元素本身，逐级向上，到页面元素（我们平时用的事件绑定就是利用的事件冒泡的原理）。

addEventLsitener('',function(){},false) false则是事件冒泡
addEventLsitener('',function(){},true) true则是事件捕获

<div id="div1">
    <div id="div2">
    <div id="div3"></div>
    </div>
</div>
<script>
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    oDiv1.addEventListener('click',function(){
    console.log('div1 捕获')
    },true)
    oDiv2.addEventListener('click',function(){
    console.log('div2 捕获')
    },true)
    oDiv3.addEventListener('click',function(){
    console.log('div3 捕获')
    },true)
    oDiv1.addEventListener('click',function(){
    console.log('div1 冒泡')
    },false)
    oDiv2.addEventListener('click',function(){
    console.log('div2 冒泡')
    },false)
    oDiv3.addEventListener('click',function(){
    console.log('div3 冒泡')
    },false)
</script>

//div1捕获 div2捕获 div3捕获 div3冒泡 div2冒泡 div1冒泡

如果既有事件捕获又有事件冒泡。则先触发事件捕获在触发事件冒泡。即 先从外向内 再从内向外

事件中常⽤的属性与⽅法

• e.target //事件源
• e.keyCode //键盘码
• e.clientX //⿏标距离⽂档⽔平坐标
• e.clientY //⿏标距离⽂档垂直坐标

阻⽌事件冒泡

• e.stopPropagation() //标准
• e.cancelBubble = true //ie浏览器

阻⽌默认⾏为

• return false;
• e.preventDefault(); //标准
• e.returnValue = false; //ie浏览器

事件委托 ———解决后生成元素的事件绑定问题

事件委托就是利⽤事件冒泡，通过给⽗元素绑定事件，当点击⼦元素的时候通过事件冒泡会触发⽗元素的点击事件，在⽗元素的点击事件中，通过判断事件源执⾏时间回调函数。

<button id="btn">click</button>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
var obtn = document.getElementById('btn');
var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function(e){
    e = e || window.event;
    // 判断当你点击的是li执⾏输出 ->获取事件源
    if(e.target.tagName == "LI"){
        console.log(e.target.innerHTML)
    }
}
obtn.onclick = function(){
    var oLi = document.createElement('li');
    oLi.innerHTML = Math.random();
    oUl.appendChild(oLi)
}

解决问题：

1. 后⽣成元素的事件绑定问题
2. 节省内存占⽤，减少事件注册 局限性：focus、blur 之类的事件本身没有事件冒泡机制，所以⽆法委托。