JavaScript事件的传播

一、JavaScript事件简介。

    - 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间

- JavaScript 与 HTML 之间的交互是通过事件实现的。

    - 对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等

    事件就是用户与浏览器的交互行为，以下几种是比较常见的事件

onclick 鼠标点击某个对象  

ondblclick 鼠标双击某个对象  

onerror 当加载文档或图像时发生某个错误   

onfocus 元素获得焦点  

onblur 元素失去焦点

onkeydown 某个键盘的键被按下  

onkeypress 某个键盘的键被按下或按住  

onkeyup 某个键盘的键被松开

onload 某个页面或图像被完成加载  

onmousedown 某个鼠标按键被按下  

onmousemove 鼠标被移动  

onmouseout 鼠标从某元素移开  

onmouseover 鼠标被移到某元素之上  

onmouseup 某个鼠标按键被松开  

onreset 重置按钮被点击  

onresize 窗口或框架被调整尺寸  

onselect 文本被选定

onsubmit 提交按钮被点击  

onunload 用户退出页面

二、事件的传播

    因为这些事件都是比较常见且简单的事件，所以我们这次主要讲这些事件的传播方式。

1、关于事件的传播网景公司和微软公司有不同的理解

    - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

    2、W3C综合了两个公司的方案，将事件传播分成了三个阶段

  1.捕获阶段

    - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会    触发事件

2.目标阶段

- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3.冒泡阶段

- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

  一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

  - IE8及以下的浏览器中没有捕获阶段

    注：W3C:万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构

    

例：

     浏览器打开是这样的样式

     

     设计点击事件 

       

参数：

obj 要绑定事件的对象

eventStr 事件的字符串(不要on)

callback 回调函数