javascript處理事件
事件種類
- 基本事件(表單,window,鍵盤,鼠標(biāo))
- HTML5事件(網(wǎng)絡(luò),通信,拖拽,歷史記錄等等)
- 移動(dòng)設(shè)備事件
- 自定義事件
事件處理器的注冊(cè)
首先得到元素對(duì)象element
- element.onEvent=handler;
這樣的注冊(cè)只能注冊(cè)一個(gè)處理程序，但優(yōu)先級(jí)最高，最先處理 - element.addEventListener(eventName,handler,bool);
bool值決定是事件處理器注冊(cè)還是捕獲程序注冊(cè)，兩者的區(qū)別在于調(diào)用的順序不同，false時(shí)是處理器，從下往上冒泡調(diào)用，而true是捕獲注冊(cè)，從上往下直到調(diào)用父元素的處理程序?yàn)橹梗簿褪钦f(shuō)我注冊(cè)的捕獲程序是我的子元素發(fā)生事件時(shí)調(diào)用的。事件處理器執(zhí)行的順序是按注冊(cè)順序。 - element.attachEvent('onEventName',handler);
這種可以定義多個(gè)處理器，但它們執(zhí)行的順序卻不一定，所以呵呵了。。。
事件處理的過(guò)程
運(yùn)行環(huán)境
一般情況下事件處理函數(shù)中的this指事件目標(biāo)（個(gè)人覺(jué)得就是注冊(cè)的元素對(duì)象），但是attach定義時(shí)指window
作用域
同所有javascript函數(shù)一樣，遵循閉包特性，其作用域是其定義時(shí)的作用域。但采用第一種方法定義時(shí)被轉(zhuǎn)換為能存取全局變量的頂級(jí)函數(shù)，但比如open函數(shù)，就要寫成window.open。
返回值
通過(guò)返回false來(lái)否定默認(rèn)操作
傳播
- 一般冒泡傳播直至window，處理分三個(gè)階段，首先是捕獲，然后執(zhí)行處理器，再向上傳播，依次重復(fù)這樣的過(guò)程
- 但focus，scroll，blur事件例外，且load事件傳播到documentation對(duì)象停止，整個(gè)文檔加載完畢，window的處理器才執(zhí)行。
- 通過(guò)在處理器中使用startpropagation函數(shù)來(lái)阻止傳播，但本元素定義的處理器還是會(huì)執(zhí)行，可以用preventDefault函數(shù)來(lái)阻止默認(rèn)操作
jquery處理事件
jquery事件處理器
- jquery的事件處理程序一般只有一個(gè)參數(shù)（必定是第一個(gè)參數(shù)），那就是jquery事件對(duì)象。
- jquery處理器中的this指向的是對(duì)應(yīng)html元素，需要轉(zhuǎn)成jquery對(duì)象，看下面例子
$("p").click(function(){
$(this).css({background,#555555});
});
- jquery處理器的返回值始終有意義，如果返回false，該事件的默認(rèn)行為及接下來(lái)的冒泡傳播均會(huì)停止，類似于調(diào)用了stopPropagation和preventDefault.
- 要想傳入多個(gè)參數(shù)，需用trigger函數(shù)顯式觸發(fā)事件。
jquery事件對(duì)象
包含了jquery事件的詳細(xì)信息，有諸多NB屬性，比如data屬性，還定義了preventDefault等方法。
jquery注冊(cè)
簡(jiǎn)單注冊(cè)
$(".sign").click(handler);
//jquery對(duì)象.簡(jiǎn)單事件類型名(處理器);
//注意，以下為特例
$(selector).hover(f,g);
//為鼠標(biāo)放上去和離開分別注冊(cè)
$(selector).toggle(f1,f2,f3...);
//第i次事件調(diào)用fi
高級(jí)注冊(cè)
$('a').on('mouseover mouseleave',handler);
$('a').on({
mouseover:f,
mouseleave:g
});
$('a').on('mouseover',{sb:6},handler);
//對(duì)于動(dòng)態(tài)元素怎么辦呢
$(parent).on(name,childSelector,{sb:6},handler);
//用父元素為它注冊(cè)
//中間參數(shù)會(huì)作為jquery事件對(duì)象的data屬性值
//one方法使用與on一致，但只起一次作用，搞完就注銷
事件注銷
$(selector).off('EventName');
//移除該事件所有處理器
$(selector).off(jquery對(duì)象);
$('a').off({
mouseover:f,
mouseleave:g
});//移除單個(gè)處理器
事件觸發(fā)
$('a').click();
//$(selector).SimpleEventName();但這樣不能手動(dòng)觸發(fā)addEventListener和attachEvent注冊(cè)的處理器
$(selector).trigger(EventName,[args]);
//triggerHandler方法觸發(fā)的事件不會(huì)冒泡也沒(méi)有默認(rèn)操作
$(selector).live(Name,handler)
//為動(dòng)態(tài)元素即在注冊(cè)后添加的元素也注冊(cè)，取消用die，用法基本同bind與unbind
Angular處理事件
事件的產(chǎn)生與傳播
基本事件
Angular定義了一系列的基本事件，很多以ng-××的形式，和$××的形式
自定義事件
$scope.$emit('name','args');
//冒泡傳播至$rootScope
$scope.$broadcast('name','args');
//向下傳播給自己所有的子scope
上次博客中提到訪問(wèn)$rootScope的變量可以讓不同的controllers通信，但采用共享數(shù)據(jù)通信畢竟不正統(tǒng)也缺乏響應(yīng)性，采用事件也是controllers通信的一個(gè)好方法啊。
事件處理器的注冊(cè)
- 在html里通過(guò)ng-click之類的綁定處理函數(shù)
- $scope.$on('name',handler);
- $scope.$watch(variable-name,handler);
watch是監(jiān)視被ng-model所綁定的變量，當(dāng)它們變化時(shí)就會(huì)調(diào)用watch所定義的處理器函數(shù)，Angular維護(hù)一個(gè)watch隊(duì)列，瀏覽器接收到事件時(shí)$digest就會(huì)檢視這個(gè)隊(duì)列，一旦發(fā)現(xiàn)變化就更新dom并且改變頁(yè)面對(duì)應(yīng)的地方，但$digest只會(huì)檢視進(jìn)入angular context的事件
使用$scope.$apply()會(huì)強(qiáng)制進(jìn)行一次digest操作 - 使用jquery的方式來(lái)注冊(cè)
通過(guò)angular.element(CSS選擇器)可以得到j(luò)query對(duì)象，然后像jquery一樣去去注冊(cè)
詳細(xì)的例子可以看這兩篇文章
理解$watch ，$apply 和 $digest --- 理解數(shù)據(jù)綁定過(guò)程
angularjs的事件 $broadcast and $emit and $on
