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

（1）Document 对象

解释：每一个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使咱们能够从脚本中对 HTML 页面中的全部元素进行访问。

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

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

 

（2）什么是event？？

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

 

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

代码以下：

 

解释：

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

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

 

（3）事件冒泡

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

效果图以下：

 

 

代码以下图：

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

 

（二）列举第二个案例：

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

 

（三）列举第三个案例：

 即：修改上面第二个案例

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

 

解释：

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

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