在文档装载完成后会触发 load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载
window.onload = function () { } 。
为当前页面的页面滚动事件添加事件处理函数
window.onscroll = function (e) {
// 当页面的滚动条滚动时,会执行这里的代码
}
window.scrollY //返回文档在垂直方向已滚动的像素值
onwheel特性指向当前元素的滑轮滑动事件函数
element.onwheel = function() { .. }
e.target 与 e.currentTarget
e.target为触发事件的元素，标识事件发生的元素，接收事件的实际目标。
e.currentTarget 是事件处理程序附加到的元素，也就是监听事件的对象。
event.preventDefault()
js取消事件默认动作，可配合条件语句做相应判断，参考MDN
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
</head>
<body>
<p>请输入一些字母,只允许小写字母.</p>
<form>
<input type="text" id="my-textbox"/>
</form>
<script type="text/javascript">
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
alert("只能输入小写字母." + "\n"
+ "charCode: " + charCode + "\n"
);
}
}
}
document.getElementById('my-textbox').addEventListener(
'keypress', checkName, false
);
</script>
</body>
</html>
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的顺序遍历文档的节点)。返回的对象是 NodeList) 。
document.querySelectorAll('.box>ul>li');//
var matches = document.querySelectorAll("div.note, div.alert");//返回一个文档中所有的class为"note"或者 "alert"的div元素
返回文档中与指定选择器或选择器组匹配的第一个Element
var el = document.querySelector(".myclass");//返回当前文档中第一个类名为 "myclass" 的元素
当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件
类似 mouseover它们两者之间的差别是 mouseenter 不会冒泡，也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发
t.onmouseenter = function(){}
t.onmouseleave = function(){}
返回一个元素指定的属性值
let div1 = document.getElementById("div1");
let align = div1.getAttribute("align");
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其offsetParent元素的顶部的距离。注意：不是距离视口的位置
offsetTop = (body的margin-top)+(body的padding-top)+(当前元素的margin-top);
滚动到文档中的某个坐标
window.scrollTo(x-coord,y-coord)
setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟
var n=0;
var id=setInterval(()=>{
n=n+1;
d.style.left = n+'px';
if(n>=100){clearInterval(id)}
},40)//如果一秒钟内有24帧，那么肉眼看起来这个东西就是在动。40 为每动一次用时40毫秒
