私人定制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是事件驱动写法比较多，本人水平有限，如有错误，希望指出，如果对你有那么一点点帮助，请支持推荐一下。

秒客网