HTML事件默认行为与事件传播
2016-05-25 21:48
447 查看
html事件的默认行为与事件传播
一. 在HTML中,基本上所有的事件都有一个默认行为.
默认事件的执行时间?是在自定义的代码之前还是之后??1. 一些事件的默认行为
Submit按钮: 在form表单中的,提交form表单中的数据到服务器Button: 在PC中不做任何事情, 在手机浏览器中, 若是在form中,则是submit
a标签: 默认将当前页面跳转为a标签中href的地址
2. 阻止事件的默认行为
通过event.preventDefaut();来阻止默认行为如:var evt = evt || window.event; //获取event对象 if (evt.preventDefault) { evt.preventDefault(); } else { evt.returnValue = false; //在早期的IE版本中 }
二.事件传播[事件冒泡模型 / 事件捕获模型]
事件冒泡(早期浏览器支持,DOM0)
在早期的浏览器, 对于事件的处理主要采用了事件冒泡模型, 也就是:当在触发元素(如:button)的事件(onclick)时候, 事件(onclick)会随着元素向父级元素(各个父节点)冒泡穿过整个DOM层次,依次触发事件(onclick),事件会从最内层的元素开始发生,一直向上传播,直到document对象。因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是p -> div -> body -> html -> document
事件捕获模型,在后期(DOM2规范,W3C规范中)
当点击元素(button)触发事件(click)的时候, 事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获.与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。
上面的例子在事件捕获的概念下发生click事件的顺序应该是document -> html -> body -> div -> p
DOM2级事件可原则采用何种方式触发事件(冒泡模型或者捕获模型)
“DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段,而作为开发者,我们可以选择事件处理函数在哪一个阶段被调用。addEventListener方法用来为一个特定的元素绑定一个事件处理函数,是JavaScript中的常用方法。addEventListener有三个参数:
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件,第二个参数是触发事件后要执行的函数。而第三个参数默认值是false,表示在事件冒泡的阶段调用事件处理函数,如果参数为true,则表示在事件捕获阶段调用处理函数。请看例子。
function stopEvent (evt) { var evt = evt || window.event; if (evt.stopPropagation) { evt.stopPropagation(); } else { evt.cancelBubble = true; } }
相关文章推荐
- html图片和文字的细节
- 轻量web服务器开发日记04-buffile结构体的实现
- html基础
- html 图像映射
- XHTML标签的嵌套规则分析
- HTML获取触发事件的元素id
- [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法
- html滚动字幕代码(咋个办呢 zgbn )
- html_博客博主
- 如何选择Html.RenderPartial和Html.RenderAction
- html中路径问题
- 给html超链接设置事件不使用href来完成跳
- HTml传递参数
- HTML2
- sikuli自动化测试html报告输出
- HTML::Parser
- html 和 body详解
- 黄聪:wkhtmltopdf解决分页问题
- HTML学习笔记(2) - HTML基础
- HTML学习笔记(1) - HTML简介