angularevent的简单介绍

http://www.itjxue.com  2023-01-26 09:29  来源:未知  点击次数: 

angular中的event有什么作用

就是angular的事件对象,一般用于绑定事件,例子如下

1,前端html页面绑定click事件,

input type="checkbox"

ng-click="updateSpecAttr($event,s.text,o.optionName)"/

2,调用前端mvc中的controller层中的updatespecatrr方法,参数传到这里

$scope.updateSpecAttr = function($event, name, value){

var obj = $scope.searchJsonByKey($scope.goods.goodsDesc

.specificationItems,'attributeName', name);

3,这里是后端代码的一部分,也是理解的重点,这里的if中的就是前面传过来的对象,判断上面checkbox是否选中,

if($event.target.checked){ }

综上所述.我个人的理解就是,便于绑定事件在后端的延续性操作

angular阻止冒泡事件

当元素多层嵌套的时候,每层都有点击事件,它就会发生冒泡,一层一层的触发,但有时候我们只想触发某一层,不想让其他层的事件触发,这就需要阻止冒泡事件了。

以angular项目为例,我们都知道angularJS中的执行方法都会自带一个$event,这个$event就是当前事件的对象,通过它来阻止冒泡。

查看angular的官方api文档,可以看出,angular对ng事件(例如:ng-click、ng-blur、ng-dblclick等等),添加了一个$event变量。

其实无论是js还是jq抑或是angular,阻止冒泡的关键都在于抓取event/$event

Angular 父组件监听子组件事件--by EventEmitter

EventEmitter的一个典型应用就是父组件监听子组件的事件。

子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应。

即:

子组件发射-父组件接收-响应

子组件的eventEmitter是一个输出属性, 通常带有@output()装饰器。

子组件:

父组件绑定并响应:

通过子组件的引用,在组件引用上面绑定:(eventEmitter)="模板表达式",就像响应(click)事件一样。

这个例子里面绑定:

angular 把事件参数用$event 传递给父组件中的处理方法。

Javascript angular2中$event.target有时获取的是当前元素的子元素,这种问题该怎么避免呢

这就是事件冒泡,当一个元素触发事件后,会逐层上报给父元素、祖父元素……乃至document,也就是说这些元素都会同时触发事件。这种情况下,event.target就是指最初触发事件的那个子元素(就比如你题目中的img),而event.currentTarget才是被冒泡后触发事件的当前元素(比如li)。这也就意味着,当你点击li时,如果点到的是子元素img,则event.target就是img,而event.currentTarget则是li,而当你点到的是li里面除img之外的其他部分时,event.target和event.currentTarget都是li

所以,现在你知道该怎么做啦?就是不要使用event.target,改用event.currentTarget

(责任编辑:IT教学网)

更多

推荐Painter教程文章