歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

關於JavaScript中的事件代理

今天面試某家公司Web前端開發崗位,前面的問題回答的都還算湊活,並且又問了一下昨天面試時做的一道數組去重問題的解題思路(關於數組去重問題,可以觀賞我前幾天寫的: http://www.linuxidc.com/Linux/2015-11/124880.htm。幸好前幾天專門看過這個問題,答題時才能輕松應對啊),因為這些以前都有過研究,所以回答起來並沒有太大困難。然而,最後面試官又出了一道代碼題讓我漲姿勢了。題目本身很簡單:一個ul中有一千個li,如何給這一千個li綁定一個鼠標點擊事件,當鼠標點擊時alert出這個li的內容和li的位置坐標xy,

<ul id="ulItem">

    <li id="li1">1</li>

    <li id="li2">2</li>

    <li id="li3">3</li>

    ...

    <li id="li1000">1000</li>

</ul>

需要考慮到浏覽器兼容性、事件冒泡、效率等問題。看到問題後我就直接在紙上寫下了如下答案:

var ulItem = document.getElementById("ulItem");
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
    lis[i].onclick = function(){
        alert("內容:"+this.innerHTML);
        alert("位置:"+getElementPosition(this).x+","+getElementPosition(this).y;
    }
}
function getElementPosition(e){
    var x=0,y=0;
    while(e != null){
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }<br>  return {x:x, y:y};
}

寫完了又看了一遍感覺沒必要考慮兼容性、事件冒泡啊。效率的話,想了想,也想不出怎麼提升了,就這樣給面試官看了。面試官人也挺好的,他看了之後說:你並沒有考慮到我說的重點啊,你這樣1000次循環添加點擊事件效率是很低的。然後就跟我講了利用事件冒泡的特性,來提高效率,即事件代理(ps:以前做項目有遇到過要阻止事件冒泡的時候,但利用事件冒泡特性提高效率卻還完全不知道)。聽了面試官講的漲了姿勢,回來後自己也上網查了一下,現在自己再總結下當做記錄自己學習的過程吧:

事件代理(Event Delegation),又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。顧名思義,“事件代理”即是把原本需要綁定的事件委托給父元素,讓父元素擔當事件監聽的職務。

為什麼要這麼做?眾所周知,DOM操作是十分消耗性能的,所以重復的事件綁定簡直是性能殺手。而事件代理的核心思想,就是通過盡量少的綁定,去監聽盡量多的事件。程序猿的事,沒代碼說個J8,下面貼出代碼:

var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
    e = e || window.event;//這一行和下一行是為了兼容IE8以及之前版本
    var target = e.target || e.srcElement;
    if(target.tagName.toLowerCase() === "li"){
        alert(target.innerHTML);
        alert("位置為:"+getElementPosition(target).x+","+getElementPosition(target).y);
    }
}
function getElementPosition(e){
    var x=0,y=0;
    while(e != null){
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
  return {x:x, y:y};
}

嗯,現在代碼去掉了for循環,提高了效率,也有了兼容性方面的處理,感覺這個答案應該可以了吧。上面說的也就是為了一道筆試題,下面就再本著學術研究的思想說說事件代理:

在傳統的事件處理中,你按照需要為每一個元素添加或者是刪除事件處理器。然而,事件處理器將有可能導致內存洩露或者是性能下降——你用得越多這種風險就越大。JavaScript事件代理則是一種簡單的技巧,通過它你可以把事件處理器添加到一個父級元素上,這樣就避免了把事件處理器添加到多個子級元素上。事件代理用到了兩個在JavaSciprt事件中常被忽略的特性:事件冒泡以及目標元素。當一個元素上的事件被觸發的時候,比如說鼠標點擊了一個按鈕,同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡;這個事件從原始元素開始一直冒泡到DOM樹的最上層。任何一個事件的目標元素都是最開始的那個元素,在我們的這個例子中也就是按鈕,並且它在我們的事件對象中以屬性的形式出現。使用事件代理,我們可以把事件處理器添加到一個元素上,等待一個事件從它的子級元素裡冒泡上來,並且可以得知這個事件是從哪個元素開始的。

關於事件代理,今天也是初次接觸,就先寫到這吧。

Copyright © Linux教程網 All Rights Reserved