JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

1.事件冒泡与事件捕获

2.事件与事件句柄

 

3.事件委托：利用事件的冒泡技术。子元素的事件最终会冒泡到父元素直到跟节点。事件监听会分析从子元素冒泡上来的事件。

事件委托的好处：

    1.每个函数都是对象，都会占用内存，内存中对象越多，性能越差。

    2.必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

怎样处理由于事件较多引起的性能差：

1.采用事件委托技术，限制简历的连接数量

2.在不需要的时候移除事件处理程序

例子：

html:

<div id="myDiv">
    <input type="button" value="点我" id="myBtn">
</div>

 

js:

var btn=document.getElementById("myBtn");
btn.onclick=function(){

    document.getElementById("myDiv").innerHTML="Progress...";
}

 

注意：通过设置innerHTML可以把按钮移走，但是事件处理程序依旧与按钮保持着事件处理程序的引用都保存在内存中。

    所以最好手动移除：

 

var btn=document.getElementById("myBtn");
btn.onclick=function(){
    btn.onclick=null;//移除事件处理程序
    document.getElementById("myDiv").innerHTML="Progress...";
}

    

 

4.事件对象与事件源

function eventHandler(e){
    //获取事件对象 
e = e || window.event;//IE和Chrome下是window.event FF下是e 
    //获取事件源 
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target 
}

 

5.取消事件默认行为

function eventHandler(e) {
    e = e || window.event;
    // 防止默认行为 
    if (e.preventDefault) {
        e.preventDefault();//IE以外 
    } else {
        e.returnValue = false;//IE 
        //注意：这个地方是无法用return false代替的 
        //return false只能取消元素 
    }
}

 

6.阻止事件冒泡

function myParagraphEventHandler(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();//IE以外 
    } else {
        e.cancelBubble = true;//IE 
    }
}

 

7.event与target

event：代表了包含了事件的所有状态。

target:触发事件的元素。

currentTarget:事件绑定的元素。

注意着两者的区别。

html:

<ul id="ulT">
<li class="item1">fsda</li>
<li class="item2">ewre</li>
<li class="item3">qewe</li>
<li class="item4">xvc</li>
<li class="item5">134</li>
</ul>

js:

document.getElementById("ulT").onclick = function  (event) {
    console.log(event.target);
    console.log(event.currentTarget);
}