js事件冒泡

原创 2018年04月16日 00:15:09
事件冒泡:事件发生时,事件发生的元素的祖先元素也可以被触发该事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>li的内容 <span>span内容</span></li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        var li = document.getElementsByTagName('li')[0];
        var span = document.getElementsByTagName('span')[0];
        span.onclick = function () {
            console.log('触发span的点击事件!');
            /*触发span的点击事件!
            触发li的点击事件!
            触发ul的点击事件!*/
        };
        li.onclick = function () {
            console.log('触发li的点击事件!');
            /*触发li的点击事件!
             触发ul的点击事件!*/
        };
        ul.onclick = function () {
            console.log('触发ul的点击事件!');
//            触发ul的点击事件!
        }
    </script>
</body>
</html>

JS中的事件冒泡和事件捕获

谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(targe...
  • donggx
  • donggx
  • 2016年12月13日 09:06
  • 2097

解析Javascript事件冒泡机制

1.事件 2.冒泡
  • u010349169
  • u010349169
  • 2014年04月18日 12:45
  • 12583

js取消事件冒泡和阻止事件的默认行为(兼容写法)

功能:停止事件冒泡   function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation...
  • cheng0867
  • cheng0867
  • 2016年06月30日 02:12
  • 5245

JavaScript事件冒泡,事件捕获,事件处理,事件委托

早期的事件,是作为分担服务器运算负载的一种手段,实文档或者浏览器窗口中发生的一些特定的交互瞬间,如点击按钮,拖放文件等。我们可以使用侦听器来预定事件,当事件发布时候就可作出相应的响应,这种模式称为观察...
  • zhangwx6
  • zhangwx6
  • 2017年03月16日 19:22
  • 1002

浅析js事件冒泡机制

什么是js事件冒泡呢?简单来说就是事件从事件源逐级向上传递,这一机制就叫事件冒泡机制。打个比方就好像某个地方发生了一件什么大事,县长要报告给市长,市长又要报告给省长,省长最后再报告给中央,这样一级一级...
  • guxin_duyin
  • guxin_duyin
  • 2017年10月01日 10:44
  • 254

JS中的事件捕获和事件冒泡

前言 前段时间给应届生讲JS的事件,顺便讲了一下事件捕获和事件冒泡是怎么一回事儿,但是没给他具体的例子,这里添加一段列子,顺便给菜鸟们一些具体代码来看看冒泡和捕获是怎么一回事儿。 1、事件捕获 ...
  • dong123dddd
  • dong123dddd
  • 2016年02月13日 23:37
  • 3505

JS性能优化之事件冒泡

何为事件冒泡:
  • xingxing1828
  • xingxing1828
  • 2014年08月01日 13:55
  • 833

javascript冒泡事件的意义及如何阻止冒泡事件

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素。 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件...
  • u012169411
  • u012169411
  • 2013年11月18日 14:14
  • 2567

关于JS事件冒泡与JS事件代理(事件委托)

事件作为DOM操作重要的一环,需要大家好好理解和运用,今天特意看了一下事件冒泡和事件代理的相关资料,感触颇深,也深感自己的无知不知道多浪费了多少内存,废话不多说进入正题: 1.事件冒泡:   ...
  • SuperCoooooder
  • SuperCoooooder
  • 2016年08月12日 16:26
  • 3676

事件冒泡(选项卡的实现)

可以通过以下三种方法做到不同程度的阻止。  1. return false --->In event handler ,prevents default behavior and event b...
  • qq_24193261
  • qq_24193261
  • 2016年05月25日 22:54
  • 969
收藏助手
不良信息举报
您举报文章:js事件冒泡
举报原因:
原因补充:

(最多只允许输入30个字)