事件

事件

1.定义：事件是js跳动的心脏，可实现用户和浏览器之间的交互

2.事件流：【事件执行的顺序】

       1>事件捕获（默认被禁止）：从最不具体的元素到最具体的元素（从外到内）。

2>事件冒泡（主流浏览器都支持）：从最具体的元素向最不具体的元素冒泡（从内到外【找父辈元素不找兄弟元素】。

3.目标元素：是触发该事件的元素

4.阻止事件冒泡：

       IE: 事件对象.cancelBubble = true     属性

       非IE: 事件对象.stopPropagation()

5.事件对象：event  (包含有关当前事件的所有信息)

       IE：window.event

       非IE：事件执行时函数后面的形参  event     event.which为1代表左键为3代表右键

6.阻止事件的默认行为（如a标签默认实现跳转）

       IE：事件对象.returnValue    (false阻止true不阻止)

       非IE：事件对象.preventDefault()

  万能阻止：href或action属性值写“javascript:void(0)”.表示执行一个空事件

       清除鼠标右键的默认事件：*.oncontextmenu = function(){return false}

7.事件代理/事件委托（利用事件冒泡原理）：把多个元素上同一类型的事件委托到其父类元素上

8.目标元素的获取：

       IE：事件对象.srcElement

       非IE：事件对象.target

9.事件的传参（利用闭包）：

       box.onclick = (function(color){

              return function(){

              this.style.background = color

}

})(“red”)

10.DOM0级/2级事件

       0级定义：同一元素上同类型的事件只能执行一个

              0级事件的添加：元素.on+事件名称 = function（）{}

              0级事件的删除：元素.on+事件名称 = null；

       2级定义：同一元素上，同类型的事件可以执行多个

              添加：IE：元素.attachEvent(on + 事件名称，函数)

                       非IE：元素.attachEventListener(事件名称，函数，是否支持事件捕获（默认               false）)

        删除：IE：元素.detachEvent(on + 事件名称，函数)

                       非IE：元素.removeEventListener(事件名称，函数，false)

                     注意：DOM2级中的函数添加和删除时已经不是同一个元素，这就需要把函数赋值给变量，并在函数所在的位置用变量名替代！

11.事件类型：

      1>鼠标事件：click  dbclick  mousedown  mouseup   mouseover   mouseout  

                            mouseenter  mouseleave  mousemove  wheel/mouseWheel

      2>键盘事件: keyup   keydown  keypress  input （event.keyCode表示键值）

      3>html事件：load focus blur  change  submit  reset    select  resize  scroll

                     检测浏览器屏幕大小的改变：

                     window.onresize = function(){

                            document.documentElement.clientWidth

}

12.获取鼠标的位置坐标、

       document.onmousemove = function(evt){

              var e = evt || window.event;

              x.value = e.x||e.pageX||e.clientX;

              y.value = e.y||e.pageY||e.clientY;

}

13.获取当前文档的滚动高度：

       var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;