• javascript 跨浏览器的事件系统


    从技术上讲,javascript并没有提供内置的系统来实现这个非常重要的事件驱动编程,不过得益于浏览器的DOM 事件模型,这缺点并没有过多地暴露出来。但实质上javascript之父也不能主宰这一切,他支持的网景也没有强大到让竞争对手乖乖地使用它的产品,微软搞了一个JScript,死去的Macromedia 搞了一个ActionScript,还有更多,听说这个分支挺复杂的。但借用浏览器内置的DOM事件模型,第一个后果是,想使用它就必须借助某个DOM对象,window,document或元素节点,第二个后果是由于每个浏览器对DOM的支持不一,不能确保事件模型的一致,第三个是由于基于DOM对象,很容易造成循环引用。微软打赢第一次浏览器战争后,就基本没有更新其DOM模型了,与不断更新向w3c,ecma等标准靠近的“标准浏览器”分成两大阵营。但标准浏览器内也不是磐石一块,如FF就不支持mousewheel而是DOMMouseScroll,opera的contextmenu 是不可控的。我们需要自己实现一下。眼下,双主都实现DOM2的事件模型,微软的是attachEvent为首,标准的是addeventListener,允许同一个元素可以绑定多个同类型的事件回调函数。网上许多addEvent函数都是用它们做成的,但也不可靠,首先,IE的回调函数没有强制绑定事件对象,而标准浏览器是强舞曲第一个参数即为事件对象,尽管我们可以用call函数实现强制绑定,但IE的事件对象与标准的也不一样,这里有许多工作要做。另一个,就是回调函数的执行顺序问题,IE是无规则的,标准是按绑定的先后顺序执行。因此,这两个函数也被否定。我打算用最原始的onXXXX来实现,绑定多个函数时,就把它们放入一个函数中,一个for循环搞定。

     
          var dom = {};
          Array.prototype.indexOf =  function (el, index) {
            var n = this.length>>>0,
            i = index == null ? 0 : index < 0 ? Math.max(0, n + index) : index;
            for (; i < n; i++)
              if (i in this && this[i] === el) return i;
            return -1;
          };
          //http://msdn.microsoft.com/zh-cn/library/bb383786.aspx
          //移除 Array 对象中某个元素的第一个匹配项。
          Array.prototype.remove= function (item) {
            var index = this.indexOf(item);
            if (index !== -1) return this.removeAt(index);
            return null;
          };
          //移除 Array 对象中指定位置的元素。
          Array.prototype.removeAt= function (index) {
            return this.splice(index, 1)
          };
          dom.attachEvent = function(el, type, handler) {
            // 在每个元素上设置一个Object类型的私定义属性events
            if (!el.events) el.events = {};
            // 这个对象有许多键为事件类型,值为函数数组的属性
            var handlers = el.events[type];
            if (!handlers) {
              handlers = el.events[type] = [];
              // 如果它原来就以onXXXX方式绑定了某事件,那么把它置为事件数组的第一个元素
              if (el["on" + type]) {
                handlers[0] = el["on" + type];
              }
            }
            //添加回调函数
            handlers.push(handler)
            //以onXXXX方式绑定我们的处理函数
            el["on" + type] = dom.handleEvent;
          };
    
          dom.detachEvent = function(el, type, handler) {
            if (el.events && el.events[type]) {
              el.events[type].remove(handler)
            }
          }
          dom.handleEvent = function (event) {
            var returnValue = true;
            // grab the event object (IE uses a global event object)
            event = event || fixEvent(window.event);
            // get a reference to the hash table of event handlers
            var handlers = this.events[event.type];
            // execute each event handler
            for(var i=0,n=handlers.length;i<n;i++){
              if (handlers[i](event) === false) {
                returnValue = false;
              }
            }
            return returnValue;
          };
          function fixEvent(event) {
            // add W3C standard event methods
            event.preventDefault = fixEvent.preventDefault;
            event.stopPropagation = fixEvent.stopPropagation;
            return event;
          };
          fixEvent.preventDefault = function() {
            this.returnValue = false;
          };
          fixEvent.stopPropagation = function() {
            this.cancelBubble = true;
          };
          var $ = function(id){
            return document.getElementById(id)
          }
          window.onload = function(){
            var a = function(e){
              $("p").innerHTML = e.clientX +"  "+e.clientY
            }
            dom.attachEvent($("target"),"mousemove",a);
            setTimeout(function(){
              dom.detachEvent($("target"),"mousemove",a);
            },10*1000)
          }
    

    我们回顾一下上面的流程,这个事件系统其实是Dean大神的addEvent的一个改版。

    • 设置一个作为命名空间的对象。
    • 对Array做一些扩展。
    • attachEvent 函数用于绑定事件。具体做法在需要绑定事件的对象设置一个events属性,里面再按事件类型放置回调函数,由于有时我们可能在同一个元素上绑定2个或多个onclick事件什么的,因此它们必须是一个数组。最后用DOM0的原始方法添加一个onXXXX属性。
    • detachEvent 函数用于卸载事件,就是把events上对应类型的数组元素去掉。
    • handleEvent 执行回调函数。我们以onXXXX的形式绑定了一个全局的函数,它的作用是获得与修正事件对象,然后取得此事件类型对应的所有回调函数,然后依次把事件对象作为它们的第一个参数再执行它们。最后是处理一下冒泡。
    • fixEvent 修正事件对象。基本上就是让IE拥有标准浏览器的两个方法。

    对于一般应用,它已够用了。但如果追求完全。我们还有许多东西都要用。首先把events这个庞大的对象放到元素上是非常不妥的,不利于集中管理。二,fixEvent并不彻底,如target,pageX/Y等标准浏览器下的属性,在IE中还是用不了。

    首先是handleEvent 函数,现在是无论标准浏览器还是IE的事件对象都要修正,还在每次调用时为IE修正其currentTarget 值。

     
         dom.handleEvent = function (event) {
            event =  event || window.event
            event = dom.fixEvent(event);
            event.currentTarget = this;//修正currentTarget
            var returnValue = true;
            var handlers = this.events[event.type];
            for(var i=0,n=handlers.length;i<n;i++){
              if (handlers[i](event) === false) {
                returnValue = false;
              }
            }
            return returnValue;
          };   
    

    在我们介绍的新版fixEvent函数时,我们先隆重介绍我从jQuery剽窃过来的伪事件对象。

     
          dom.oneObject = function(arr,val){
            var result = {},value = val !== undefined ? val :1;
            for(var i=0,n=arr.length;i<n;i++)
              result[arr[i]] = value;
            return result;
          };
          dom.mixin = function(result, source) {
            if (arguments.length === 1) {
              source = result;
              result = dom;
            }
            if (result && source ){
              for(var key in source)
                source.hasOwnProperty(key) && (result[key] = source[key]);
            }
            if(arguments.length > 2 ){
              var others = [].slice.call(arguments,2);
              for(var i=0,n=others.length;i<n;i++){
                result = arguments.callee(result,others[i]);
              }
            }
            return result;
          }
    
          var MouseEventOne = dom.oneObject(["click","dblclick","mousedown",
            "mousemove","mouseout", "mouseover","mouseup"],"[object MouseEvent]");
          var HTMLEventOne = dom.oneObject(["abort","blur","change","error","focus",
            "load","reset","resize","scroll","select","submit","unload"],"[object Event]");
          var KeyboardEventOne = dom.oneObject(["keyup","keydown","keypress",],
          "[object KeyboardEvent]");
          var EventMap = dom.mixin({},MouseEventOne,HTMLEventOne,KeyboardEventOne)
    
          var fn = "prototype";
          dom.Event = function( src ) {
            if ( !this.preventDefault ) {
              return new dom.Event[fn].init( src );
            }
          };
    
          function returnFalse() {
            return false;
          }
          function returnTrue() {
            return true;
          }
          // http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
          dom.Event[fn] = {
            init:function(src){
              //如果传入的是事件对象
              if ( src && src.type ) {
                this.originalEvent = src;
                this.type = src.type;
                //如果传入的是事件类型
              } else {
                this.type = src;
              }
              this.timeStamp = new Date().valueOf();
              this[ "expando" ] = true;
            },
            //http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Conformance
            toString:function(){
              return EventMap[this.type] || "[object Event]"
            },
            preventDefault: function() {
              this.isDefaultPrevented = returnTrue;
              var e = this.originalEvent;
              if ( !e ) {
                return;
              }
              // 如果存在preventDefault 那么就调用它
              if ( e.preventDefault ) {
                e.preventDefault();
              }
              // 如果存在returnValue 那么就将它设为false
              e.returnValue = false;
            },
            stopPropagation: function() {
              this.isPropagationStopped = returnTrue;
              var e = this.originalEvent;
              if ( !e ) {
                return;
              }
              // 如果存在preventDefault 那么就调用它
              if ( e.stopPropagation ) {
                e.stopPropagation();
              }
              // 如果存在returnValue 那么就将它设为true
              e.cancelBubble = true;
            },
            stopImmediatePropagation: function() {
              this.isImmediatePropagationStopped = returnTrue;
              this.stopPropagation();
            },
            isDefaultPrevented: returnFalse,
            isPropagationStopped: returnFalse,
            isImmediatePropagationStopped: returnFalse
          };
          dom.Event[fn].init[fn] = dom.Event[fn];
    

    这个构造函数只实现了W3C事件模型的少许方法,那些属性去了哪?不急,我们在fixEvent方法中通过拷贝方式实现它们。为了区别原生事件对象与伪事件对象,我们在它上面添加了一个expando属性。

     
          var buttonMap = {
            1:1,
            4:2,
            2:3
          }
          dom.fixEvent = function(event){
            if ( event[ "expando" ] ) {
              return event;
            }
            var originalEvent =  event 
            event = dom.Event(originalEvent);
            for(var prop in originalEvent){
              if(typeof originalEvent[prop] !== "function"){
                event[prop] = originalEvent[prop]
              }   
            }
            //如果不存在target属性,为它添加一个
            if ( !event.target ) {
              event.target = event.srcElement || document;
            }
            //如果事件源对象为文本节点,则置入其父元素
            if ( event.target.nodeType === 3 ) {
              event.target = event.target.parentNode;
            }
            //如果不存在relatedTarget属性,为它添加一个
            if ( !event.relatedTarget && event.fromElement ) {
              event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
            }
    
            //如果不存在pageX/Y则结合clientX/Y做一双出来
            if ( event.pageX == null && event.clientX != null ) {
              var doc = document.documentElement, body = document.body;
              event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
              event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
            }
    
            // 为键盘事件添加which事件
            if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
              event.which = event.charCode || event.keyCode;
            }
    
            // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
            if ( !event.metaKey && event.ctrlKey ) {
              event.metaKey = event.ctrlKey;
            }
     
            // 判定鼠标事件按下的是哪个键,1 === left; 2 === middle; 3 === right
          
            if ( !event.which && event.button !== undefined ) {
              event.which = buttonMap[event.button]
            }
            return event;
          }
    

    毫不犹豫地抄jQuery的方法,因为在所有类库中,jQuery的方法是最好提取的。

    现在我们基本解决了文章中段提出的两个问题中的其中一个。要解决第一个我们就需要引入缓存系统了。这个留在下一部分讲。

  • 相关阅读:
    Unix网络编程中的五种IO模型
    go工具库分析——go-snowflake
    defer
    滑动窗口
    快速幂
    Golang使用注意点
    微服务数据一致性基础认知
    KMP算法
    单调栈和单调队列
    LRU简单学习
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1696182.html
Copyright © 2020-2023  润新知