事件的基本知识概念（三要素、事件对象、事件代理）

事件三要素

1.事件源：绑定事件的节点

2.事件处理函数：点事件触发时，执行的代码（函数体）

3.事件类型：（单击、鼠标移入移出、鼠标移动）

DOM0

优点：兼容性好

缺点：同一个类型只能绑定一个事件处理函数 事件流（冒泡型）不能改变

let divEle = document.querySelector("div");
divEle.onclick = function(){
    window.alert(`123123123`);
}  //缺点，，无法在一个标签上添加多个事件，会覆盖

`删除事件`
divEle.onclick=``;

DOM2

添加事件监听器

书写格式：元素节点.addEventLinstener(“事件类型”，事件处理函数，Boolean)

let divEle = document,querySelector("div");
divEle.addEventListener("click",function() {
    window.alert(`123123123`);
});  //添加事件监听器 (方法) 

`参数3   T/F 默认值false
 false：冒泡（从里到外）
 true：捕获型（从外到里）`
`html:
<article>
   <section>
       <p>
       </p>
   </section>
</article>
`
let artEle = document.querySelector("article");
let secEle = document.querySelector("section");
let pEle = document.querySelector("p");
artEle.addEventListener("click",function(){
    console.log(`article`);
},false);
secEle.addEventListener("click",function(){
    console.log(`section`);
},false);
pEle.addEventListener("click",function(){
    console.log(`p`);
},false);  //p  section  article
//true true true        article section p
//true false true       article p section

`删除节点`
artEle.removeEventListener("click",事件处理函数名)

事件对象

事件处理函数的参数 （e）

function(e) e就是事件对象

e.target 触发事件的节点

e.button 用户的按键

提升兼容性 let event = e||window.event

事件代理/事件委托

多个子元素，绑定相同事件类型，公用一个时间函数

let ulEle = document.querySelector("ul");
ulEle.addEventListener("click", function (e) {
    let event = e|| window.event;
    console.log(event.target.nodeName );
    if (event.target.nodeName == "LI") {
        event.target.classList.toggle("box");
        console.log(event.target);
    } else if (event.target.localName == "p") {
        event.target.classList.toggle("box1");
        console.log(event.target);

    }
});