当许多孩子和javascript中的选项时事件传播

时间:2017-12-13 21:01:16

标签: javascript

我对网络开发很陌生。我开始使用AngularJS并且可能学习了不好的做法,因为Angular可以方便地将javascript放入HTML中。

使用AngularJS,我曾写过:

var app = angular.module('App',[]);
app.controller("Ctrl", function($scope){
    $scope.items = [
        { name:"item 1" },
        { name:"item 2" }
    ];
    $scope.remove = function(item) {
        var i = $scope.items.indexOf(item);
        $scope.items.splice(i,1);
    };
    $scope.log = function(item) {
        console.log(item.name);
    };
});

使用我的HTML:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body ng-app="App" ng-controller="Ctrl">

    <div ng-repeat="item in items">
      {{item.name}}
      <button class="log" ng-click="log(item)">log</button>
      <button class="remove" ng-click="remove(item)">remove</button>
    </div>

    <script src="index.js"></script>
  </body>
</html>

但是我今天读到了关于事件传播的内容,我喜欢它的原理。 但在实践中,我想出了类似的东西:

var list = document.body;
list.addEventListener("click", function(e) {
    e.stopPropagation();
    var i = Array.prototype.slice.call(list.children).indexOf(e.target);
    switch(target.className){
        "log": break; // call $scope.log here
        "remove": break; // call $scope.remove here
    }
});

是否可以使我的处理程序更具体,以避免大转换?

0 个答案:

没有答案