事件详解

1、给一个对象绑定一个事件处理函数的形式

    一、给一个对象绑定一个事件处理函数的第一种形式：

       (1) 将一个函数赋值给一个事件处理程序属性，首先要取得一个要操做的对象的引用（obj）:

            obj.onclick = fn;

       (2) 当给一个对象的同一个事件绑定多个函数时：（后者会覆盖前者）

             function fn1(){
                alert(1);
             }
             function fn2(){
                alert(2);
             }

             document.onclick = fn1;

             document.onclick = fn2;  // 会覆盖前面绑定的fn1

       (3) 事件绑定形式的取消:

            obj.onclick = null;

    二、给一个对象的同一个事件绑定多个不一样的函数，就要用到第二种形式：
       给一个对象绑定一个事件处理函数的第二种形式是存在兼容问题的：

       (1) ie : obj.attachEvent(事件名称,事件函数)

                一、没有捕获

                二、事件名称有on

                三、事件函数执行的顺序：标准ie下-->正序；非标准ie下-->倒序

                四、this指向window

                  解决方法：能够用函数下的一个方法call改变函数执行过程当中的内部this的指向

                    document.attachEvent('onclick',function (){
                        fn1.call(document);   // call方法第一个参数能够改变函数执行过程当中的内部的this的指向，第二个参数开始就是原来函数的参数列表

　　　　　　　　　　　　　　　　　　　　// fn1() ==> fn1.call();

                    });

                五、经过attachEvent()添加的事件处理函数都会被添加到冒泡阶段

                六、ie下事件绑定形式的取消

                    obj.detachEvent(事件名称,事件函数)

                七、匿名函数没法去除

       (2) 标准 : obj.addEventLister(事件名称,事件函数,是否捕获)

                一、有捕获

　　　　　　　是否捕获：默认是false
                                  false ：冒泡
                                  true ：捕获

                二、事件名称没有on

                三、事件执行的顺序是正序的

                四、this指向触发该事件的对象

                五、标准下事件绑定形式的取消

                    obj.removeEventListener(事件名称,事件函数,是否捕获)

                六、经过addEventLister()添加的匿名函数没法去除

                七、给一个对象document的同一个事件click绑定两个函数fn1和fn2:

                    document.addEventListener('click',fn1,false);

                    document.addEventListener('click',fn2,false);

 

2、event对象

    一、event : 事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方- event对象，供咱们在须要的时候调用

    二、事件函数：事件调用的函数，一个函数是否是事件函数，不在定义的时候决定，而是取决于这个函数调用的时候

　 三、事件函数绑定：把一个函数赋值给某个事件，让他们之间产生关联，当这个事件发生的时候执行这个函数，咱们称之为事件函数绑定

    注：事件对象(event)必须在一个事件调用的函数里面使用才有内容

    四、 兼容：

        (1) ie/chrome : event是一个内置全局对象；

         　　元素.事件 = function (){
              　　  alert(event);     // 在ie和chrome是兼容的
       　　  }

        (2) 标准下：事件对象是经过事件函数的第一个参数传入。若是一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象

　　        元素.事件 = function (ev){
     　　           alert(ev);     // 非标准下，返回的是undefined
     　　           alert(ev.clientX);   // clientX[Y]: 当一个事件发生的时候，鼠标到页面可视区的距离 ( X是X轴，Y是Y轴 )
  　　      }

    五、解决兼容问题：

       　　 元素.事件 = function (ev){    // 传入第一个参数 ev
       　　     var ev = ev || event;     // 用逻辑或来作判断
      　　      alert(ev);                // 兼容问题解决
　　        }

 

3、焦点事件：

    一、焦点：使浏览器可以区分用户输入的对象，当一个元素有焦点的时候，那么他就能够接收用户的输入。

         咱们能够经过一些方式给元素设置焦点：
         一、点击
         二、tab键
         三、js

    注：不是全部的元素都可以接收焦点，可以响应用户操做的元素才有焦点

    二、onfocus: 当元素获取到焦点的时候触发
         onblur: 当元素失去焦点的时候触发

    三、方法：

        obj.focus();   给指定的元素设置焦点；

        obj.blur();    取消指定元素的焦点；

        obj.select();  选择指定元素里面的文本内容（可以选中的内容只能是用户可以输入的内容）

 

4、键盘事件：

    注：不是全部元素都可以接受键盘事件的，可以接受焦点的元素就可以接受键盘事件

    一、onkeydown : 当键盘按键按下的时候触发。　若是按下不抬起，那么会连续触发

         onkeyup : 当键盘按键抬起的时候触发

    二、跟键盘事件有关的event下的属性：

        event.keyCode : 数字类型  键盘按键的值（咱们称之为键值）
                   　　        每个按键都有不一样的值，相同功能的键值是同样的

        ctrlKey,shiftKey,altKey  返回值：布尔值
             　　　　　　   当一个事件发生的时候，若是ctrl || shift || alt 是按下的状态，返回true，不然返回false

 

5、事件流  （事件流描述的是：从页面中接收事件的顺序）

    一、事件冒泡

       (1) 概念：即事件开始时由具体的元素（文档中嵌套层最深的那个节点）接收，而后逐级向上传播到较为不具体的节点（文档）。

       (2) 事件冒泡机制：当一个元素接收到事件的时候，会把他接收到的全部传播给他的父级，一直到顶层window，这种机制称之为事件冒泡机制

       (3) 阻止冒泡：当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

    二、事件捕获

       (1) 概念：事件捕获的思想是不太具体的节点应该最先接收到事件，而具体的节点应该最后接收到事件。

       (2) 事件捕获的用意在于 在事件到达预约目标以前捕获它

    三、事件流的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

        过程：首先发生的是事件捕获，为截获事件提供了机会；而后是实际的目标接收到事件；最后是冒泡阶段，能够在这个阶段对事件作出响应

        注：实际的目标在捕获阶段不会接收事件；

              冒泡阶段方法，事件又传播回文档

    四、同时取消事件捕获和冒泡：event.stopPropagatioin();

 

6、设置全局捕获

    一、 定义：当咱们给一个元素设置全局捕获之后，那么这个元素就会监听后续发生的全部事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发

    二、 格式：元素.setCapture()

    三、 释放全局捕获：元素.releaseCapture()

    四、 setCapture()兼容问题：
           a : ie : 有这个方法，而且有效果;
           b : ff : 有这个方法，可是没有效果;
           c ：chrome : 没有这个方法，浏览器会报错;

 

7、事件默认行为

    一、当一个事件发生的时候，浏览器本身会默认作的事情。好比：

        oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发

    二、如何阻止事件默认行为？

        当前这个行为是什么事件触发的，而后在这个事件的处理函数中使用：

            return false；           （非标准下）
            event.preventDefault();  （标准下）

 

8、内存与性能

    一、在使用事件时，存在的问题：

      (1) 每一个函数都是对象，都会占用内存，内存中的对象越多，性能就越差。所以，事件处理程序的数量直接关系到页面的总体运行性能。

      (2) 每当事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的javaScript代码之间就会创建一个链接，链接越多，执行起来就越慢

    二、解决其问题：

      (1) 采用事件委托技术：事件委托是利用事件冒泡，只指定一个事件处理函数，就可管理某一类型的全部事件，从而限制页面中事件处理程序的数量。（全部用到按钮、鼠标和键盘事件的，都适合采用事件委托技术）

      (2) 移除事件处理程序：

           方法一：obj.事件 = null;   // 移除事件处理程序           方法二：在页面卸载以前，先经过onunload事件处理程序移除全部事件处理程序。（onunload事件：在文档彻底卸载后触发）