Javascript事件机制

JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件的组成

事件源 事件类型 事件处理程序 我们也称为事件三要素

1. 事件源：事件被触发的对象 （例如按钮对象）
2. 事件类型：如何触发（例如鼠标单击、选中、键盘按下等） 
3. 事件处理程序：通过一个函数赋值的方式

点我啊
//button:事件源  单击鼠标:事件类型 console.log....:事件处理程序

常用事件：

用户点击鼠标时

网页加载后

图像加载后

鼠标悬浮时...

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 采用函数赋值形式添加事件处理程序

1.事件流

事件流描述了页面接收事件的顺序。IE 将支持事件冒泡流，而 Netscape Communicator 将支持事件捕获流。

1.1 事件冒泡(IE事件流)

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。

例如：

 outer
    center
      inner

    

  

  

在点击页面中的id为inner的div元素，click事件会以如下顺序发生

div#inner- > div#center -> div#outer -> body -> html -> document

 

所有现代浏览器都支持事件冒泡，只是在实现方式上会有一些变化。IE5.5及早期版本会跳过html元素（从body直接到 document）。现代浏览器中的事件会一直冒泡到 window 对象。

阻止事件冒泡

event.stopPropagation()

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！只想当前事件被执行，外层的绑定的事件不被执行，直接在对应方法中使用event.stopPropagation()阻止事件冒泡。

outer
  center
    inner