DOM事件

事件
事件三要素：
1、事件源:绑定事件的节点
2、事件处理函数：点击事件触发时，执行的代码（函数体）
3、事件类型：（单击；hover，move）
书写方式：
DOM1：不建议使用

// 获取要点击的元素
let divEle=document.querySelectorAll("div")[0];
// 点击并执行事件处理函数
divEle.onclick=function(){
  window.alert("结束")
}

// DOM1删除事件
divEle.οnclick="";

DOM2：事件监听器
创建事件监听器
书写格式：元素节点.addEventListener(事件类型，事件处理函数，
布尔值（事件流）)
参数三：捕获型（true），冒泡型（false）

divEle.addEventListener("click", function () {
  window.alert("结束");
},false);//false为默认值

DOM2删除事件

//书写格式：元素节点.removeEventListener(“click”,事件处理函数名)

let uleEle = document.querySelector("ul");
let f70 = function () {
  console.log("f70");
  uleEle.removeEventListener("click", f70)
}
uleEle.addEventListener("click", f70)

DOM0与DOM2的区别：
DOM0的优缺点：
优点：兼容性好
缺点1：同一个事件类型只能绑定一个事件处理函数
缺点2.事件流（冒泡法（从里到外）

DOM2的优缺点:
缺点：兼容性不高
优点1：同一个事件类型只能绑定一个事件处理函数
优点2：事件流（冒泡法（从里到外），捕获法（从外到里） ）

事件对象
事件对象：事件处理函数的参数
function (e) e就是事件对象 e.target 是触发事件的节点

let liEle = document.querySelectorAll("li");
for (let item of liEle) {
    item.addEventListener("click", function(e) {
        //提升兼容性
        let event = e || window.event;
        console.log(event.target);
    });
}

事件委托（事件代理）
减少事件监听的次数
适用场景：
1.多个子元素，绑定相同事件类型，执行同一个事件处理函数
2.子元素是动态的

let olEle=document.querySelector("ol");
olEle.addEventListener("click",function(e){
let event = e || window.event;
//指定li元素 需大写
    if(event.target.nodeName=="LI"){
        event.target.classList.toggle("box");
}
//指定p元素 需小写
    if(event.target.localName=="p"){
        event.target.classList.toggle("box2");
    }
})

表单对象

// 获取需要使用的节点
let bEle = document.querySelector("body");
let inpEle = document.querySelector("input");

焦点事件

inpEle.addEventListener("focus", function(e) {
    e.target.style.outline = "1px solid red";
    let newSpan = document.createElement("span");
    newSpan.innerText = "input your phone number!"
    bEle.appendChild(newSpan);
});

输入事件(只要输入就触发)

inpEle.addEventListener("input", function(e) {
    let str = e.target.value;
    console.log("A");
    let re = /3/;
    if (re.test(str)) {
        e.target.style.color = "red";
    }
});

失去焦点

inpEle.addEventListener("blur", function(e) {
    e.target.style.outline = "";
});

内容发生变化时(失去焦点后，判断内容是否发生变化)

inpEle.addEventListener("change", function() {
    console.log("F70");
});

键盘事件
键盘按下时触发的事件

let inputEle =document.querySelector("input");
// 键盘按下时触发的事件


document.addEventListener("keydown",function(e){
let event = e || window.event;
console.log("按下键盘"); 
 console.log(e.key);//识别键盘上被按的内容
// 做判断可做事情 例：判断e.key的按的内容是否是enter
})

键盘抬起时触发的事件

document.addEventListener("keyup",function(e){
 let event = e || window.event;
 console.log("键盘抬起");})

keypress只识别字符键（数字，字母，标点符号，回车）

document.addEventListener("keypress",function(e){
let event = e || window.event;
console.log("按键盘");})

鼠标事件
现获取需使用的元素（在哪个节点身上添加鼠标监听事件）
双击鼠标事件（ dblclick ）

arEle.addEventListener("dblclick",function(){
console.log("鼠标双击");})

鼠标移入，移出事件
1.mouseenter，mouseleave不会考虑子元素（）
不考虑子元素：鼠标移入子元素，不会触发父元素的事件

arEle.addEventListener("mouseenter",function(){
console.log("鼠标移入");

 secEle.style.backgroundColor="yellow"
})
arEle.addEventListener("mouseleave",function(){
 console.log("鼠标移出");
 secEle.style.backgroundColor="green"
})

1. 

mouseover，mouseout会考虑子元素（）

arEle.addEventListener("mouseover",function(){
console.log("鼠标移入");
 secEle.style.backgroundColor="yellow"
})
arEle.addEventListener("mouseout",function(){
console.log("鼠标移出");
 secEle.style.backgroundColor="green"
})

鼠标按下事件（mousedown）

arEle.addEventListener("mousedown",function(){

console.log("鼠标按下");

 secEle.style.backgroundColor="green";
})

鼠标抬起事件（mouseup）

arEle.addEventListener("mouseup",function(){
console.log("鼠标抬起");
secEle.style.backgroundColor="yellow";
})

鼠标移动事件（mousemove）

arEle.addEventListener("mousemove",function(e){
let event=e||window.event;
console.log(event.clientX,event.clientY);
// event.clientX：//鼠标在浏览器水平位置
// event.clientY：//鼠标在浏览器垂直位置
console.log("鼠标移动");
secEle.style.backgroundColor="yellow";
})

事件对象的方法（event）
1.
【阻止默认事件】 event.preventDefault( )

let aEle = document.getElementsByTagName("a")[0];
aEle.addEventListener("click", function(e) {
let event = e || window.event;
 // window.alert("a被点击了！！！");
 let state = window.confirm("ccc");
 if (!state) {
event.preventDefault();
  }
});

2.【阻止事件冒泡】event.stopPropagation( )冒泡型，点击后从外到里

arEle.addEventListener("click",function(){
console.log("article");

})
secEle.addEventListener("click",function(e){
 console.log("section");

 let event = e || window.event;
 event.stopPropagation();
})
pEle.addEventListener("click",function(e){
console.log("p");
let event = e || window.event;
 event.stopPropagation();
})

3.【阻止事件捕获】 event.stopImmediatePropagation( )

arEle.addEventListener("click", function (e) {
 console.log("article");

let event = e || window.event;
 event.stopImmediatePropagation();
}, true)
secEle.addEventListener("click", function (e) {
 console.log("section");
let event = e || window.event;
 event.stopImmediatePropagation();
}, true)
pEle.addEventListener("click", function (e) {
 console.log("p");
 let event = e || window.event;
event.stopImmediatePropagation();
}, true)

页面事件
1.
页面加载时触发（参考小广告刷新后向上）（load）

window.addEventListener("load",function(){
console.log(125);
});

1. 

页面滚动条事件（例如：页面下拉多少出现返回顶部）（scroll）

F70.style.display = "none";
window.addEventListener("scroll", function() {

 if (window.pageYOffset > 200) {

    F70.style.display = "block";

 } else {  F70.style.display = "none";   
    } 
});

1. 

页面尺寸发生变化触发事件 （resize）

window.addEventListener("resize", function() {
 console.log(window.innerHeight, window.innerWidth);});