手寫事件模型及事件代理/委托

事件流:事件流所描述的就是從頁面中接受事件的順序。
IE:IE事件流是事件冒泡流;Netscape事件流是事件捕獲流

js里面的【事件流的三個階段】

事件捕獲(低版本IE不支持捕獲階段):與事件冒泡事件流正好相反的順序峦朗,事件捕獲的事件流是最外層逐級向內(nèi)傳播。

目標(biāo):

事件冒泡:事件開始時由最具體的元素(文檔中嵌套最深的那個節(jié)點)接收,然后逐級向上(一直到文檔)迄埃。
詳細(xì):
http://www.cnblogs.com/myzy/p/5226985.html

dom3.png

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!”]);

http://www.cnblogs.com/hyaaon/p/4630128.html

http://www.w3cmark.com/2016/439.html?nsukey=%2Fwg6nR7ZqG0wcfBK8W%2FYihu%2FxwIlsCKa%2BzPjshRo3SO8E3O7LQbTmlmYvglLXjlxDNd%2BNyaYvlYi6jlZVgMjzEN7hJ7bStlczQGdxkMSQE3HNwix4uXa8sBwoc%2FiXg0Aq1si0zL%2Fqnepwc944HVxDnThua5UuiuOBDZuApA7fZaZqEmjP6X3XhJRTe9HZwka

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末为牍,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子岩馍,更是在濱河造成了極大的恐慌碉咆,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛀恩,死亡現(xiàn)場離奇詭異疫铜,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)双谆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進(jìn)店門壳咕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人顽馋,你說我怎么就攤上這事谓厘。” “怎么了寸谜?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵竟稳,是天一觀的道長。 經(jīng)常有香客問我,道長住练,這世上最難降的妖魔是什么地啰? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任愁拭,我火速辦了婚禮讲逛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘岭埠。我一直安慰自己盏混,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布惜论。 她就那樣靜靜地躺著许赃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪馆类。 梳的紋絲不亂的頭發(fā)上混聊,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天,我揣著相機(jī)與錄音乾巧,去河邊找鬼句喜。 笑死,一個胖子當(dāng)著我的面吹牛沟于,可吹牛的內(nèi)容都是我干的咳胃。 我是一名探鬼主播,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼旷太,長吁一口氣:“原來是場噩夢啊……” “哼展懈!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起供璧,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤存崖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后睡毒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體来惧,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年吕嘀,在試婚紗的時候發(fā)現(xiàn)自己被綠了违寞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡偶房,死狀恐怖趁曼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情棕洋,我是刑警寧澤挡闰,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響摄悯,放射性物質(zhì)發(fā)生泄漏赞季。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一奢驯、第九天 我趴在偏房一處隱蔽的房頂上張望申钩。 院中可真熱鬧,春花似錦瘪阁、人聲如沸撒遣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽义黎。三九已至,卻和暖如春豁跑,著一層夾襖步出監(jiān)牢的瞬間廉涕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工艇拍, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留狐蜕,地道東北人。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓淑倾,卻偏偏與公主長得像馏鹤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子娇哆,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內(nèi)容