javascript---33--event对象事件监听

event对象冒泡与捕获

<style>
    *{
        padding: 0;
        margin: 0;
    }
      .box{
          width: 100px;
          height: 100px;
          background-color: #f66;
      }

  </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var oBox =document.getElementsByClassName("box")[0];
    oBox.abc =function(){
        alert("自定义属性");
    }
    oBox.abc();//这样就会自执行 弹出“自定义属性”
    oBox.onclick=function () {
        alert("点击事件");
    }
</script>

DOM 0级

onclick 被认为是元素的属性方法

oBox.onclick=function () {
    console.log(this);    
    }

此时打印的是节点

模拟默认点击事件

 oBox.onclick=function (a) {
       console.log(a);
    }

默认为MouseEvent {isTrusted: true, screenX: 89, screenY: 101, clientX: 89, clientY: 35, …}event 事件对象默认传参给函数的第一个参数保存了触发事件的参数：事件类型ele.type 鼠标位置节点

oBox.abc =function(a){
       console.log(a)
    }

这样显示undefined 没有event事件对象

oBox.onclick=function (a) {
       console.log(a);
    }
    oBox.click();

就会触发事件函数 MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0, …}

ie8不传event参数兼容写法

oBox.onclick=function (event) {
        event =event||window.event;//IE低版本浏览器会默认挂载到window下的event属性里   这是一个全局对象
       console.log(event);
    }
    oBox.click();

DOM二级事件

 oBox.onclick=function (event) {
        event =event ||window.event;//IE低版本浏览器会默认挂载到window下的event属性里   这是一个全局对象
       console.log("你好");
    }
    oBox.onclick=function (event) {
        event =event ||window.event;//IE低版本浏览器会默认挂载到window下的event属性里   这是一个全局对象
        console.log("不好");
    }

这样后面的事件会覆盖前面的点击事件

主流浏览器 addEventListener()

第一个参数事件类型：click
第二个参数事件函数:
第三个参数是否捕获

var oBox =document.getElementsByClassName("box")[0];
   oBox.addEventListener("click",function (e) {
        console.log("1",this)
   },false);
    oBox.addEventListener("click",function (e) {
        console.log("2",this)
    },false);

这样可以同时触发两个事件

removeEventListener()

第一个参数事件类型：click
第二个参数事件函数:
第三个参数是否捕获 true 使用捕获 false 使用冒泡

var oBox =document.getElementsByClassName("box")[0];
    var fn1 =function (e) {
        console.log("1",this)
    };
   oBox.addEventListener("click",fn1,false);
    document.ondblclick = function(){
        console.log("取消");
        oBox.removeEventListener("click",fn1,false)
    }

会注销事件双击等于两次单击所以会出现单击事件但是双击之后事件注销

 var oBox =document.getElementsByClassName("box")[0];
    var fn1 =function (e) {
        console.log("1",this);
        this.removeEventListener("click",fn1,false);
    };
   oBox.addEventListener("click",fn1,false);

只能点击一次

注册事件传的参数要和注销事件传的参数一一对应

 var oBox =document.getElementsByClassName("box")[0];
    var fn1 =function (e) {
        console.log("1",this);
        this.removeEventListener("click",fn1,true);
    };
   oBox.addEventListener("click",fn1,false);

这样就不会注销单击事件了

捕获和冒泡的区别

冒泡从底层一层一层往上冒

var oBox =document.getElementsByClassName("box")[0];
    var capture =false;
    document.addEventListener("click",function () {
        console.log("document点击");
    },capture);
    document.body.addEventListener("click",function () {
        console.log("body点击");
    },capture);
   oBox.addEventListener("click",function () {
       console.log("box点击");
   },capture);

触发顺序 box点击 body点击 document点击

捕获从最顶层开始触发到底层然后回到顶层

 var oBox =document.getElementsByClassName("box")[0];
    var capture =true;
    document.addEventListener("click",function () {
        console.log("document点击");
    },capture);
    document.body.addEventListener("click",function () {
        console.log("body点击");
    },capture);
   oBox.addEventListener("click",function () {
       console.log("box点击");
   },capture);

document点击 body点击 box点击

只想box触发停止冒泡

var oBox =document.getElementsByClassName("box")[0];
    var capture =false;
    document.addEventListener("click",function () {
        console.log("document点击");
    },capture);
    document.body.addEventListener("click",function () {
        console.log("body点击");
    },capture);
   oBox.addEventListener("click",function (e) {
       e.stopPropagation();
       console.log("box点击");
   },capture);

这样只会打印box点击

捕获取消事件的传递

 var oBox =document.getElementsByClassName("box")[0];
    var capture =true;
    document.addEventListener("click",function () {
        console.log("document点击");
    },capture);
    document.body.addEventListener("click",function (e) {
        e.stopPropagation();
        console.log("body点击");
    },capture);
   oBox.addEventListener("click",function (e) {

       console.log("box点击");
   },capture);

这样点击box 打印的是document点击 body点击

IE 浏览器默认为冒泡

attachEvent()

第一个参数事件类型：onclick
第二个参数事件函数

oBox.attachEvent("onclick",function () {
        console.log(this);
    });

this指向window

取消事件detachEvent()

var fn1 =function(){
        console.log(1);
    }
    oBox.attachEvent("onclick",fn1);
    document.ondblclick =function () {
        oBox.detachEvent("onclick",fn1);
    }

双击事件等于两次单击事件怎么解决双击时不触发单击

document.onclick =function(){
        timer =setTimeout(function () {
            console.log("单击");
        },300);
    }
    document.ondblclick =function () {
        console.log("双击");
        clearTimeout(timer);
    }

但是不推荐

取消冒泡

var fn1 =function(e){
        e =e||window.event;
        e.cancelBubble =true;
        console.log(1);
    }
    oBox.attachEvent("onclick",fn1);
    var timer;
    document.onclick =function(){
        timer =setTimeout(function () {
            console.log("单击");
        },300);
    }

监听事件兼容方法初级版

eventBind(box,"click",function (event) {
        console.log("box点击");
        eventBind(this,"click",false);
    },false);
    /*ele 元素节点
    * event事件类型
    * Handel 处理事件函数
    * capture 是否为捕获
    * */
    function eventBind(ele,event,handle,capture) {
        //包装函数做处理  用于取消函数和this指向问题
        ele["event"+event] = handle;

        //先判断浏览器是否为主流浏览器
        if (ele.addEventListener){
            ele.addEventListener(event,ele["event"+event],capture);
        }else if (ele.attachEvent){
            ele["event"+event] =function(){
                handle.call(ele,window.event)
            };
            ele.attachEvent("on"+event,ele["event"+event]);
        }
    }
    //注销事件
    function eventUnbind(ele,event,capture) {
        if (ele.removeEventListener){
            ele.removeEventListener(event,ele["event"+event],capture);
        }else if (ele.detachEvent){
            ele.detachEvent("on"+event,ele["event"+event]);
        }
    }
</script>

javascript---33--event对象事件监听

event对象 冒泡与捕获

DOM二级事件

捕获和冒泡的区别

IE 浏览器 默认为冒泡

监听事件兼容方法初级版

猜你喜欢

event对象冒泡与捕获

IE 浏览器默认为冒泡