zoukankan      html  css  js  c++  java
  • JavaScript事件对象与事件的委托

    事件对象

    包含事件相关的信息,如鼠标、时间、触发的DOM对象等

     js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下:

    document.getElementsByTagName("div")[0].onclick = function(e){
      e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上)
      console.log(e);//这里e就是事件对象
    }

     事件的属性和方法

    type:获取事件类型(click、mouseover等等)

    target:获取发生的所在元素(在低版本IE下用srcElement属性

    stopPropagation() 阻止事件冒泡(IE用cancelBubble属性为false阻止冒泡)

    preventDefault() 阻止事件默认行为(IE用returnValue属性为false阻止默认行为)

    事件委托

    利用target属性,获取时间发生的所在对象,避免全体子元素加事件,对比如下: 

    var tbs=document.getElementsByTagName("td");
        for(var i=0;i<tbs.length;i++){//循环给每个子元素添加事件
            tbs[i].onclick=function(){
                this.style.background="red";
            }
        }
    document.getElementsByTagName("table")[0].onclick=function(e){
            e.target.style.background="red";//只绑定父元素事件,用target获取子元素
        }

     

  • 相关阅读:
    ABP 异常
    Vmware中安装的Ubuntu不能全屏问题解决
    centos7.4 文件权限
    webpack 入门(1)
    webpack(2) 概念
    centos7.4 rpm命令
    centos7.4 which、whereis、locate的使用
    centos7.4 find命令
    centos7.4 lsof用法
    centos7.4 用户和组的管理
  • 原文地址:https://www.cnblogs.com/gulei/p/5594081.html
Copyright © 2011-2022 走看看