ล่าสุดการพัฒนาเว็บบทเรียน
 

AngularJSเหตุการณ์

❮ก่อนหน้า ถัดไปบท❯

AngularJS มีของตัวเองสั่งเหตุการณ์ของ HTML

เหตุการณ์ AngularJS

คุณสามารถเพิ่มฟังเหตุการณ์ AngularJS องค์ประกอบ HTML ของคุณโดยใช้หนึ่งหรือมากกว่าของคำสั่งเหล่านี้:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

สั่งเหตุการณ์ช่วยให้เราสามารถเรียกใช้ฟังก์ชั่น AngularJS เหตุการณ์ที่เกิดขึ้นผู้ใช้บางอย่าง

เหตุการณ์ AngularJS จะไม่เขียนทับเหตุการณ์ HTML มีเหตุการณ์ทั้งสองจะถูกดำเนินการ

เหตุการณ์ของเมาส์

เหตุการณ์ที่เกิดขึ้นเมื่อเมาส์เคอร์เซอร์เลื่อนมากกว่าองค์ประกอบในลำดับนี้:

  1. NG-mouseenter
  2. NG-วางเมาส์
  3. NG-MouseMove
  4. NG-MouseLeave

หรือเมื่อปุ่มเมาส์คลิกบนองค์ประกอบในลำดับนี้:

  1. NG-mousedown
  2. NG-MouseUp
  3. NG-คลิก

คุณสามารถเพิ่มเหตุการณ์ของเมาส์บนองค์ประกอบ HTML ใด ๆ

ตัวอย่าง

เพิ่มตัวแปรนับเมื่อย้ายเมาส์ไปที่องค์ประกอบ H1:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>
ลองตัวเอง»

NG-คลิก Directive

ng-click สั่งกำหนดรหัส AngularJS ที่จะดำเนินการเมื่อองค์ประกอบจะถูกคลิก

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>
ลองตัวเอง»

นอกจากนี้คุณยังสามารถอ้างถึงฟังก์ชั่น:

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.myFunction = function() {
        $scope.count++;
    }
});
</script>
ลองตัวเอง»

สลับถูก / ผิด

หากคุณต้องการที่จะแสดงส่วนของโค้ด HTML เมื่อมีการคลิกปุ่มและซ่อนเมื่อมีการคลิกปุ่มอีกครั้งเช่นเดียวกับเมนูแบบเลื่อนลงให้ปุ่มทำตัวเหมือนสวิทช์สลับ:

เมนู:

พิซซ่า
พาสต้า
Pesce

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
    <h1>Menu:</h1>
    <div>Pizza</div>
    <div>Pasta</div>
    <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = !$scope.showMe;
    }
});
</script>
ลองตัวเอง»

showMe ตัวแปรเริ่มออกมาเป็นค่าบูลีน false

myFunc ฟังก์ชั่นชุด showMe ตัวแปรตรงข้ามของสิ่งที่มันเป็นโดยใช้ที่ ! (ไม่) ผู้ประกอบการ

$ วัตถุเหตุการณ์

คุณสามารถผ่าน $event วัตถุเป็นอาร์กิวเมนต์เมื่อเรียกใช้ฟังก์ชัน

$event วัตถุประกอบด้วยวัตถุเหตุการณ์เบราว์เซอร์:

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myFunc = function(myE) {
        $scope.x = myE.clientX;
        $scope.y = myE.clientY;
    }
});
</script>
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯