事件的一些简单了解

事件深入了解

1）：当点击在一个元素时，单击事件不仅仅发生在这个元素上，同时也点击了他的父元素以及祖先元素，甚至是整个页面。

2）：DOM分三级事件绑定

     1：dom0级事件绑定

          dom.onclick = fun( )只能监听冒泡，不能监听捕获。注意ie9，chrome里面的冒泡，一直到window对象，

          但是ie678只到document对象。且没有window对象。

          这种事件处理程序里面的this指的是时间源，没有兼容性问题，DOM0级可以将事件监听直接写在标签中，但工作中不允许这样用。

          DOM0级相同元素不能同时添加多个相同事件，会被覆盖。

     2：DOM1级，与0级没有区别

     3：DOM2级事件绑定

     addEventListener（）

     参数1：事件 click mouseover 不加on

     参数2：事件处理程序。

     参数3：冒泡 false  捕获 true。DOM2级可以同一个元素添加多个事件，不会冲突。事件处理程序里面的this指的是事件源本身。

 ie678浏览器绑定事件，

     attachEvent（），只有两个参数。

     参数一：onclick onmouseover  必须加on

     参数2：事件处理程序，function。不能监听冒泡或者捕获。这个事件处理程序中的this值得不是事件源，而是window。

     同一个元素添加多个事件，执行的顺序是从后到前面。

     4：经典轮子（兼容性能力检测：计算后样式，运动框架，className，addEvent）

     兼容性处理。jquery中用的都是dom2级，自带轮子（兼容性），jquery事件同名不会被覆盖。

三：事件对象

event

任何事件处理函数中，浏览器js引擎都会默认往里面传递一个实参，就是事件对象

box.onclick = function(event){console.dir(event);}

             console.log(event);

            //返回true代表这个事件是否冒泡

            console.log(event.bubbles);

            //返回被点击的事件

            console.log(event.target);

            //事件源的id

            console.log(event.currentTarget.id);

            //被点击事件的id

            console.log(event.target.id);

            //事件类型

            console.log(event.type);

            //被点击事件的id

            console.log(event.srcElement.id);

            //this指代真正的事件源

            console.log(this);

event.stoppropagation();阻止冒泡，只执行到当前

event.preventDefault();阻止默认事件

event中常用的几个位置属性

属性                                                 参照

clientX clientY                            浏览器左上角

x                                                左上角

layerX layerY                              当前事件源左上角

pageX pageY                             当前文档左上角

offsetX offsetY                          当前事件源左上角

screenX screeY                          屏幕左上角

event判断敲击的是那个键盘。

event.keyCode. event.which //onkeydown,:键盘按下   onkeyup.键盘抬起  onkeypress键盘按下抬起

var ev = e||window.event;//为了兼容ie678；

event在ie678里面存在问题，这里不是实参，是window的一个属性，直接使用实参形式不可用window.event

event在ie678里面没有preventDefault( )方法，使用event.returnValue = false;来阻止默认事件。

if (event.preventDefault) {

  event.preventDefault();

  }else{

  event.returnValue = false;

}

event属性target

获取当前点击的元素，但是在ie678里面不兼容，所以在ie678里面使用srcElement

var target = event.target ||event.srcElement;