2016年5月27日上午（妙味课堂js基础-3笔记一（事件））
Posted zzjeny
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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事件流
以上是关于2016年5月27日上午（妙味课堂js基础-3笔记一（事件））的主要内容，如果未能解决你的问题，请参考以下文章