JS——事件详解（Document对象、event对象、事件冒泡...）

（1）Document 对象

解释：每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

（Document是网页中最顶层的父节点 比html还大）

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

 

（2）什么是event？？

答：event是事件对象。即：用来获取事件的详细信息：鼠标位置（clientX、clientY）、键盘按键等

 

列举案例：（点击页面弹出鼠标位置信息案例）

代码如下：

 

解释：

这个事件兼容性问题，在之前的ie和ff浏览器中难以兼容，所以才会写出两个解决兼容性问题的答案（3、4的写法）。

而现在大多数浏览器都得以兼容。所以推荐使用第二种写法（第26-27行代码）即可，若还出现浏览器兼容性问题，则推荐使用第四种写法（第38-43行代码）即可。

 

（3）事件冒泡

（一）列举一个简单案例：

效果图如下：

 

 

代码如下图：

如上图，显示的就是冒泡事件所执行的效果。如代码图，当底层div被点击，首先会触发本身，接着它的父级也会被触发，然后逐层向上触发其他div点击事件。

 

（二）列举第二个案例：

本案例为了实现：当点击按钮，使得div出现，当点击页面其他地方，使得div消失。（失败的例子↓↓↓）

 

（三）列举第三个案例：

 即：修改上面第二个案例

本案例为了实现：当点击按钮，使得div出现，当点击页面其他地方，使得div消失。（成功的例子↓↓↓）

 

解释：

为了阻止按钮的向上冒泡，实现案例效果，所以需要在按钮点击事件中添加阻止冒泡方法，即：event.cancelBubble=true即可。

【关于阻止冒泡，这篇文章可以好好阅读：http://caibaojian.com/javascript-stoppropagation-preventdefault.html#comments （经测试，文章中的方法也可以实现阻止冒泡）】