【学习拾遗】JavaScript——Dom0模型和Dom2模型

　　对最近做的项目做个总结，结果发现自己的JS好弱！调侃一下，基本除了alert（）其它什么也不会了，当然封装的框架（EasyUI等还是会使的）除外。知耻而后勇，抽了三天的时间重新学习了一下JavaScript和Jquery，虽不能说收获满满的，但是分享的东西还是有的，这篇先说Dom0模型。

为什么会说Dom0模型？因为它有问题！！！这里的问题是是相对的——可能不是我们想要的效果！

一）问题：冒泡机制：

　　在循环绑定事件的时候，子元素绑定事件，父元素也会响应对应的事件;

$(function(){
		var all=$("*");	//获取页面所有元素，然后对每个元素绑定一个click事件	
		all.each(function(){
			var rel=this;
			this.οnclick=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].οnclick=function(){
		print("abc")
	}
	$("#child")[0].οnclick=function(){
		print("bcd")
	}
	$("#child")[0].οnclick=function(){
		print("eft")
	}
	$("#child")[0].οnclick=function(){
		print("gdg")
	}
				
	
	function print(text){
		$("#content").append(text)
	}
})

三）、事件捕获

　　在循环绑定的事件的时候，点击子元素，可以认为是先点击了最外层的父元素，然后是次级父元素，最后点击到了子元素，这就是事件捕获！但是DOM0不支持事件捕获！

四）、解决方法：

　　ａ）、事件冒泡，通过event.stopPropagation()的方法来阻止事件冒泡的发生！当然，任性的IE是通过window.event.cancelBubble = true;来阻止冒泡的

　　ｂ）、事件覆盖，这个通过Jquery可以解决，但是其实质，还是一个闭包问题，后面说。

　　ｃ）、事件捕获，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++太牛了，简直就是文本编辑界的火狐！有兴趣的可以深入体验一下)