DOM对象、事件种类、Event事件、预加载
CSS样式
pointer-events: none; 不接收点击事件
DOM对象.addEventListener("事件类型",事件触发后的回调函数,是否捕获阶段触发（默认是false）/配置对象);
配置对象 {once:true} 仅接受一次事件
捕获阶段 目标阶段 冒泡阶段
外 内
| |
内 外
e.stopPropagation(); 停止继续冒泡触发
事件触发时，会遇到两种，1、事件侦听的对象，2、事件最终触发的目标对象
如果监听的DOM没有子元素，那么事件侦听的对象，和最终触发的目标对象是一致
但是如果监听的DOM有子元素，而恰巧点击到这个子元素上，侦听的对象就是外面的父元素，目标点击的对象就是子元素
事件侦听的对象 e.currentTarget this
事件最终触发的目标对象
e.target e.srcElement(IE)
当容器内有多个子元素需要侦听事件时，我们只需要给父元素侦听事件，通过e.target判断被点击
到的实际目标对象，这种方法我们叫事件委托，把子元素的事件委托给父元素
e.preventDefault(); 去除默认事件行为（比如取消右键菜单，提交表单跳转...
右键菜单的设定主要是通过contextmenu事件来激活
e.stopImmediatePropagation();如果一个DOM对象针对同一事件类型，侦听多次，执行不同
的事件函数，在某个事件函数中使用该方法，可以阻止后续的事件方法执行，事件谁先侦听，谁先执行
DOM对象.removeEventListener("事件类型",要删除的侦听事件执行的函数)
事件种类
document.onclick=function(){
// 删除事件
document.onclick=null;
}
//添加事件 document.addEventListener("click",clickHandler);
//兼容ie8以下 document.attachEvent("onclick",clickHandler);
function clickHandler(){
//移除事件 document.removeEventListener("click",clickHandler);
//兼容ie8的移出事件 document.detachEvent("onclick",clickHandler);
}
1、onclick会造成回调地狱
2、addEventListener允许捕获阶段触发，但是onclick不允许捕获阶段触发
3、onclick仅允许执行最后一次赋值的函数，事件只能独立执行一个函数，addEventListener可以执行多个函数
4、addEventListener支持自定义事件的侦听和抛发，on没有自定义事件侦听
5、on支持所有浏览器，addEventListener支持IE8以上
6、on代码写起来简单容易理解编写，addEventListener适用于函数式编程
Event事件
change 主要针对表单，当表单或者表单元素发生改变，在失焦后触发该事件
所有的表单都必须要写name，checkbox和radio都必须要写value
可以针对表单form和其表单的元素侦听
error 错误
load 加载完成
预加载
// 预加载
var arr=[]
for(var i=2;i<7;i++){
var img=new Image();
img.src="./img/"+i+".jpg";
img.addEventListener("load",loadHandler);
}
function loadHandler(e){
arr.push(this);
if(arr.length===5){
// console.log(arr)
arr.forEach(function(item){
console.log(item.src);
})
}
}
// 预加载
var n=2;
var arr=[];
function loadImage(){
var img=new Image();
img.addEventListener("load",loadHandler);
img.src="./img/"+n+".jpg";
}
function loadHandler(e){
this.removeEventListener("load",loadHandler)
arr.push(this);
n++;
if(n>6){
loadFinishHandler();
return;
}
loadImage();
}
function loadFinishHandler(){
arr.forEach(function(item){
console.log(item.src)
})
}
loadImage();
注意：offsetWidth clientWidth scrollWidth 获取的前提条件1、必须放在body中，2、必须要有宽高
针对表单
reset 重置 侦听重置表单事件
submit 提交 侦听提交表单事件
针对window
resize 重设大小 window的窗口发生改变大小时，触发
select 选择 针对input文本框或者textarea文本域使用，当选择其中文字时触发
scroll 滚动条 当滚动条滚动时触发 任何具备有滚动条的都可以触发，窗口的只能使用document或者window
