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)
  • 相关阅读:
    python 网络编程 socket模块中的常用方法
    python 网络编程 主要是黏包 三种解决方案
    python 网络编程 tcp/dcp 通信 和 时间同步机制
    python 网络编程 计算机部分基础 和初识tcp和udp
    python 包和模块
    python 包和模块 有固定的包格式自己注意
    Jquery常用的一些事件 keyup focus
    常规的页面布局
    校验输入正整数
    遍历input文本框
  • 原文地址:https://www.cnblogs.com/SYJ1205/p/12002010.html
Copyright © 2011-2022 走看看