事件绑定方式

   document.querySelector方法是通过选择器选择一个元素
    document.querySelectorAll方法是通过选择器选择一组元素

    DOM0级 只能绑定到冒泡阶段
    box1.onclick = function(e) {
       console.log("box1 冒泡", this.id, e, window.event);
     }
 box2.onclick = function() {
        console.log("box2 冒泡");
    }
     box3.onclick = function() {
         console.log("box3 冒泡")
   }

     DOM0级只能绑定一个函数
     box1.onclick = function() {
         console.log(1)
     }
     box1.onclick = function() {
         console.log(2)
     }


     DOM2级 可以往捕获和冒泡阶段添加事件处理函数
     box1.addEventListener("click", function(e) {
       console.log("box1 捕获", this, e)
    }, true)
    
     box3.addEventListener("click", function() {
        console.log("box3 捕获")
    }, true)



     box1.addEventListener("click", function() {
        console.log("box1 冒泡")
     }, false)
     box2.addEventListener("click", function() {
         console.log("box2 冒泡")
    }, false)
     box3.addEventListener("click", function() {
        console.log("box3 冒泡")
    }, false)
     box2.addEventListener("click", function() {
         console.log("box2 捕获")
     }, true)
   
      DOM2级可以绑定多个事件处理函数 当DOM0与DOM2同时绑定时,按照绑定顺序执行函数
     box1.addEventListener("click", function() {
         console.log("box1 冒泡2")
     })
     box1.onclick = function() {
         console.log("box1 冒泡1")
     }
     box1.addEventListener("click", function() {
         console.log("box1 冒泡3")
     })

    

     IE中的事件绑定方式
     IE中分DOM0和IE高级事件绑定方式
     box1.onclick = function() {
         console.log('box1')
     }

    // 高级绑定方式叫做 attachEvent() 第一个参数表示事件类型 带on 第二个参数是事件处理函数
    box2.onclick = function() {
       console.log("box2 冒泡4 dom0")
     }
    box1.attachEvent("onclick", function(e) {
        console.log("box1 冒泡1", this, e)
    })
     box1.attachEvent("onclick", function() {
         console.log("box1 冒泡2")
     })
     box1.attachEvent("onclick", function() {
         console.log("box1 冒泡3")
    })
     box2.attachEvent("onclick", function() {
         console.log("box2 冒泡1")
     })
     box2.attachEvent("onclick", function() {
         console.log("box2 冒泡2")
   })
     box2.attachEvent("onclick", function() {
         console.log("box2 冒泡3")
     })
  
    // 总结:DOM0不论什么浏览器,事件函数中的this指向的是绑定事件的元素 DOM2级 也是绑定事件的元素  IE中的高级绑定方式 函数中的this是window

    // 总结:DOM0级事件绑定方式中,高级浏览器会传递事件对象。 IE浏览器DOM0级,浏览器不会传递事件对象。DOM2级事件绑定方式,传递了事件对象。 IE中的高级绑定方式,也传递了事件对象。
发布了10 篇原创文章 · 获赞 0 · 访问量 89
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览