Web之事件处理

---

javascript处理事件

事件种类

• 基本事件(表单,window,键盘,鼠标)
• HTML5事件(网络,通信,拖拽,历史记录等等)
• 移动设备事件
• 自定义事件

事件处理器的注册

首先得到元素对象element

• element.onEvent=handler;
  这样的注册只能注册一个处理程序，但优先级最高，最先处理
• element.addEventListener(eventName,handler,bool);
  bool值决定是事件处理器注册还是捕获程序注册，两者的区别在于调用的顺序不同，false时是处理器，从下往上冒泡调用，而true是捕获注册，从上往下直到调用父元素的处理程序为止，也就是说我注册的捕获程序是我的子元素发生事件时调用的。事件处理器执行的顺序是按注册顺序。
• element.attachEvent('onEventName',handler);
  这种可以定义多个处理器，但它们执行的顺序却不一定，所以呵呵了。。。

事件处理的过程

运行环境

一般情况下事件处理函数中的this指事件目标（个人觉得就是注册的元素对象），但是attach定义时指window

作用域

同所有javascript函数一样，遵循闭包特性，其作用域是其定义时的作用域。但采用第一种方法定义时被转换为能存取全局变量的顶级函数，但比如open函数，就要写成window.open。

返回值

通过返回false来否定默认操作

传播

• 一般冒泡传播直至window，处理分三个阶段，首先是捕获，然后执行处理器，再向上传播，依次重复这样的过程
• 但focus，scroll，blur事件例外，且load事件传播到documentation对象停止，整个文档加载完毕，window的处理器才执行。
• 通过在处理器中使用startpropagation函数来阻止传播，但本元素定义的处理器还是会执行，可以用preventDefault函数来阻止默认操作

jquery处理事件

jquery事件处理器

• jquery的事件处理程序一般只有一个参数（必定是第一个参数），那就是jquery事件对象。
• jquery处理器中的this指向的是对应html元素，需要转成jquery对象，看下面例子

$("p").click(function(){
    $(this).css({background,#555555});  
});

• jquery处理器的返回值始终有意义，如果返回false，该事件的默认行为及接下来的冒泡传播均会停止，类似于调用了stopPropagation和preventDefault.
• 要想传入多个参数，需用trigger函数显式触发事件。

jquery事件对象

包含了jquery事件的详细信息，有诸多NB属性，比如data属性，还定义了preventDefault等方法。

jquery注册

简单注册

$(".sign").click(handler);
//jquery对象.简单事件类型名(处理器);
//注意，以下为特例
$(selector).hover(f,g);
//为鼠标放上去和离开分别注册
$(selector).toggle(f1,f2,f3...);
//第i次事件调用fi

高级注册

$('a').on('mouseover mouseleave',handler);
$('a').on({
    mouseover:f,
    mouseleave:g
});
$('a').on('mouseover',{sb:6},handler);
//对于动态元素怎么办呢
$(parent).on(name,childSelector,{sb:6},handler);
//用父元素为它注册
//中间参数会作为jquery事件对象的data属性值
//one方法使用与on一致，但只起一次作用，搞完就注销

事件注销

$(selector).off('EventName');
//移除该事件所有处理器
$(selector).off(jquery对象);
$('a').off({
    mouseover:f,
    mouseleave:g
});//移除单个处理器

事件触发

$('a').click();
//$(selector).SimpleEventName();但这样不能手动触发addEventListener和attachEvent注册的处理器
$(selector).trigger(EventName,[args]);
//triggerHandler方法触发的事件不会冒泡也没有默认操作
$(selector).live(Name,handler)
//为动态元素即在注册后添加的元素也注册，取消用die，用法基本同bind与unbind

Angular处理事件

事件的产生与传播

基本事件

Angular定义了一系列的基本事件，很多以ng-××的形式，和$××的形式

自定义事件

$scope.$emit('name','args');
//冒泡传播至$rootScope
$scope.$broadcast('name','args');
//向下传播给自己所有的子scope

上次博客中提到访问$rootScope的变量可以让不同的controllers通信，但采用共享数据通信毕竟不正统也缺乏响应性，采用事件也是controllers通信的一个好方法啊。

事件处理器的注册

• 在html里通过ng-click之类的绑定处理函数
• $scope.$on('name',handler);
• $scope.$watch(variable-name,handler);
  watch是监视被ng-model所绑定的变量，当它们变化时就会调用watch所定义的处理器函数，Angular维护一个watch队列，浏览器接收到事件时$digest就会检视这个队列，一旦发现变化就更新dom并且改变页面对应的地方，但$digest只会检视进入angular context的事件
  使用$scope.$apply()会强制进行一次digest操作
• 使用jquery的方式来注册
  通过angular.element(CSS选择器)可以得到jquery对象，然后像jquery一样去去注册

详细的例子可以看这两篇文章
理解$watch ，$apply 和 $digest --- 理解数据绑定过程
angularjs的事件 $broadcast and $emit and $on