利用事件的冒泡特性,为子标签添加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事件,从而节约内存

  

时间: 2024-10-11 03:35:28

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

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

$('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){            var e=e||window.event;            var obj=e.target||e.srcElement;            $('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').find('i').removeClass("Selectma

a 标签添加 onclick 事件

<a href="javascript:void(0);" οnclick="js_method()">点击</a> 原文地址:https://www.cnblogs.com/GetcharZp/p/11811804.html

A标签触发onclick事件而不跳转的多种解决方法

A标签触发onclick事件而不跳转的多种解决方法 一个标签仅仅是要触发onclick行为,遇到了A标签触发onclick事件时不执行跳转: 在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为: 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果. 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除.因此我们经常会用链接<a></a>形式代替<button> 触发onclick事件. <

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

先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在中国有很大的使用人群.既然是中国人自己埋下的坑,咬着牙也要走下去. a标签的onclick事件 在开发现在这个平台时,用的是国产dwz开源前端框架,还是挺好用的,对IE的兼容性做的也比较好,很少发现有啥大问题. 只是如开头标题所示,页面弹出提醒框时,[确定]按钮点不了,导致页面相当于死机一样,只能重

给网页中的元素添加onclick事件(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>给网页中的元素添加onclick事件</p></title> <script src="jquery-1.7.1

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

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来. <!DOCTYPE html> <html lang=&qu

在IE浏览器下, 使用jQuery为A标签添加单击事件

ssp项目整体都是在chrome浏览器下调试的, 没有任何问题,然而,在IE上调试出现了问题.点击tab页签,弹出了一个新的浏览器页面.如下图 点击基础信息,广告监测,广告投放三个tab页,在它们之间来回切换.这是我要达到的效果.在chrome上如愿以偿,然而在IE上,去意外的弹出了一个新的页面.虽然tab页间的切换效果也实现了.但这样,给客户的体验不好, 本显然就是个bug. 找了半天,原来是jquery的click事件在捣鬼.我在页面上写了一个简单的jquery单击事件. 页面有一个a标签,

a标签触发onclick事件而不跳转href指定路径

在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为: 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果. 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除.因此我们经常会用链接<a></a>形式代替<button> 触发onclick事件. 代码如下: <script type="text/javascript">function del(){if(con

HTML中在a标签中添加onclick事件

1.链接的onclick 事件被先执行,其次是href属性下的动作; 2.假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,onclick 必须得到一个false的返回值; 3.如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作.应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动; 4.如果在链接的 href属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替; 在Jav