angularjs里面的事件

书上对事件的描述并不多,但实践中却是比较好用的东西。

先粘一下概念和API:

 

如同浏览器响应浏览器层的事件,比如鼠标点击、页面滚动那样,Angular应用也可以响应Angular事件。这使我们可以在应用中嵌套的各组件之间进行通信,即使这些组件在创建时并未考虑到其他组件。

 

注意:Angular事件系统并不与浏览器的事件系统相通,这意味着,我们只能在作用域上监听Angular事件而不是DOM事件。

 

  • $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
  • $on用于接收event与data

 

事件属性 目的
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域
event.name 事件名称
event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented  

禁用触摸设备的全局滚动

我们通过event.preventDefault;来取消事件的默认操作,如果禁用触摸设备的全局滚动我们可以用:

document.body.ontouchmove = function (event) {
event.preventDefault();
}

不过winphone的手机不支持这个方法,可以用下面的方法加在css中兼容:
-ms-touch-action: none;

如果想通过触发恢复全局滚动只要移除上面的事件就可以了,具体可以通过我之前的文章了《event.preventDefault和恢复元素默认事件》解下。

event.preventDefault和恢复元素默认事件

写页面事件的时候,有的时候需要用event.preventDefault取消原有的事件后进行重写,这个大家应该都知道。

那么怎么在取消默认事件后再恢复呢。

解绑我们自定义的事件就好了。

以Jquery为例

我们用$(“body”).bind(“touchmove”,function(event){event.preventDefault;//code});取消了body的拖动事件。

恢复这个拖动事件只要$(“body”).unbind(“touchmove”);

就OK了~意外地简单:3