JS为句柄添加监听函数

为什么80%的码农都做不了架构师？>>>

      具体谈如何实现JS为句柄添加监听函数之前先看一段代码,算是抛出这个问题。

	




	
	    
JavaScript

    

        程序代码本身的运行是不会有问题的。不过我的着眼点在于CSS是为了让html文档结构和变现分离,JavaScript着眼于文档结构和行为的分离,上面带按摩并未做到文档结构和行为的彻底分离(div上指明了onclick事件)。

        接下来就是如何在js中实现对div添加onclick监听函数。

JS实现行为、结构分离

       其实在JavaScript中为DOM元素绑定事件监听函数是一件非常常见的事情,但是这里也有许多bug。各种浏览器对于事件的绑定都提供了很多的方法,但是可靠的只有3种:

传统绑定:

    

    
    
        
            
JavaScript
        

    

       A：传统的绑定方法,非常简单稳定,而且函数体内的this就是正在处理事件的节点。

       B:一个元素的事件句柄只能注册一个函数,重复注册会产生覆盖;而且传统的绑定只会在事件冒泡中运行。

       Tips:事件冒泡:当一个元素上的事件触发时,同样的事件会在该元素的所有祖先元素中触发。该事件从元素一直冒泡到DOM树的最上层,这一过程称为事件冒泡。

W3C标准绑定:

    

    
    
        
            
JavaScript
        

    

      A、这种绑定方法同时支持事件处理的捕获和冒泡两个阶段;同一元素的同一事件句柄可以注册多个监听函数;而且内部this指向当前元素

            Tips:adEventListener中的第三个额参数为false(冒泡获取由里向外)|true(由外向里)

      B、我大IE不支持这种注册方法。

IE绑定:

      
    
        
            
JavaScript
        

    

       A:这种绑定方法,可以为同一事件句柄注册多次。

       B:IE的事件模型不支持事件捕获;监听函数体内的this指向的不表示当前元素,而且window.event.srcElement指向的是发生事件的节点,而不是当前节点。

       除了强烈的吐槽一下IE浏览器之外,我们也只能静下心来寻求一种兼容的方法了,接下来介绍两种方法:

跨浏览器方法一:

function addEvent(element, type, handler) {
      if (!handler.$$guid) handler.$$guid = addEvent.guid++;
      if (!element.events) element.events = {};
      var handlers = element.events[type];
      if (!handlers) {
        handlers = element.events[type] = {};
        if (element["on" + type]) {
          handlers[0] = element["on" + type];
        }
      }
      handlers[handler.$$guid] = handler;
      element["on" + type] = handleEvent;
    };
    addEvent.guid = 1;
    
    function removeEvent(element, type, handler) {
      if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
      }
    };
    function handleEvent(event) {
      var returnValue = true;
      event = event || fixEvent(window.event);
      var handlers = this.events[event.type];
      for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        if (this.$$handleEvent(event) === false) {
          returnValue = false;
        }
      }
      return returnValue;
    };
    
    function fixEvent(event) {
      event.preventDefault = fixEvent.preventDefault;
      event.stopPropagation = fixEvent.stopPropagation;
      return event;
    };
    fixEvent.preventDefault = function() {
      this.returnValue = false;
    };
    fixEvent.stopPropagation = function() {
      this.cancelBubble = true;
    };

       参考:http://dean.edwards.name/weblog/2005/10/add-event2/

跨浏览器方法二:

function addEvent( obj, type, fn ) {
      if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
      } else
        obj.addEventListener( type, fn, false );
    }
    function removeEvent( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
    }

       参考::http://ejohn.org/projects/flexible-javascript-events/

转载于:https://my.oschina.net/LCore/blog/335127