Web之事件处理
2014-11-30 本文已影响200人
suemi
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
