var commontop = document.getElementById("commontop");
commontop.onclick = function(ev){
   var ev = ev || window.event;
   var target = ev.target || ev.srcElement;
   if(target.className.toLowerCase() == "h5navbox"){
      if(h5navcontent.style.display==='block'){
         h5navcontent.style.display = "none";
      }else{
         h5navcontent.style.display = "block";
      }
  }
};

target.className 目标元素的className;

类似jquery中的 commontop.on("click",".h5navbox",function(){...})

原生js事件委托的更多相关文章

  1. 原生js事件委托（事件代理）方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  2. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  3. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  4. JS事件委托学习（转）

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  5. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

  6. 移动终端学习2：触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  7. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  8. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

  9. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

随机推荐

  1. 使用PHPExcel导出文件

    使用PHPExcel导出文件步骤及解析: 新建一个excel表格:实例化PHPExcel类 创建sheet(内置表):createSheet()方法,创建新的sheet方法 setActiveShee ...

  2. 【JavaScript】之【Object】

    见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. 2016 2 - 23 arc中的所有权修饰符（_strong修饰符与_weak修饰符）

    一 _strong修饰符 1._strong修饰符是id类型和对象类型默认的所有权修饰符.如下: id obj = [[NSObject alloc] init];//在没用明确变量所有权修饰符时,会 ...

  4. 对于undefined和null，还有处理这一类的数组

    var total=0; var data=new Array(5);//定义了data数组,length为5,但是都是元素都是undefined. for(i=0;i<data.length; ...

  5. PHPSTORM模板变量注释

    类似于这种注释,方便使用. 有两种方式一种是生成PHP文件时,自动生成,一种是手动生成. 第一种:自动生成 一图解释所有.这么配置就OK了. 这种方法还有一种就是,在包括里边编写,直接引用,先写PHP ...

  6. UE4 VR GUI实现 参考(UMG AND VR)

    Note:4.13以后版本VR UI采用 WidgetComponent + WidgetInteractionComponent可轻松实现交互 Blueprint Demo: https://for ...

  7. datatables ajax后端请求那些坑

    在对datatables做后端数据填充的时候,遇到一个,翻页问题.在多次操作翻页后,总是提示加载中.反了很多博客没有找到原因. 经过测试,发现原来自己坑了自己. 代码如下: datatables : ...

  8. 关于npm

    转载自AlloyTeam:http://www.alloyteam.com/2016/03/master-npm/ 这是我学npm觉得最好的一篇文章啦-大家一起学起来吧 npm本来是Node.js的包 ...

  9. 十个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...

  10. WAMPserver配置（允许外部访问、phpmyadmin设置为输入用户名密码才可登录等）

    对于很多不熟悉PHP环境安装的朋友来说,用集成环境可以更快的上手,更方便的搭建PHP的运行环境,但是,WAMP的集成环境仅仅是将底层基础工作做好 了,有些个别关键的配置操作并没有集成到环境安装中,所以 ...