利用事件的冒泡特性，为子标签添加Onclick事件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
var list = document.getElementById("myLinks");
list.onclick = function (event) {
var target = event.target;
switch (target.id) {
case "doSomething":
document.title = "I change the document's title";
break;
case "goSomewhere":
location.href = "http://baidu.com";
break;
case "sayHi":
alert("hi");
break;
}
}
} </script>
</head>
<body>
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
</body>
</html> 这样的好处是，不需要为3个li 增加Onclick事件，从而节约内存
利用事件的冒泡特性，为子标签添加Onclick事件的更多相关文章
- a 标签添加 onclick 事件
a 标签添加 onclick 事件 <a href="javascript:void(0);" οnclick="js_method()">点击&l ...
- js实现冒泡事件，点击ul给子标签添加相同事件和阻止冒泡事件
$('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){ var e=e||windo ...
- 【Javascript】IE8兼容 背景图片与a标签的onclick事件
先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在 ...
- jq动态添加onclick事件在谷歌中不起作用
$("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...
- 解决IE6下a标签的onclick事件里的超链接不跳转问题
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- 关于Asp.net事件，如何在触发子控件的事件时，同步触发父页面的事件
对页面引用自定义控件后,通过绑定自定义事件,页面绑定子控件的事件,在子控件做了某些修改动作后,如何同步操作父页面的方法:下面我煮了个栗子,同学们可以来尝一尝试一试 a.aspx 引用 UserCont ...
- WEB前端问题——img标签的onclick事件无法响应问题【转载】
一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...
- 使用JavaScript动态的绑定、解绑 a 标签的onclick事件，防止重复点击
页面上的 a 标签如下: <a class="more" style="cursor: pointer;" id="commentMore&qu ...
随机推荐
- Nginx平滑升级的详细操作方法
转至:https://blog.csdn.net/midion9/article/details/49684325 一.平滑升级概述Nginx方便地帮助我们实现了平滑升级.其原理简单概括,就是:(1) ...
- 小程序根据ID跳转到不同的分页
想实现效果: 点击后跳转 wxml: <view class="fiveson"> <view class="fiveson-son&q ...
- LeetCode-079-单词搜索
单词搜索 题目描述:给定一个 m x n 二维字符网格 board 和一个字符串单词 word .如果 word 存在于网格中,返回 true :否则,返回 false . 单词必须按照字母顺序,通过 ...
- 一台电脑设置多个网段的IP地址
- java后端工程师学习路线
根据自己的经历和见识梳理了一份java后端工程师的学习路线(不含安卓方向),难免有局限性和疏漏,请在评论区反馈意见和建议! 很明显的是我的学习路线过于庞大了[尴尬],你可以认为这些只是我的一家之言,具 ...
- laravel 框架资源路由
- typora 使用Markdown语法编辑文本
MarkDown语法 标题 一级标题# 二级标题## ============= 三级标题### 四级标题 依此类推 Markdown 段落格式 Markdown 段落没有特殊的格式,直接编写文字,段 ...
- 七天接手react项目 —— state&事件处理&ref
state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...
- Java数组（Array）和列表（ArryList）有什么区别？
Array和ArryList的不同点 Array可以包含基本类型和对象类型,ArrayList只能包含对象类型 Array大小是固定的,ArrayList的大小动态变化的 ArrayList提供了更多 ...
- Seata XA 模式示例分析
@ 目录 1 下载示例 2 示例结构 3 业务服务 business-xa 3.1 模块结构 3.2 Controller 层 3.3 Service 层 3.4 stock Feign 客户端 3. ...