原生js教学小结

最近几日教学生们原生js，写点小知识～～～

目前来看js常用的事件有：

1.onclick   //点击事件

2.ondblclick  //双击事件

3.onmouseover //鼠标移入事件

4.onmouserleave //鼠标移出事件

5.onmousermove  //鼠标移动事件

6.onmousedown  //鼠标按下事件

7.onmouseup  //鼠标抬起事件

8.onkeydown   //按键按下事件

9.onkeyup   //按键抬起事件

10.onscroll  //监听页面滚动事件

如果想对绑定的事件进行解绑可以使用① element.on事件 = function（） { return false} 的形式  ② element.on事件 = null （通过绑定相同事件覆盖的原理，来解绑事件）

事件监听方法：

addEventListener（事件，调用的方法，事件传递方式）

以及同一个事件的传递过程（事件捕获 事件触发 事件冒泡），用addEventListener来添加事件监听，默认事件传递方式为冒泡，其为false的布尔值。如果用true的布尔值，则表明是以事件捕捉的形式进行传递。此处主要讲事件冒泡，事件冒泡的形式是从目标元素开始触发，然后向document进行传递。即同样的事件先从子元素触发，再向父元素一次传递进行触发。如果想在子元素触发后，阻止向父元素传递，则使用e.stopPropagation（） 。 如果想阻止默认事件的发生，则使用e.preventDefault()。

js在后面的事件中监听数据时常用的属性：

event.clientX; event.clentY 距离窗口左上角的X和Y；

event.screenX event.screenY 距离pc屏幕左上角的X和Y；

event.pageX  event.pageY  距离文档左上角的X和Y  （这个即使页面滚动了，仍会计算在内）

document.body.scrollTop用以检测页面滚动后相对于窗口上边框的距离