資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中使用 AngularJS 新增事件監聽器？
在AngularJS中，事件幫助我們根據操作執行特定任務。AngularJS 非常豐富，並擁有一個簡單的模型來將事件監聽器新增到 HTML。AngularJS支援許多與滑鼠和鍵盤相關的事件。所有這些事件都應用於 HTML 元素。
在 AngularJs 中，我們有很多 HTML 事件。假設我們同時編寫 AngularJS 和 HTML 事件。AngularJS 事件和 HTML 事件都將被執行，並且 AngularJS 事件不會覆蓋 HTML 事件。
可以使用指令來表示事件。例如 ng-click、ng-change、ng-mousedown、ng-mouseup、ng-keydown、ng-keyup、ng-keypress、ng-mouseover、ng-paste 等。
讓我們看看下面的一些示例。
AngularJS ng-click 指令
當單擊元素時，將執行此指令。
語法
<element ng-click="expression"></element>
示例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<h2>ng-click example</h2>
<button ng-click="addUser()">Add</button>
<br/><br/>
<label>Number of users added</label>
<p>{{ users }}</p>
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('sampleCtrl', function($scope) {
$scope.users = 0;
$scope.addUser = function() {
$scope.users++;
}
});
</script>
</body>
</html>
在這裡，我們單擊新增按鈕，每次單擊使用者計數將增加 1。
AngularJS ng-change 指令
此指令幫助我們告知 HTML 元素值的更改。如果我們想使用 ng-change 指令，我們也需要新增 ng-model 指令。
語法
<element ng-change="expression"> Contents... </element>
示例
<!DOCTYPE html>
<html>
<head>
<title>ng-change example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script type="text/javascript">
var app = angular.module('sampleApp', []);
app.controller('sampleCtrl', function ($scope) {
$scope.show = function () {
$scope.result = $scope.check == true ? true : false;
}
});
</script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="sampleCtrl">
<h2>ng-change example</h2>
Check to show/hide details
<input type="checkbox" ng-change="show()"-ng-model="check">
<br><br>
<div style="padding:10px;
border:1px solid black;
width:30%;color:blue"
ng-show='result'>
Hello world!
</div>
</div>
</body>
</html>
使用 ng-model 和 ng-change 可以讓我們在使用者單擊元素時跟蹤 HTML 元素的更改。
在上面，我們看到了 HTML 中 ng-click 和 ng-change 事件的示例。現在讓我們檢查如何在 AngularJS 中新增事件監聽器。
在 Angularjs 中，我們有一種方法可以新增或刪除事件監聽器。例如 addEventListener() 方法和 removeEventListener() 方法。
addEventListener() 方法
此方法幫助我們將事件處理程式附加到指定的元素。我們可以對同一個元素使用多個事件處理程式。此方法還有助於我們瞭解事件如何對冒泡做出反應。關於事件冒泡，我們稍後學習。讓我們看看下面 addEventListener() 方法的示例。
語法
element.addEventListener(event, listener, useCapture);
引數
event 可以是任何有效的 JavaScript 事件。事件例如使用“click”代替“onclick”或“mousedown”代替“onmousedown”。
listener(handler function)，它可以是一個 JavaScript 函式，響應該事件的發生。
useCapture - 這是一個可選引數，用於控制事件傳播。傳遞一個布林值，其中“true”表示捕獲階段，“false”表示冒泡階段。
示例
<!DOCTYPE html>
<html>
<body>
<h2>addEventListener() method</h2>
<p>Show text when clicks on button</p>
<button id="btn">Try it</button>
<p id='showText'></p>
<script>
document.getElementById("btn").addEventListener("click", function() {
document.getElementById('showText').innerHTML = "Hello!"
});
</script>
</body>
</html>
當我們單擊按鈕時，文字將顯示。因為我們在按鈕元素上附加了單擊事件監聽器。
我們還可以附加其他事件，如 mouseover、mouseout、change、keyup、keypress 等。我們還可以將事件處理程式附加到 window 物件。
事件冒泡
我們知道，我們有兩個事件傳播，即事件冒泡和事件捕獲。傳播是指當事件發生時定義事件流的方式。
冒泡是最裡面的事件先發生，然後是外面的事件。例如，從子元素到父元素的流動。
removeEventListener() 方法
此方法幫助我們從元素中刪除附加的事件處理程式。
示例
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript removeEventListener()</h2>
<div id="sampleDiv">
<p>Click the button to remove the event handler.</p>
<button onclick="removeHandler()" id="myBtn">Remove</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("sampleDiv").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("sampleDiv").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>
這是 mouseover 事件處理程式的示例。當您將滑鼠懸停在刪除按鈕上時，它將顯示一些隨機數。對於每次懸停，它都會顯示一個隨機數。當我們單擊刪除按鈕時，它將從元素中刪除 mouseover 事件處理程式。像這樣，我們可以簡單地從元素中刪除附加的事件處理程式。
在上面，我們討論了 AngularJS 中的事件是什麼。如何使用 AngularJS 方法（即 addEventListener() 和 removeEventListener() 方法）向 DOM 元素新增事件處理程式並從 DOM 元素中刪除附加的事件處理程式。
3K+ 次瀏覽
