标签：
一、
1.如果body里面什么都不放，则给body加点击事件，发现并不能alert相应的东西。因为在body里面不放东西的时候body是根本没有被撑起来的，当我放了一个按钮进去，则body就被撑了起来，只有按钮那么高。点击除了按钮那一块之外的地方也是不行的。但是如果给document加点击事件就是可以的。
2.document的第一个子节点才是html。第0 个子节点视频里面讲的是！<!DOCTYPE html>但是我自己试验是undefined
<document>就像一个隐藏的节点，他包括了<!DOCTYPE html> 和<html>甚至包含了文档头的说明。
3.如果要给整个页面加事件，就要给document加，因为给body加可能撑不开。
二、事件对象
event.clientX event.clientY 在火狐下根本不认，根本没有反应。控制台报错，event没有定义。
在低版本的chrome下也不认。所以这个一般就是认为是ie下的写法。
在火狐下，要传个参数，这个参数是系统传的。
解决方法是 document.onclick = function(ev){
var oEvent = ev||event;
alert(oEvent.clientX+‘,‘);};这个地方如果ev和event的顺序换一下就会在火狐下就会报event undefined的错误。同样的道理在用if来解决兼容性的问题的时候也是这样，必须把ev放在前面。
三、事件流
1.事件冒泡
<!DOCTYPE html> <html onclick="alert(‘woshihtml‘);"> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ padding: 10px; } </style> </head> <body onclick="alert(‘woshi body‘);"> <div style="background:yellow;" onclick="alert(this.style.background);"> <div style="background: blue" onclick="alert(this.style.background);"> <div style="background: red" onclick="alert(this.style.background);"></div> </div> </div> </body> </html>
点击最里面的div他会一级一级的往上传，到body再到html最后到document。
事件冒泡在一些情况下会带来一些麻烦。比如下面的例子中，就是用了一个事件的cancelBubble来阻止事件冒泡。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background: red; display: none; } </style> <script> window.onload = function () { var oBtn = document.getElementsByTagName(‘input‘)[0]; var oDiv = document.getElementsByTagName(‘div‘)[0]; oBtn.onclick = function (ev) { oDiv.style.display =‘block‘; var oEvent = ev||event; oEvent.cancelBubble= true; }; document.onclick = function (){ oDiv.style.display=‘none‘; } }; </script> </head> <body> <input type="button" value="xianshi"/> <div></div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/zhuni/p/4782056.html
