javascript事件传递机制

事件传递机制

---

（*useful）标记：目前觉得有用的函数
//FIXME 标记：待补充

系统接收到触摸会把触摸操作放入runloop的队列中 （*useful）

1. 接收触摸顺序(事件的产生,传递)：
   UIApplication -> window - > viewA(divA) -> viewB(divB)
2. 事件冒泡顺序(事件的响应链)：
   viewB(divB) - > viewA(divA) -> window -> UIApplication

JS:
addEventListener(eventName,handlers,boolean:useCapture)
useCapture=false：将事件处理函数加入到冒泡阶段，在冒泡阶段会被调用；
useCapture=true：将事件处理函数加入到捕获阶段，在捕获阶段会被调用;

iOS:
事件传到UIApplication还不能被处理，就会触发 消息转发 （*useful）
-(void)forwardInvocation:(NSInvocation *)invocation
hitTest:withEvent:方法 ：可以用来拦截返回相应的View （返回nil,事件继续传递
pointInside:withEvent:方法 ：判断事件是否在某个view中

---

DOM0级事件处理程序

.onclick
例子：

1 var btn5 = document.getElementById('btn5');
2 btn5.onclick=function(){
3    console.log(this.id);//btn5   
4 };

DOM2级事件处理程序

监听：

1. addEventListener(eventName,handlers,boolean);
2. removeEventListener()

两个方法都一样接收三个参数:

• 第一个是要处理的事件名,
• 第二个是事件处理程序,
• 第三个值为false时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段;

1 var btn2 = document.getElementById('btn2');
2 var handlers = function () {
3    console.log(this.id);
4 };
5 
6 btn2.addEventListener('click',handlers,false);
7 
8 btn2.removeEventListener('click',handlers.false);

IE事件处理程序

//IE事件处理程序(IE和Opera支持)
//IE用了attachEvent(),detachEvent(),接收两个参数,事件名称和事件处理程序,通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段,所以平时为了兼容更多的浏览器最好将事件添加到事件冒泡阶段,IE8及以前只支持事件冒泡;

1 var btn3 = document.getElementById('btn3');
2 var handlers2=function(){
3    console.log(this===window);//true,注意attachEvent()添加的事件处理程序运行在全局作用域中;
4 };
5 btn3.attachEvent('onclick',handlers2);

跨浏览器事件处理程序

   // 添加句柄  
         addHandler:function(element,type,handler){  
               if(element.addEventListener){   // DOM2级  
                 element.addEventListener(type,handler,false);  
               }else if(element.attachEvent){   // IE浏览器  
                 element.attachEvent('on'+type,handler);  
               }else{   // DOM0级  
                 element['on'+type]=handler;  
               }  
         },

初步理解JS的事件机制