事件流:事件流所描述的就是從頁面中接受事件的順序。
IE:IE事件流是事件冒泡流;Netscape事件流是事件捕獲流
js里面的【事件流的三個階段】
事件捕獲(低版本IE不支持捕獲階段):與事件冒泡事件流正好相反的順序峦朗,事件捕獲的事件流是最外層逐級向內(nèi)傳播。
目標(biāo):
事件冒泡:事件開始時由最具體的元素(文檔中嵌套最深的那個節(jié)點)接收,然后逐級向上(一直到文檔)迄埃。
詳細(xì):
http://www.cnblogs.com/myzy/p/5226985.html
IE和W3C不同綁定事件解綁事件的方法有什么區(qū)別者疤,參數(shù)分別是什么驹马,以及事件對象e有什么區(qū)別糯累?
w3c事件流:
從根文檔(html)開始遍歷所有子節(jié)點泳姐,如果目標(biāo)事件的父節(jié)點設(shè)置為捕獲時觸發(fā),則執(zhí)行該事件阎肝,直到目標(biāo)被執(zhí)行盗痒,然后再事件冒泡(設(shè)置為捕獲時觸發(fā)的事件不再被執(zhí)行)。
ie事件流:
從目標(biāo)事件被執(zhí)行朦蕴,然后再冒泡父節(jié)點的事件,直到根文檔雨饺。
例子見:
http://www.cnblogs.com/BigIdiot/archive/2013/02/26/2933692.html
【事件的代理/委托】的原理以及優(yōu)缺點
原理:事件的冒泡機(jī)制
優(yōu)缺點:
1肚医、性能高,可以大量節(jié)省內(nèi)存占用舵稠,減少事件注冊盈滴,比如在table上代理所有td的click事件就非常棒巢钓,在ul上代理所有l(wèi)i的click事件等瞒斩;
2破婆、可以實現(xiàn)當(dāng)新增子對象時無需再次對其綁定事件,對于動態(tài)內(nèi)容部分尤為合適
缺點:如果把所有事件都用代理就可能會出現(xiàn)事件誤判胸囱,即本不應(yīng)用觸發(fā)事件的被綁上了事件祷舀。
【兼容性問題】
手寫原生js【實現(xiàn)事件代理】,并要求兼容瀏覽器旺矾,其實就是考核對事件對象e的了解程度蔑鹦,以及在IE下對應(yīng)的屬性名。
其實此時如果你說就是用target箕宙,currentTarget嚎朽,以及IE下的srcElement和this,基本就可以略過了柬帕。
target:事件的調(diào)用對象(event dispatcher)哟忍,事件流的目標(biāo)階段【最內(nèi)層顯示對象】;
currentTarget:事件的處理對象(event processor)陷寝,事件流的捕獲锅很、目標(biāo)、冒泡階段【當(dāng)前監(jiān)聽事件的容器】凤跑;
1.target在事件流的目標(biāo)階段爆安;currentTarget在事件流的捕獲,目標(biāo)及冒泡階段仔引。只有當(dāng)事件流處在目標(biāo)階段的時候扔仓,兩個的指向才是一樣的褐奥,而當(dāng)處于捕獲和冒泡階段的時候,target指向被單擊的對象而currentTarget指向當(dāng)前事件活動的對象(一般為父級)翘簇。2.currentTarget屬性具備兩條件:注冊偵聽器撬码;正在處理事件。
例子:
http://bbs.9ria.com/thread-88461-1-1.html?/html/about.html
srcElement與target:
event.srcElement與event.target 都是指向觸發(fā)事件的元素版保,只發(fā)生事件的源呜笑;
IE: event 對象有 srcElement , 但沒有 target 屬性;
Firfox: event 對象有 target ,但沒有 srcElement 屬性彻犁;
解決方法:
eve =event.srcElement?event.srcElement:event.target;
阻止默認(rèn)行為事件:
在標(biāo)準(zhǔn)瀏覽器下: ev.preventDefault();
IE: window.event.returnValue = false;
解決方法:
只取消默認(rèn)行為(不阻止事件的繼續(xù)傳播)
function stopEvent (evt) {
var evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
} }
阻止事件冒泡:
只阻止事件繼續(xù)傳播(不取消默認(rèn)行為)
function stopEvent (evt) {
var evt = evt || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
} }
阻止默認(rèn)事件+阻止冒泡事件:
取消瀏覽器對事件的默認(rèn)行為(響應(yīng))(比如<a>標(biāo)簽的跳轉(zhuǎn)等)并停止事件的繼續(xù)傳播叫胁。
function stopEvent (evt) {
var evt = evt || window.event;
if (evt.preventDefault){
evt.preventDefault();
evt.stopPropagation();
} else {
evt.returnValue = false;
evt.cancelBubble = true;
}
}
jQuery 事件中的bind和trigger:
.Bind()綁定事件:在向它綁定的對象上面提供一些事件方法的行為;
.bind( eventType , [eventData], handler(eventObject))袖裕。
可以用鏈?zhǔn)綄懛ń壎ǘ鄠€事件曹抬;
handler(eventObject):回調(diào)函數(shù);
注:
unbind([type],[data]急鳄,Handler) 是 bind()的反向操作谤民,從每一個匹配的元素中刪除綁定的事件。如果沒有參數(shù)疾宏,則刪除所有綁定的事件张足。
<style>
p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
p.over {background:#ccc;}
span {color:red;}
</style>
<p>Click or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});
</script>
trigger() 觸發(fā)事件:自動觸發(fā)被選元素的指定事件類型;
trigger 可以傳參數(shù)進(jìn)去:trigger(type, [data]) 坎藐。
$(“p”).bind(“myEvent”, function (event, message1, message2) { alert(message1 + ‘ ‘ + message2); }); $(“p”).trigger(“myEvent”, [“Hello”,”World!”]);