一、事件捕獲:當某個元素出發某個事件,頂層對象document就會發出一個事件流, 隨着DOM樹的節點像目標元素節點流去,直到到達事件真正發生的目標元素。 css
二、事件目標:當到達目標元素以後,執行目標元素該事件相應的處理函數。node
三、事件冒泡:從目標元素開始,往頂層元素傳播,途中若是有節點綁定了相應的事件處理函數, 這些函數就會被依次出發。jquery
(1)能夠使用e.stopPropagation()(Firefox) 或者e.cancelBubble=true(IE)來組織事件的冒泡。dom
(2)判斷event.target 是否等於event.currenttarget函數
因爲js中對dom操做會產生事件冒泡,會形成內存泄露和性能消耗,使用事件委託能避免。性能
一個經典的例子:實現一個函數,當點擊頁面中的任何元素時都alert出元素的名稱。this
function getElementName(){spa
var body = document.getElmentsByTagName("body")[0];對象
body.onclick = function(ev){事件
var event = ev || window.event;
var target = event.target || window.srcElement;
if(target){
alert(target.nodeName.toLowerCase())
}
}
}
第一種:原生js
var body = document.getElementByTagName('body')[0];
body.addEventListener('click',function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "id_1": function(){};break;
case "id_2": function(){};break;
}
})
第二種:jquery
$('body').on('click','li',function(){ if(!$(this).attr('s')) { $(this).css('background','red'); $(this).attr('s',true); }else { $(this).css('background','#fff'); $(this).removeAttr('s'); } })