如何使用 AngularJS 在 HTML 中添加事件监听器?
在 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>
这里，我们点击"添加"按钮，每次点击用户计数都会加一。
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>
点击按钮时，文本将会显示。因为我们在按钮元素上附加了 click 事件监听器。
我们还可以附加其他事件，例如 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>
这是鼠标悬停事件处理程序的示例。当鼠标悬停在移除按钮上时，它会显示一些随机数。每次鼠标悬停时，它都会显示一个随机数。当我们点击移除按钮时，它会从元素中移除鼠标悬停事件处理程序。像这样，我们可以简单地从元素中移除附加的事件处理程序。
上面，我们讨论了 AngularJS 中的事件是什么。如何使用 AngularJS 方法(即 addEventListener() 和 removeEventListener() 方法)从 DOM 元素中添加事件处理程序和移除附加的事件处理程序。
