JavaScript事件处理兼容性总结

   <h2>事件监听绑定函数</h2>    <pre>  <code class="language-javascript">// eventType为不含"on"的事件类型  var bind = function(ele, eventType, callback) {      if(ele.addEventListener) {          // W3C标准写法          return ele.addEventListener(eventType, callback, false);      }else if(ele.attachEvent) {          // 兼容IE6~8          return ele.attachEvent(eventType, callback);      }else {          // 兼容IE5-          return ele["on" + eventType] = callback;      }  }  </code></pre>    <h2>事件监听解绑函数</h2>    <pre>  <code class="language-javascript">// eventType为不含"on"的事件类型  var unbind = function(ele, eventType, callback) {      if(ele.removeEventListener) {          // W3C标准写法          return ele.removeEventListener(eventType, callback, false);      }else if(ele.detachEvent) {          // 兼容IE6~8          return ele.detachEvent(eventType, callback);      }else {          // 兼容IE5-          return ele["on" + eventType] = null;      }  }  </code></pre>    <h2>重写window.onload为可多次追加的函数</h2>    <pre>  <code class="language-javascript">var addLoadEvent = function(callback) {      var oldOnLoad = window.onload;      if(type window.onload != "function") {          window.onload = callback;      }else {          window.onload = function() {              if(oldOnLoad) {                  oldOnLoad();              }              callback();          }      }  }  </code></pre>    <h2>获取鼠标点击事件的坐标位置</h2>    <p>screenX: 鼠标位置相对于用户屏幕水平偏移量，参照点也就是原点是屏幕的左上角；</p>    <p>PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化；</p>    <p>clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.</p>    <p>常见的JavaScript获取元素位置的API：</p>    <pre>  <code class="language-javascript">function getPosition(e) {      // 访问事件对象      var e = e || window.event;        // 声明x、y分别为鼠标相对于文档的位置      var x = 0, y = 0;        // 针对W3C标准浏览器具有pageX/Y属性      if(e.pageX) {          x = e.pageX;          y = e.pageY;      }else if(e.clientX) {          // 在IE6~8中不支持pageX，而是用clientX；但clientX只是相对屏幕视口的横坐标，不包含滚动宽度；          var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;          // pageX = clientX + scrollX          x = e.clientX + scrollLeft;          y = e.clientY + scrollTop;      }      return [x, y];  }  </code></pre>    <h2>取消默认事件发生</h2>    <pre>  <code class="language-javascript">function cancelEvent(event) {      if(event.preventDefault) {          e.preventDefault();      }else {          // 兼容IE6~8          event.returnValue = false;      }  }  </code></pre>    <h2>防止事件在嵌套元素中传播</h2>    <p>有一个元素嵌套在另一个元素中，他们都捕获点击事件。如果想阻止事件传播，可以使用stopPropagation()函数，在IE6~8中则可以使用cancelBubble = boolean来实现。</p>    <pre>  <code class="language-javascript">function stopPropagation(event) {      if(event.stopPropagation) {          event.stopPropagation();      }else {          event.cancelBubble = true;      }  }  </code></pre>    <h2>获取键盘事件</h2>    <pre>  <code class="language-javascript">function keyCode(e) {      // 访问事件对象      var e = e || window.event;      var key = e.keyCode || e.charCode;      return key;  }  </code></pre>    <p>来自：http://www.dengzhr.com/js/366</p>