私人定制javascript事件处理机制(浅谈)

看到园子里关于事件监听发表的文章，我都有点不好意思写了。不过想想我的题目以私人定制作开头也就妥妥地写吧。

事件相关概念

1.事件类型 发生事件的字符串
　　有传统事件类型 比如表单、window事件等
　　DOM事件类型
　　HTML5事件类型 drag、drop
　　触摸屏和移动设备事件类型 例如touchmove
2.事件目标 Window/Document/Element/XMLHttpRequest/...
3.事件对象 与特定事件相关且包含有关事件详细信息的对象 就是大家熟悉的event
4.事件传播 浏览器决定哪个对象触发其事件处理程序的过程 有冒泡阶段和处于阶段和捕获阶段

注册事件处理程序

1.设置事件目标的属性为所需事件处理程序函数
例如dom1.onclick=function(){/*....*/};
2.设置HTML标签属性为事件处理程序
例如
<p onclick='alert('我的小苹果');'/>
但实际javascript引擎做了如下加工:相当于将作用域前置了,表示对with理解不是很深。

function(event){
    with(document){
        with(this.form||{}){
            with(this){
              /*这里是编码*/
             }
        }
    }
}                    

最后给出的建议是：建议js代码与html分开，因为这样才符合html与javascript各自的职责

事件处理程序的运行环境

1.通过属性注册处理程序时,例如e.onclick=function(){/**/} this 是指事件目标对象
2.对于attachEvent()此时的this指window对象 所以可以参考下列代码

function addEvent(target,type,handler)
{
　　if(target.addEventListener)
　　　　target.addEventListener(type,handler,false);
　　else
　　　　target.attachEvent("on"+type,
　　function(event){
　　　　return handler.call(target,event);
　　});
}

事件处理程序的返回值
很多返回值为false的可以阻止浏览器默认操作，比如链接的跳转，如果return false可以阻止跳转

事件调用顺序

1.通过设置对象属性或HTML属性注册的处理程序一直优先调用
2.addEventListener()注册的处理程序按照它们的注册顺序调用
3.attachEvent()注册的处理程序可能按照任何顺序调用
谈到事件调用顺序，这里不得不说的就是
DOM2级事件规定事件包含三个阶段
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
此处借用http://www.cnblogs.com/yexiaochai/p/3567597.html的例子并膜拜其发现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    #p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
    #c { width: 200px; height: 200px; border: 1px solid red; }
    #sub { width: 100px; height: 100px; border: 1px solid red; }
  </style>
</head>
<body>
  <div id="p">
    parent
    <div id="c">
      child
    </div>
  </div>
  <script type="text/javascript">
      window.alert = function (msg) {
          console.log(msg);
      };
      var p = document.getElementById('p'),
          c = document.getElementById('c');
      p.addEventListener('click', function (e) {
          alert('父节点冒泡')
      }, false);
      c.addEventListener('click', function (e) {
          alert('子节点捕获')
      }, true);
      c.addEventListener('click', function (e) {
          alert('子节点冒泡')
      }, false);
      p.addEventListener('click', function (e) {
          alert('父节点捕获')
      }, true);
  </script>
</body>
</html>

结果如下

//父节点捕获
//子节点捕获
//子节点冒泡
//父节点冒泡
先按照DOM2执行但是如果到了2.处于阶段此时若绑定了捕获又绑定了冒泡那么按照注册顺序执行
所以如果是下列代码

    p.addEventListener('click', function (e) {
          alert('父节点冒泡')
      }, false);
       c.addEventListener('click', function (e) {
          alert('子节点冒泡')
      }, false);
      c.addEventListener('click', function (e) {
          alert('子节点捕获')
      }, true);

      p.addEventListener('click', function (e) {
          alert('父节点捕获')
      }, true);

那么答案是多少呢？

//父节点捕获
//子节点冒泡
//子节点捕获
//父节点冒泡
鼠标事件
除了mouseenter和mouseleave外的所有鼠标事件都能冒泡

事件取消

通过事件对象(event)的preventDefault()/returnValue=false(IE)
事件对象的stopPropagation()可以在事件传播的任何时间调用，无论是捕获阶段、事件目标本身中和冒泡阶段
就是阻止事件的进一步传播，不管捕获也好还是冒泡也好
/cancelBubble=true(IE)只能取消冒泡事件传播

文档加载事件

当文档加载解析完毕且有所延迟(deferred)脚本执行完毕时会触发DOMContentLoaded事件，此时图片和异步(async)脚本
可能依旧在加载，但是文档已经为操作准备就绪了。

在IE中，每次状态改变都伴随着Document.readystatechange事件
那么document.readyState属性随着文档加载过程而变如果是complete则表示文档就绪
这里readystatechange执行顺序早于DOMContentLoaded早于load
但是readystatechange会多次轮询调用，我猜的没有验证。

文档准备就绪封装的函数

var whenReady = (function () {
          var funcs = [];
          var ready = false;
          function handler(e) {
              if (ready) return;
              //此处是为了readystatechange事件做的判断，如果document.readyState === "complete"说明所有的文档准备就绪包括图片
              //和外部请求的资源的那个
              if (e.type === "readystatechange" && document.readyState !== "complete") {
                  return;
              }
              for (var i = 0; i < funcs.length; i++) {
                  funcs[i].call(document);
              }
              ready = true;
              funcs = null;
          };
          if (document.addEventListener) {
              document.addEventListener("DOMContentLoaded", handler, false);
              document.addEventListener("readystatechange", handler, false);
              window.addEventListener("load", handler, false);
          }
          else if (document.attachEvent) {
              document.attachEvent("onreadystatechange", handler);
              window.attachEvent("onload", handler);
          }
          return function whenReady(f) {
              if (ready) f.call(document);
              else funcs.push(f);
          }
      }());

      function fn() {
          console.log("fn is exec");
      }
      document.addEventListener("DOMContentLoaded", fn, false);
      whenReady(fn);

结束语

事件处理调用机制，首先要了解3个阶段和一些常用的事件类型函数，毕竟前端js是事件驱动写法比较多，本人水平有限，如有错误，希望指出，如果对你有那么一点点帮助，请支持推荐一下。