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的事件机制

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容