2016年5月27日上午（妙味课堂js基础-3笔记一（事件））
一、event事件
1、什么是event事件对象？
用来获取事件的详细信息：鼠标位置、键盘按键
——例子：获取鼠标位置：clientX
——document的本质：document.childNodes[0].tagName
（1）首先对于点击事件，如果我们想要在页面打开后，在页面的任何一个地方点击都会弹出来一个框，那我们应该怎么做呢？
<script type="text/javascript"> window.onload=function () { document.body.onclick=function () { alert("a"); }; } </script> </head> <body style="border:1px solid red;"> </body>
当是上面这个代码的时候我们发现body缩成一小条在页面最上方只有点击最上方的时候才会弹出框，（一般情况下body撑不起来）那我们怎么办呢，是哪里出了问题呢？现在我们接着来看：
<script type="text/javascript"> window.onload=function () { document.onclick=function () { alert("a"); }; } </script> </head> <body style="border:1px solid red;"> </body>
现在我们直接来给document加事件，那么就可以实现无论点击哪里都会有反应；那么现在问题又来了，document到底是什么呢？那我们现在就来探究一下咯：
a、document就是网页；（对，没错）
b、document就是节点；引用一下（childNode）返回一个元素的子节点；
<script type="text/javascript">
alert(document.childNodes[1].tagName); //HTML
</script>
在视频上显示的是childNodes[0]显示的是“！”，而在childNodes[1]显示的是HTML，因此可以把document堪称是最顶层的虚拟的父节点。
2、事件对象（获取鼠标位置）
（1）下面就是一个事件对象的写法：（点击页面然后执行一个函数；）
<script type="text/javascript"> document.onclick=function () { alert(event.clientX); } </script>
其实上面的event就是一个事件对象，它里面包含了事件的各种信息；其中clientX就是其中一个；
<script type="text/javascript"> document.onclick=function () { alert(event.clientX+","+event.clientY); //在火狐下不弹出来，出现错误！ } </script>
在火狐下事件处理函数则需要添加参数；
<script type="text/javascript"> document.onclick=function (ev) { alert(ev.clientX+","+ev.clientY); //ev在IE下为undefined，但是在火狐下面则是一个鼠标事件对象； } </script>
而这个代码在IE下面确显示不出来：因此需要处理兼容性；
<script type="text/javascript"> document.onclick=function (ev) { if(ev){ alert(ev.clientX+","+ev.clientY); } else { alert(event.clientX+","+event.clientY); } } </script>
但是这个在我的电脑上的IE上面还是显示不出来？什么原因呢？
注意：因为这个时间对象用的次数太多了，如果我们每次用的时候都要这么写的话那就太麻烦了，那怎么办呢？接下来我们继续来看：
获取event对象(兼容性写法)：
——var oEvent=ev||event;
（2）或
<script type="text/javascript">
var a=12||'abc'; //12
alert(a);
</script>
这样的话那我们上面的鼠标点击显示位置事件就可以用这种方式来简化代码了......
<script type="text/javascript"> document.onclick=function (ev) { var oEvent=ev||event; alert(oEvent.clientX+","+oEvent.clientY); } </script>
3、事件流
（1）事件冒泡
取消冒泡：oEvent.cancelBubble=true
例子：仿select控件
DOM事件流
首先我们来看一下这个事件冒泡的问题：
<html onclick="alert('html');" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body onclick="alert('body');"> <div style="width:300px; height:300px; background:red;" onclick="alert(this.style.background);"> <div style="width:200px; height:200px; background:green;" onclick="alert(this.style.background);"> <div style="width:100px; height:100px; background:#CCC;" onclick="alert(this.style.background);"> </div> </div> </div> </body> </html>
这个事件冒泡的问题会在大部分的时候给我们带来很多问题，而不会有太大的用处，下面再来看一个例子（自定义的下拉列表）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#div1{width:100px;height:150px;background:#ccc;display:none;}
</style>
<title>Title</title>
<script type="text/javascript">
window.onload=function () {
var oBtn=document.getElementById("btn1");
var oDiv=document.getElementById("div1");
oBtn.onclick=function () {
oDiv.style.display="block";
};
document.onclick=function () {
oDiv.style.display="none";
};
}
</script>
</head>
<body>
<input id="btn1" type="button" value="显示">
<div id="div1"></div>
</body>
</html>
当我们用上面代码的时候点击按钮没有反应，这是为什么呢？我们现在来看一下再在上面加两个弹出框的代码：
<script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById("btn1"); var oDiv=document.getElementById("div1"); oBtn.onclick=function () { oDiv.style.display="block"; alert("按钮被点击了") }; document.onclick=function () { oDiv.style.display="none"; alert("页面被点击了") }; } </script>
当使用上述代码的时候我们发现当点击按钮的时候，下面的div会出现，且页面先弹出框”按钮被点击了“，接着会再弹出“页面被点击了”；而当我们点击页面的时候只弹出“页面被点击了”，说到这里我们就看到了事件冒泡的问题了；那么我们来分析一下接下来怎么处理：
现在我们就要用到这个取消冒泡的属性了，即cancelBubble；
<script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById("btn1"); var oDiv=document.getElementById("div1"); oBtn.onclick=function (ev) { var oEvent=ev||event; oDiv.style.display="block"; //alert("按钮被点击了") oEvent.cancelBubble=true; }; document.onclick=function () { oDiv.style.display="none"; //alert("页面被点击了") }; } </script>
这样的话就可以实现了，注意这里还处理了兼容性的问题，棒！！！
