浏览器事件传播
来源:互联网 发布:电脑无软件翻墙谷歌 编辑:程序博客网 时间:2024/06/05 09:23
浏览器事件传播分三个阶段:
如果想要阻止事件传播,可以用Event对象的stopPropagation方法实现:
事件传播的三个阶段完成之后可能会触发浏览器的默认动作(例如a标签的点击事件完成后浏览器会默认跳转到指定链接),如不想让浏览器执行默认动作,可以用Event对象的preventDefault方法实现:
上面两段代码都采用了jquery的特性,如果用原生方法实现如下:
- 第一阶段为捕获阶段:事件从Document对象的根节点沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件的函数,那么就会在事件传播过程中运行这些函数。
- 第二阶段发生在目标节点自身:直接注册在目标上的事件处理函数被运行。
- 第三阶段为起泡阶段:事件将从目标元素向上回传给Document对象的根节点,起泡过程中也会触发先辈相应的事件处理函数。
如果想要阻止事件传播,可以用Event对象的stopPropagation方法实现:
$("#input_obj").click(function(e){
e.stopPropagation();
});
这样input_obj的先辈的click事件就不会触发了事件传播的三个阶段完成之后可能会触发浏览器的默认动作(例如a标签的点击事件完成后浏览器会默认跳转到指定链接),如不想让浏览器执行默认动作,可以用Event对象的preventDefault方法实现:
$("#a_obj").click(function(e){
e.preventDefault();
});
这样点击a标签后就不会进行跳转了上面两段代码都采用了jquery的特性,如果用原生方法实现如下:
document.getElementById('input_obj').onclick = function(e) {
e = e || window.event;
e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
}
document.getElementById('a_obj').onclick = function(e) {
e = e || window.event;
e.preventDefault?e.preventDefault():e.returnValue = false;
}
- 浏览器事件传播
- 浏览器事件传播
- 事件传播
- 01期:web浏览器事件传播机制(捕获和冒泡)
- Spring--> ApplicationContext事件传播
- Spring的事件传播
- Event propagation事件传播
- 取消事件传播
- Android 事件传播机制
- jQuery阻止事件传播
- 阻止事件传播
- 【Spring】事件传播 ApplicationListener
- android 事件传播机制
- 细说 jQuery - 事件传播
- angularjs事件同级传播
- 事件传播和冒泡事件
- jQuery事件传播,事件流
- JS 传播事件、取消事件默认行为、阻止事件传播
- 看java设计模式感想①,谈谈自己对于接口用法的认识
- 随机生成10个数
- 数据库系统
- 黑马程序员-深入研究java.lang.Class类
- android 源码下载
- 浏览器事件传播
- w3c dom创建xml
- 数组中取十个互不相同的数
- Linux的硬链接和软链接
- 回味两部关于 Linux 的纪录片
- myeclipse 代码自动提示功能
- 分布式基础学习【一】 —— 分布式文件系统
- UTF8 and Unicode
- dede模版引擎二次开发(增加修改显示)