zoukankan      html  css  js  c++  java
  • 事件的绑定方式

    一.赋值式(DOM0级事件绑定):ele.事件类型=function(){}

      不能重复绑定

    var obox = document.querySelector(".box")
    obox.onclick = function(){
        console.log(1)
    }
    obox.onclick = function(){
        console.log(2)
    }
    上式结果得到  2    ,  覆盖效果
    删除事件
    obox.onclick.null;  得到 空

    二.监听式(DOM2级事件绑定)

      特定的方法实现:ele.addEventListener

    能重复绑定

    obox.addEventListener("click",function(){
        console.log("hello")      //hello
    },false)
    obox.addEventListener("click",function(){
        console.log("world")     //world
    },false)
    
    能全部打印出来
    删除事件监听:
    obox.removeEventListener(type,fn,false) obox.removeElementListener("click",fn1,false) obox.removeElementListener("click",fn1,false) 以下是IE浏览器的支持 绑定:obox.attachEvent(type,fn)
    ele前加 ”on“ console.log(box,attachEvent) obox.attachEvent("onclick",fn1) function fn1(){ console.log("hhaha") } obox.attachEvent("onclick",fn2) function fn2(){ console.log("heihhh") } 删除: obox.detachEvent("onclick",fn1) 兼容 function addEvent(ele,type,cb){ if(ele.attachEvent){ ele.attachEvent("on"+type,cb) }else{ ele.addEventListener(type,cb,false) } } function removeEvent(ele,type,cb){ if(ele.detachEvent){ ele.detachEvent("on"+type,cb) }else{ ele.removeEventListener(type,cb,false) } }
    事件流的状态:
        事件的触发顺序
            事件冒泡:从里向外
            事件捕获:从外向里
                true:捕获
                false:冒泡
            目标阶段当前元素房前事件
    var obox = document.querySelector(".box")
        var obox1 = document.querySelector(".box1")
        var obox2 = document.querySelector(".box2")
    
    
        obox.addEventListener("click",function(){
            alert("red的冒泡")
        },false)
    
        obox.addEventListener("click",function(){
            alert("red的捕获")
        },true)
        
        obox1.addEventListener("click",function(){
            alert("green的冒泡")
        },false)
    
        obox1.addEventListener("click",function(){
            alert("green的捕获")
        },true)
    
        obox2.addEventListener("click",function(){
            alert("blue的冒泡")
        },false)
    
        obox2.addEventListener("click",function(){
            alert("blue的捕获")
        },true)
  • 相关阅读:
    P4141 消失之物(退背包模板)
    P5829 【模板】失配树
    P4827 [国家集训队] Crash 的文明世界
    P4074 [WC2013]糖果公园
    P3242 [HNOI2015]接水果
    P2371 [国家集训队]墨墨的等式
    P4819 [中山市选]杀人游戏
    P5331 [SNOI2019]通信
    BZOJ1082 [SCOI2005]栅栏
    poj1475 Pushing Boxes[双重BFS(毒瘤搜索题)]
  • 原文地址:https://www.cnblogs.com/SYJ1205/p/12002010.html
Copyright © 2011-2022 走看看