【学习拾遗】JavaScript——Dom0模型和Dom2模型
来源:互联网 发布:java中final是什么意思 编辑:程序博客网 时间:2024/05/16 09:00
对最近做的项目做个总结,结果发现自己的JS好弱!调侃一下,基本除了alert()其它什么也不会了,当然封装的框架(EasyUI等还是会使的)除外。知耻而后勇,抽了三天的时间重新学习了一下JavaScript和Jquery,虽不能说收获满满的,但是分享的东西还是有的,这篇先说Dom0模型。
为什么会说Dom0模型?因为它有问题!!!这里的问题是是相对的——可能不是我们想要的效果!
一)问题:冒泡机制:
在循环绑定事件的时候,子元素绑定事件,父元素也会响应对应的事件;
$(function(){var all=$("*");//获取页面所有元素,然后对每个元素绑定一个click事件all.each(function(){var rel=this;this.onclick=function(event){var event=event?event:window.event;var target=event.target?event.target:event.srcElement;print("事件源"+target.id+"---"+target.tagName+",事件对象:"+this.id+"<br>");//event.stopPropagation();//阻止冒泡机制的发生}})function print(text){$("#content").append(text)}})</script>
二、问题:事件覆盖
后面的事件或者属性会覆盖掉前面的;下面的结果是只会响应最后一次定义的函数,
$(function(){$("#child")[0].onclick=function(){print("abc")}$("#child")[0].onclick=function(){print("bcd")}$("#child")[0].onclick=function(){print("eft")}$("#child")[0].onclick=function(){print("gdg")}function print(text){$("#content").append(text)}})
三)、事件捕获
在循环绑定的事件的时候,点击子元素,可以认为是先点击了最外层的父元素,然后是次级父元素,最后点击到了子元素,这就是事件捕获!但是DOM0不支持事件捕获!
四)、解决方法:
a)、事件冒泡,通过event.stopPropagation()的方法来阻止事件冒泡的发生!当然,任性的IE是通过window.event.cancelBubble = true;来阻止冒泡的
b)、事件覆盖,这个通过Jquery可以解决,但是其实质,还是一个闭包问题,后面说。
c)、事件捕获,Dom0中没有解决,在Dom2中提出了解决方案,顺带着连事件冒泡的问题也解决了。
Dom2的事件监听器addEventListener,三个参数:响应的事件名称,响应的函数,是冒泡还是捕获,false表示事件冒泡,true表示事件捕获。
事件捕获:
<p style="margin:0in;font-family:楷体;font-size:12.0pt">$(function(){</p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">varall=$("*"); </p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">all.each(function(){</p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">varrel=this;</p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">this.addEventListener("click",function(event){</p><p style="margin:0in;margin-left:1.125in;font-family:楷体;font-size:12.0pt">varevent=event?event:window.event;</p><p style="margin:0in;margin-left:1.125in;font-family:楷体;font-size:12.0pt">vartarget=event.target?event.target:event.srcElement;</p><p style="margin:0in;margin-left:1.125in;font-family:楷体;font-size:12.0pt"><span lang="zh-CN">print("事件捕获事件源</span><span lang="en-US">"+target.id+"---"+target.tagName+",事件对象:"+this.id+"<br>");</span></p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">},<span style="color:red">true</span>)</p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">})</p><p style="margin:0in;margin-left:.375in;font-family:Calibri;font-size:10.5pt"> </p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">functionprint(text){</p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">$("#content").append(text)</p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">}</p><p style="margin:0in;font-family:楷体;font-size:12.0pt">})</p>
事件冒泡:
$(function(){var all=$("*");all.each(function(){var rel=this;this.addEventListener("click",function(event){var event=event?event:window.event;var target=event.target?event.target:event.srcElement;print("事件捕获事件源"+target.id+"---"+target.tagName+",事件对象:"+this.id+"<br>");},false)})function print(text){$("#content").append(text)}})
后话:
为什么会写这篇博客?其实,我一直以为JavaScript和Jquery一样,Jquery只不过是JavaScript的再封装,但是不全是那么回事,对于Jquery的好多问题追溯源头,还是跑到了原生Js上面,然后各种问题,然后……当然,如果单纯了说问题,不用这么大费周章,其实是为了后面的Jquery准备的!顺便说一句,(Notepad++太牛了,简直就是文本编辑界的火狐!有兴趣的可以深入体验一下)
- 【学习拾遗】JavaScript——Dom0模型和Dom2模型
- javaScript中的DOM0级和DOM2级事件
- 学习笔记——事件处理程序(HTML事件处理、DOM0、DOM2)
- DOM0级和DOM2级事件处理程序的区别? — 第13.2.2节
- JavaScript DOM0、DOM2级事件简述
- Linux 驱动模型初探4——汇总和拾遗
- dom2和dom0的定义和区别
- JavaScript基础——DOM2和DOM3
- DOM0和DOM2事件处理程序对比
- 我之见于Javascript中DOM0级处理和DOM2级处理事件的区别
- JavaScript中的事件传播(DOM2标准事件模型)
- JavaScript学习-DOM2和DOM3的变化
- DOM0, DOM1, DOM2, DOM3
- DOM0 DOM2 DOM3区别
- DOM0级事件处理和DOM2级事件处理
- js中dom0级事件和dom2级事件使用
- JavaScript-DOM2和DOM3
- CSS学习—盒模型和布局模型
- Linux下H.264码流实时RTP打包与发送
- 第三章 41题
- 安卓的生命周期
- C/C学习笔记/函数与程序结构
- Base64编解码
- 【学习拾遗】JavaScript——Dom0模型和Dom2模型
- 怎么将代码上传到github上面
- 在UIView中添加多个大小一样的框框 (小View)
- YTU 2419: C语言习题 等长字符串排序
- How to Create a First Shell Script
- Git常用命令
- 甲;乙;丙;丁四个人过桥,分别需要1,2,5,因为天黑,必须借助手电筒过桥可是总共只有一个手电筒,并且桥的载重能力有限,只能承受两个人的重量也就是说每次最多过两个人,怎样才能做到用
- H.264 RTP payload 格式
- thrift的使用介绍