摘要:適用標(biāo)簽所有觸發(fā)條件單擊適用標(biāo)簽所有觸發(fā)條件雙擊適用標(biāo)簽觸發(fā)條件失去焦點適用標(biāo)簽觸發(fā)條件獲取焦點適用標(biāo)簽觸發(fā)條件更新輸入框的內(nèi)容改變并不代表的值更新。如果按一個鍵很久才松開,發(fā)生的事件為。
ngClick
適用標(biāo)簽:所有
觸發(fā)條件:單擊
#htmlngDblclick#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.click = function () { alert("click"); } });click me
適用標(biāo)簽:所有
觸發(fā)條件:雙擊
#htmlngBlur#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.dblclick = function () { alert("click"); } });click me
適用標(biāo)簽:
a
input
select
textarea
觸發(fā)條件:失去焦點
#html #script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.blur = function () { alert("blur"); } });ngFocus
適用標(biāo)簽:
a
input
select
textarea
觸發(fā)條件:獲取焦點
#html #script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.focus= function () { alert("focus"); } });ngChange
適用標(biāo)簽:input
觸發(fā)條件:model更新
輸入框的內(nèi)容改變并不代表model的值更新。按我的理解,一般當(dāng)兩個狀態(tài)互相切換時,model值會更新。兩個狀態(tài)我稱之為合法狀態(tài)和不合法狀態(tài)。
不合法的狀態(tài):輸入的內(nèi)容不符合type類型,如email類型。輸入的內(nèi)容不符合校驗條件,如ngMinlength。不合法的狀態(tài)下,model會被更新成undefined。
合法的狀態(tài):輸入的內(nèi)容是符合類型和校驗條件的。
#html#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { //$scope.text=""; $scope.change = function () { alert("change"); } });
初始化和不初始化text的條件下,change觸發(fā)是不一樣的哦,這里涉及到model初始化和更新機制。
ngCopy適用標(biāo)簽:
a
input
select
textarea
官方api上說使用的標(biāo)簽是這些,我沒明白a和select復(fù)制有啥子用。另外,我換個div實際上也能觸發(fā)copy事件。一般常用的就是input和textarea。
觸發(fā)條件:復(fù)制。鼠標(biāo)右鍵復(fù)制和快捷鍵Ctrl+C都會觸發(fā)。
#htmlngCut#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.copy = function () { alert("copy"); } });
適用標(biāo)簽:
a
input
select
textarea
觸發(fā)條件:剪切。鼠標(biāo)右鍵剪切和快捷鍵Ctrl+X都會觸發(fā)。
#htmlngPaste#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.cut = function () { alert("cut"); } });
適用標(biāo)簽:
a
input
select
textarea
觸發(fā)條件:粘貼。鼠標(biāo)右鍵粘貼和快捷鍵Ctrl+V都會觸發(fā)。
#htmlngKeydown#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.paste = function () { alert("paste"); } });
適用標(biāo)簽:所有
個人感覺還是input和textarea比較常用
觸發(fā)條件:鍵盤按鍵按下
要把$event傳過去,一般都是要判斷按了哪個按鍵的。
#htmlngKeyup#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.keydown = function ($event) { alert($event.keyCode); } });
適用標(biāo)簽:所有
個人感覺還是input和textarea比較常用
觸發(fā)條件:鍵盤按鍵按下并松開
#htmlngKeypress#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.keyup = function ($event) { alert($event.keyCode); } });
適用標(biāo)簽:所有
個人感覺還是input和textarea比較常用
觸發(fā)條件:鍵盤按鍵按下
#htmlkeydown,keypress,keydown三者區(qū)別 引發(fā)事件的按鍵#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.keypress = function ($event) { alert($event.keyCode); } });
非字符鍵不會引發(fā) KeyPress 事件,但非字符鍵卻可以引發(fā) KeyDown 和 KeyUp 事件。
事件引發(fā)的時間KeyDown 和 KeyPress 事件在按下鍵時發(fā)生,KeyUp 事件在釋放鍵時發(fā)生。
事件發(fā)生的順序KeyDown -> KeyPress -> KeyUp。如果按一個鍵很久才松開,發(fā)生的事件為:KeyDown -> KeyPress -> KeyDown -> KeyPress -> KeyDown -> KeyPress -> ... -> KeyUp。
KeyDown觸發(fā)后,不一定觸發(fā)KeyUp,當(dāng)KeyDown 按下后,拖動鼠標(biāo),那么將不會觸發(fā)KeyUp事件。
KeyPress主要用來捕獲數(shù)字(注意:包括Shift+數(shù)字的符號)、字母(注意:包括大小寫)、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符。
KeyDown 和KeyUp 通??梢圆东@鍵盤除了PrScrn所有按鍵(這里不討論特殊鍵盤的特殊鍵)。
KeyPress 只能捕獲單個字符。
KeyDown 和KeyUp 可以捕獲組合鍵。
KeyPress 可以捕獲單個字符的大小寫。
KeyDown和KeyUp 對于單個字符捕獲的KeyValue 都是一個值,也就是不能判斷單個字符的大小寫。
KeyPress 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
KeyDown 和KeyUp 區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。
ngMousedown適用標(biāo)簽:所有
觸發(fā)條件:鼠標(biāo)按下,左右中間按下都會觸發(fā)
#htmlngMouseup#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.mousedown = function ($event) { alert($event.which); } });
適用標(biāo)簽:所有
觸發(fā)條件:鼠標(biāo)按下彈起,左右中間按下彈起都會觸發(fā)
#htmlngMouseenter#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.mouseup = function ($event) { alert($event.which); } });
適用標(biāo)簽:所有
觸發(fā)條件:鼠標(biāo)進入
#htmlngMouseleave#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.mouseenter = function () { alert("mouseenter"); } });
適用標(biāo)簽:所有
觸發(fā)條件:鼠標(biāo)離開
#htmlngMousemove#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.mouseleave = function () { alert("mouseleave"); } });
適用標(biāo)簽:所有
觸發(fā)條件:鼠標(biāo)移動
#htmlngMouseover#script angular.module("learnModule", []) .controller("LearnCtrl", function ($scope) { $scope.mousemove = function () { alert("mousemove"); } });
適用標(biāo)簽:所有
觸發(fā)條件:鼠標(biāo)進入
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/85583.html
摘要:引言指令可以說是的核心,而其開發(fā)也是比較困難的,本文主要介紹指令的一些參數(shù)和的綁定策略。指令執(zhí)行的優(yōu)先級,用于多個指令同時作用于同一個元素時。改變父會影響指令,而改變指令不會影響父。在父和指令之間建立雙向綁定。 引言 指令(Directive)可以說是 AngularJS 的核心,而其開發(fā)也是比較困難的,本文主要介紹指令的一些參數(shù)和scope的綁定策略。 參數(shù) 從 AngularJS ...
摘要:首先,我們需要在入口頁面的中配置根路徑然后創(chuàng)建一個路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉(zhuǎn),定義該路由激活時的樣式類。 剛實習(xí)的時候用過AngularJS,那時候真的是連原生JavaScript都不會寫,依樣畫葫蘆做了幾個管理后臺。然后突然換項目了,AngularJS就不寫了,感覺前前后后接觸了一年多的Angula...
摘要:自定義指令中有很多內(nèi)置指令,一般都是以開頭的比如等等。本文介紹的自定義指令的用法。該參數(shù)的意思是替換指令的內(nèi)容,更改上面的例子。將屬性綁定到父控制器的域中學(xué)習(xí)概念多指令中的參數(shù)中增加了的值和的點擊函數(shù)。 自定義指令 angularjs中有很多內(nèi)置指令,一般都是以ng開頭的;比如:ng-app,ng-click,ng-repeat等等。本文介紹angularjs的自定義指令的用法。 指令...
摘要:自定義指令中有很多內(nèi)置指令,一般都是以開頭的比如等等。本文介紹的自定義指令的用法。該參數(shù)的意思是替換指令的內(nèi)容,更改上面的例子。將屬性綁定到父控制器的域中學(xué)習(xí)概念多指令中的參數(shù)中增加了的值和的點擊函數(shù)。 自定義指令 angularjs中有很多內(nèi)置指令,一般都是以ng開頭的;比如:ng-app,ng-click,ng-repeat等等。本文介紹angularjs的自定義指令的用法。 指令...
摘要:點擊我啊當(dāng)屬性為空時,點擊的時候頁面不會刷新了,我們再也不需要這樣寫了點擊我啊一般和指令結(jié)合使用點擊我啊你點擊我了一般和標(biāo)簽結(jié)合使用。使用了就就可以避免出現(xiàn)這種問題。如果鏈接中有表達式,就使用代替 a 點擊我啊 當(dāng)href屬性為空時,點擊的時候頁面不會刷新了,我們再也不需要這樣寫了 點擊我啊 一般和ng-click指令結(jié)合使用 #html 點擊我啊 #scr...
閱讀 1856·2021-11-24 09:39
閱讀 2318·2021-09-30 09:47
閱讀 4208·2021-09-22 15:57
閱讀 1919·2019-08-29 18:36
閱讀 3610·2019-08-29 12:21
閱讀 622·2019-08-29 12:17
閱讀 1295·2019-08-29 11:25
閱讀 755·2019-08-28 18:26