JavaScript学习笔记之四----事件

                本来这个话题内容很多，但是由于消化的不是很好，所以能写出来的可能会很少，而且由于从DOM一章开始涉及到兼容浏览器的内容就很多了，虽然在书上看多很多兼容性的问题，但是实质上并不能搞清楚谁对谁，学习这些内容真不是一招一夕的啊。

                以前在一个js的教程里看到过一句话，大意是说：在javascript中，setTimeout可以用来实现多线程编程。当时我也信了，在后来的编程当中也确实没有出现过太多的困扰，可惜的是，这种说法是错的，而线程一说也是荒谬，因为在js中不存在线程，何以见得？让我们来看这个例子

 

                while(!window.loaded()){}                //loaded()是个虚拟的函数，在js中并无此函数
                document.write(111);

 

 

原意是想在页面载入后执行javascript。可惜的是，在这个页面中将永远无法进行到下一步。故此在JS中异步回调函数来检查更新，当DOM元素触发了某事件的时候可以藉指派一个回调函数来处理

                在js中有很多的事件监听函数（属性），如onload，onclick，onmouseover……。

一、                     事件的捕获和冒泡

事件的捕获是从dom的最外层去处理直到被触发的最里层DOM元素。在我们通常使用onevent特性（event是泛指事件行为）绑定事件的监听处理函数，这样的情况下事件是不处理捕获阶段的。

事件的冒泡则是从DOM被触发的最里层DOM元素往外倒最外层的处理

二、                     事件的特性

事件对象是一个很重要的对象，在W3C（绝大多数的浏览器也支持了这个标准）中，一个事件处理函数是拥有e这个参数对象的，他表示了事件的对象。但在ie中则是使用了window.event这个对象来作为事件对象的。故此在使用的时候需要注意

往往很多时候我们需要通过事件冒泡来确保事件处理的正确性。由于从事件的对象就已经有不同的表示了，那么在这里必然能看到IE和大部分的浏览器所支持的（W3C）的又一区别

 

function stopBubble(e)     {
      if(e&& e.stopPropagation)                {
             e.stopPropagation();
      }     else{
             window.event.cancelBubble= true;
      }
}

 

 

使用这种方式化解了这种分歧，当然两者之间的区别并非到此就结束了，在取消浏览器默认行为的时候有出现了这样的问题。我们只好再次合并。

 

function stopDefault(e)    {
    if(e&& e.preventDefault)  {
           e.preventDefault();
    }     else        {
           window.event.returnValue= false;
    }
     return false;
}

 

 

最后需要提到的是一个this关键字，这个关键字可以让我们重用同类代码，比如下面这段代码

 

function handleClick()       {
               this.style.color= “whilte”;
}

 

 

三、                     重看事件绑定

除了传统的onevent方式的绑定外，我们还可以使用DOM绑定，这样做可以为同一个元素的同一个事件绑定多个监听而不相互覆盖。dom.addEventListener(name,callback,set)和dom.attachEvent(name,callback);前一种方式是W3C的标准，他还支持事件的捕获阶段，而后一种是IE的做法。另外一个click事件。W3C里叫”click”而IE里叫”onclick”。

                最后贴上Dean Edwards写的addEvent/removeEvent库代码

 

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] = handeler;
     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 handlerEvent(event)         {
             var returnValue = true;
             event= event || fixEvent(window.event);
 
             var handlers = this.events[event.type];
 
             for(vari in handlers)           {
                    this.$handleEvent= handlers[i];
                    if(this.$handleEvent(event)=== false)          {
                         returnValue= false;
                    }
              }
}
 
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;
}