1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script type="text/javascript">
  7.         window.onload = function () {
  8.             var list = document.getElementById("myLinks");
  9.             list.onclick = function (event) {
  10.                 var target = event.target;
  11.                 switch (target.id) {
  12.                     case "doSomething":
  13.                         document.title = "I change the document's title";
  14.                         break;
  15.                     case "goSomewhere":
  16.                         location.href = "http://baidu.com";
  17.                         break;
  18.                     case "sayHi":
  19.                         alert("hi");
  20.                         break;
  21.                 }
  22.             }
  23.         }
  24.  
  25.     </script>
  26. </head>
  27. <body>
  28.     <ul id="myLinks">
  29.         <li id="goSomewhere">Go somewhere</li>
  30.         <li id="doSomething">Do something</li>
  31.         <li id="sayHi">Say hi</li>
  32.     </ul>
  33. </body>
  34. </html>
  35.  
  36. 这样的好处是，不需要为3个li 增加Onclick事件，从而节约内存

　　

利用事件的冒泡特性，为子标签添加Onclick事件的更多相关文章

  1. a 标签添加 onclick 事件

    a 标签添加 onclick 事件 <a href="javascript:void(0);" οnclick="js_method()">点击&l ...

  2. js实现冒泡事件，点击ul给子标签添加相同事件和阻止冒泡事件

    $('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){            var e=e||windo ...

  3. 【Javascript】IE8兼容 背景图片与a标签的onclick事件

    先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在 ...

  4. jq动态添加onclick事件在谷歌中不起作用

    $("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...

  5. 解决IE6下a标签的onclick事件里的超链接不跳转问题

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...

  6. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

  7. 关于Asp.net事件，如何在触发子控件的事件时，同步触发父页面的事件

    对页面引用自定义控件后,通过绑定自定义事件,页面绑定子控件的事件,在子控件做了某些修改动作后,如何同步操作父页面的方法:下面我煮了个栗子,同学们可以来尝一尝试一试 a.aspx 引用 UserCont ...

  8. WEB前端问题——img标签的onclick事件无法响应问题【转载】

    一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...

  9. 使用JavaScript动态的绑定、解绑 a 标签的onclick事件，防止重复点击

    页面上的 a 标签如下: <a class="more" style="cursor: pointer;" id="commentMore&qu ...

随机推荐

  1. JabRef：将bibtex格式的参考文献导入EndNote的转换软件

    我在写小论文的时候,一直用的都是Overleaf在线latex编辑应用: https://www.overleaf.com/login 这个我感觉还是蛮好用的.只需要从期刊或者出版社的官网下载到lat ...

  2. 由浅入深--MyBatis系列

    从今天开始将要开始由浅入深--MyBatis系列博客的编写; 主要目录如下: MyBatis基础知识篇 1.由浅入深---ORM简介 2.由浅入深---MyBatis的整体架构 3.由浅入深---第一 ...

  3. vue结合webpack打包问题

    在使用vue开发项目时,如果要使用其单文件组件特性,必然要使用webpack或者其他打包工具打包,这里我用到的是webpack打包,首先是搭建vue环境和webpack环境,在这里遇到的一个问题是在成 ...

  4. Mono创始人 Miguel de Icaza今天离开微软

    2016年,微软突然宣布收购移动工具开发商Xamarin,后者是位于美国加利福尼亚,据称微软收购Xamarin交易价格在4亿到5亿美元之间.因此,微软获得了著名的开源倡导者和开发人员Miguel de ...

  5. 深入Mybatis框架

    深入Mybatis框架 学习了Spring之后,我们已经了解如何将一个类作为Bean交由IoC容器管理,也就是说,现在我们可以通过更方便的方式来使用Mybatis框架,我们可以直接把SqlSessio ...

  6. VMware：用Ubuntu创建一个新的虚拟机

    1)进入VMware,选择创建新虚拟机 2)安装ISO文件 3)各种名,密码 这里有可能出错: 原因是你输入的用户名和系统用户名重复了,修改一下就可以了 4)安装位置:这里可以是任意盘,但至少要有4G ...

  7. redis数据类型的使用及介绍

    Redis数据类型 1.Sting类型 set命令 设置键值,存在则覆盖,不存在则新建 set key value EX 秒 设置有效时长为秒 nx 如果键不存在则新建,如果存在返回nil xx 只有 ...

  8. Jmeter计数器实现自增功能

    如果需要引用的数据量较大,且要求不能重复或者需要自增,那么可以使用计数器来实现 如:新增功能,要求名称不能重复 1,新增计数器 计数器:允许用户创建一个在线程组之内都可以被引用的计数器. 计数器允许用 ...

  9. 矩池云 | Tony老师解读Kaggle Twitter情感分析案例

    今天Tony老师给大家带来的案例是Kaggle上的Twitter的情感分析竞赛.在这个案例中,将使用预训练的模型BERT来完成对整个竞赛的数据分析. 导入需要的库 import numpy as np ...

  10. php使用kafka代码

    生产者 producer.php文件 <?php /** * Created by PhpStorm. * User: shiyibo * Date: 2019/2/24 * Time: 12: ...