JS知识点12

一，JS事件

JS事件:在用户浏览网站的过程中发生的事。事件作用：事件可以保证用户和网页之间进行对应的交互

1，鼠标事件

鼠标点击事件： btn.onclick

鼠标双击事件： btn.ondblclick

鼠标右击事件：btn.oncontextmenu

鼠标的移入和移出事件：btn1.onmouseenter；btn1.onmouseleave

鼠标在标签上移动的事件,注意该事件在标签上会重复调用 btn1.onmousemove

鼠标的滚轮事件:当鼠标滚轮移动时该事件会被重复调用。 btn1.onmousewheel

e:代表事件对象，其中存储大量的关于当前事件的信息

e.clientX/e.clientY--返回鼠标相对于可视区域的横向和纵向坐标

e.pageX/e.pageY --返回鼠标相对于网页的横向和纵向坐标

e.offsetX/e.offsetY --返回鼠标相对于鼠标所在标签左上角的横向和纵向坐标

鼠标滚轮事件的特殊属性：e.wheelDelta--获取滚轮滚动的距离，如果为正值此时网页向下滚动，如果为负值此时网页向上滚动。

在火狐浏览器下绑定鼠标滚轮事件  注意：火狐浏览器下鼠标滚轮事件不支持mousewheel，需要使用DOMMouseScroll取代。其次获取鼠标滚动方向的方式需要使用detail，并且网页滚动的方向和非火狐浏览器相反。

鼠标按下和弹起：btn1.onmousedown鼠标按下；btn1.onmouseup鼠标弹起

二，事件的处理方式：

事件的处理方式分为两种：

    1.事件捕获

      事件首先被根标签捕获，之后被根标签处理，处理之后事件会向下递交给子级元素处理，子级元素处理之后，事件再一次被向下递交处理，依次进行，直到事件最终传导到直接目标元素为止。该过程被成为事件捕获。

    2.事件冒泡

      事件首先被直接目标元素捕获，之后被直接目标元素处理，处理之后事件会向上递交给父级元素处理，父级元素处理之后，事件再一次被向上递交处理，依次进行，直到事件最终传导到根标签为止。该过程被成为事件冒泡。注意：浏览器默认的事件处理方式为事件冒泡，并且IE浏览器只支持事件冒泡。

三，事件的绑定

JS事件绑定的方式1：直接在标签上添加"on+事件名"的属性,将某一个函数绑定给该属性。优点：方便灵活。缺点：this指向指向window，同时事件对象需要手动传递，并且可读性比较差。    //JS事件绑定方式2：在JS中获取标签，通过为标签添加"on+时间名"的形式添加事件。优点：可以明确知道this的指向，同时不需要手动添加事件对象。并且注意同一个标签，同一个事件被绑定多次，执行时会按照最后一次的绑定执行。缺点：事件绑定过程有点麻烦。

JS事件绑定方式3： 在JS中获取标签，通过调用标签的内置方法；

 eventName：事件名

    callBack:事件对应的回调

    useCapture：布尔类型，true代表使用捕获，false代表不适用捕获    

特点：

    1.同一个标签同一个事件被绑定多次，多次绑定的事件会按照绑定先后顺序依次执行

    2.该绑定事件的方式可以灵活决定事件的处理是按照冒泡还是按照捕获。一般开发中只用冒泡。