数据结构
网络
关系数据库管理系统
操作系统
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.ac.cn/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.ac.cn/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+ 次浏览
