冒泡和捕获、事件委托、操作类名

• 数据优先 ，数据驱动

• 冒泡和捕获

  • 冒泡 ，由小到大来触发 默认是false

  • 捕获，由大到小来触发 需要加true

  • addEventListener第三个参数 默认是false

// addEventListener：第三个参数 ，默认是false ：冒泡。true： 捕获。
// 事件对象的 path来查看 事件的触发路径 
        window.addEventListener("click", function () {
            console.log("window");
        },true)

        document.addEventListener("click", function () {
            console.log("document");
        },true)
        document.documentElement.addEventListener("click", function (e) {
            console.log("html");
        },true)

        document.body.addEventListener("click", function () {
            console.log("body");
        },true)
        outerEle.addEventListener("click", function () {
            console.log("outer");
        },true)
        centerEle.addEventListener("click", function () {
            console.log("center");
        },true)
        innerEle.addEventListener("click", function (e) {
            var event = e || window.event;

            // console.log("inner",event.path);
        },true)

-   阻止事件的传播

    -   1.阻止事件的事件e.stopPropagation()
    -   2.阻止冒泡 e.cancelBubble = true

-   阻止默认事件的执行

    -   e.preventDefault(); e.returnValue= false
    -   return false : 一定要放在最后
    -   e.preventDefault? e.preventDefault(): e.returnValue = false;  //兼容性处理

• 事件委托 ： 把事件委托给父级

  • 事件触发的对象

    • e.target
    • e.srcElement

  • 判断target 的特性 ：触发父级事件

  • 优先： 1. 性能会更好 2. 动态修改子元素，不会受到影响

• 操作类名

  var boxEle = document.querySelector(".box");
  var btn = document.querySelector("button");
  btn.onclick = function(){
        // boxEle.className += " active";
            
        // boxEle.classList.add('active'); //添加一个类名 ,追加类名
        // boxEle.classList.remove("active");  //移除一个类名
            
        //    var res =  boxEle.classList.contains("actives");
        //    console.log(res);

        }