dom 冒泡事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#div1{
    height:200px;
    width:100px;
    border:1px #999999 solid;
    display:none;
    }
</style>
<title>无标题文档</title>
<script type="text/javascript">
    window.onload = function ()
    {
        var obtn = document.getElementById(‘btn‘);
        var odiv = document.getElementById(‘div1‘);

        obtn.onclick = function (ev)
        {
            var ev = ev || event;
            ev.cancelBubble = true;
            odiv.style.display = ‘block‘;
        }

        document.onclick = function ()
        {
            odiv.style.display = ‘none‘;
        }
    };
</script>
</head>

<body>
<input type="button" id="btn" value="确认">
<div id="div1"></div>
<p>1111111111</p>
</body>
</html>
时间: 2024-08-07 07:43:27

dom 冒泡事件的相关文章

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

dom捕捉事件和冒泡事件-原理与demo测试

先插入一条广告,博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: http://shop117066935.taobao.com/ 马上开始正题... 先参考一下百度百科对冒泡事件流的解释: ----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了! http://baike.baidu.com/link?url=kaeJHTii_1uVgxD

点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了.然后判断状

冒泡事件

刚开始的时候,不知道什么是冒泡事件?感觉程序中的应用不会很多,也感觉特别不好理解,没接触到代码是这样理解的:冒泡事件就是触发一个事件,它会相应的一级一级向外冒泡,触发相应的冒泡事件. 一次,查找bug时才有所了解.bug的现象是:某个浏览器中,当"回车"时,页面会报出500的错误,而其他浏览器则不会出现这样的问题.刚开始以为是浏览器兼容的问题,一直向这个方向找错,但是最后师父给看了一下,原来不是浏览器兼容,是冒泡事件. 因为错误是抛到页面上的,说明页面跳转了,不是ajax的异步请求,敲

Js 冒泡事件阻止

原文:Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:$(document).ready(function

JS 阻止浏览器默认行为和冒泡事件

JS 冒泡事件 首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情

jacascript DOM变动事件

DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用 DOM2 级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛: 删除节点变动 删除节点时,涉及到 DOMNodeRemoved.DOMNodeRemovedFromDocument 和 DOMSubtreeModified 这三个事件:事件触发的先后顺序是 DOMNodeRemoved 事件.DOMNodeRemovedFromDocument 事件和 DOMSub

JS冒泡事件节点

1.事件冒泡:      事件冒泡是从里到外的,它是沿着DOM层次向上冒泡,直达顶部,HTML元素也可以接受冒泡事件.       2.事件捕获:      事件捕获是从外面到里面的,它是从DOM层次的顶部下降到底部,事件捕获也可以window级的事件,但是需要显示指定      3.DOM事件流:      DOM同时支持事件捕获和事件冒泡,但是事件捕获优先发生,两个事件流可以遍历DOM中的所有对象,起点和结束点为document对象.      另外DOM事件模型中的一个特色是(文本节点也可

Atitit. &#160;Js 冒泡事件阻止&#160;事件捕获&#160;&#160;&#160;事件传递 &#160;事件代理

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 4. 事件代理3 5. 冒泡还是捕获?3 6. Js 冒泡事件阻止3 6.1. 返回false5 7. 事件冒泡 使处理函数有范围较大的触发面积,在“拖拽效果”脚本中是必须的5 8. refe6 8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6   1. 事