由表及里,对象逐层响应【冒泡】——JS总结
2015-05-31 19:58
696 查看
由表及里,对象逐层响应【冒泡】——JS总结
HTML文本:
从上层到最底层,对象逐层响应【冒泡】
对于标签的逐层响应事件,不需要用的时候,需要将其阻止。
HTML文本:
<html> <head> //JS、CSS的引用(略) </head> <body> <div id="box"> <input type="button" name="btn" value="提交" /> </div> <body/> </html>
从上层到最底层,对象逐层响应【冒泡】
window.onload = function () { document.onclick = function () { alert('第五层,也即最底层——document'); }; document.documentElement.onclick = function () { alert('第四层,也即倒数第二层——html'); }; document.body.onclick = function () { alert('第三层——body'); }; document.getElementById('box').onclick = function () { alert('第二层——div'); }; document.getElementsByTagName('input')[0].onclick = function () { alert('第一层,也即最表层——input'); }; //停止冒泡,(示例:在input层阻止冒泡) //document.getElementsByTagName('input')[0].onclick = function (evt) { //alert('最表层——input'); //var e = evt || window.event; //取消冒泡 //方法(1) e.stopPropagation(); //W3C取消冒泡 //方法(2) e.cancelBubble = true; //IE取消冒泡 //}; }如上程序,未注释部分的代码,运行结果会弹5次框,因为其逐层响应事件的触发。
对于标签的逐层响应事件,不需要用的时候,需要将其阻止。
相关文章推荐
- JS事件总结
- DOM节点——JS总结
- JavaScript基于原型的继承
- js-定时任务setInterval,setTimeout,clearInterval,clearTimeout
- javascript && 和 || 最清晰的描述
- [LeetCode][JavaScript]ZigZag Conversion
- Json-转换
- Js-字符转换数字
- ExtJs4.2示例中infinite-scroll出现PageMap asked for range which it does not have错误及解决
- [LeetCode][JavaScript]Longest Consecutive Sequence
- JavaScript继承
- Express框架中如何引用ejs模板引擎
- JS获取当前对象大小以及屏幕分辨率等
- JavaScript学习8:DOM进阶
- JS正则表达式详解 转
- ios  与 js 交互 stringByEvaluatingJavaScriptFromString的使用方法
- javascript 和oc交互
- JavaScript模拟alert弹出框
- js正则表达式总结
- <深入理解JavaScript>学习笔记(3)_全面解析Module模式