day13——javascript事件（补充）

事件的绑定方式：

事件属性DOM0
  把事件写在标签的属性里面
    好处：大家都会，几乎所有的浏览器都支持
    坏处：夹杂在HTML代码中，代码不简洁；                                                                                                   这种事件写法效率不高；不符合“行为，样式，结构”相分离。
  <input type="button" οnclick="alertMessage()" value="按钮"/>

事件赋值式DOM0
  缺点:  只能给一个元素注册一个事件，绑定一个事件，后一个会覆盖前一个
  好处： 符合“行为，样式，结构”相分离；便于操作当事对象；方便读取事件对象

事件监听DOM2
  addEventListener : 非 IE 7 8 下使用
  attachEvent ：IE 7 8 下使用 

两个方式的区别

 

事件解绑方式

事件的执行机制：

事件的传播
  思考：点击红色区域会不会触发粉色区域？
  就像上面那个图片一样，我们点击在红色盒子身上的同时，也是点击在了粉色盒子上                      这个是既定事实，那么两个盒子的点击事件都会触发                                                                        这个就叫做 事件的传播
  在事件传播的过程中，有一些注意的点：
    只会传播同类事件                                                                                                                              只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发                                                  内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发 

 

事件传播方向
  目标：你是点击在哪个元素身上了，那么这个事件的 目标 就是什么
  事件冒泡
    就是从事件 目标 的事件处理函数开始，依次向外，直到 window 的事件处理函数触发                    也就是从下向上的执行事件处理函数
    特点: 事件传播方向，由内向外传
  事件捕获
    就是从 window 的事件处理函数开始，依次向内，只要事件 目标 的事件处理函数执行                    也就是从上向下的执行事件处理函数
  事件原型图
  实现: 事件捕获和事件冒泡
    addEventListener的第三个参数决定了是事件捕获还是事件冒泡
    true:表示注册的事件在捕获阶段触发
    false:表示注册的事件在冒泡阶段触发-----默认值

事件处理三个阶段
  事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段；

事件目标对象 target
  target 这个属性是事件对象里面的属性，表示你点击的目标                                                              当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素                                            这个 target 也不兼容，在 IE 下要使用 srcElement
  target与currentTarget属性
    当我点击哪个元素时，event.target返回的是点击的元素节点
    event.currentTarget返回的是绑定事件的元素 

 阻止事件传播
  e.stopPropagation()   标准浏览器                                                                                                      e.cancelBubble=true  IE低版本
兼容写法
 

e.stopPropagation?e.stopPropagation():e.cancelBubble = true

事件委托
  这个时候，当我们点击 li 的时候，也可以触发 ul 的点事件                                                                并且在事件内不，我们也可以拿到你点击的到底是 ul 还是 li                                                              这个时候，我们就可以把 li 的事件委托给 ul 来做
  为什么要用事件委托
  事件委托的好处                                                                                                                                             减少了事件绑定的数量；                                                                                                                   对后来动态创建的元素依然有效，                                                                                                     解决动态添加的元素节点无法绑定事件的问题;

缺点
  1.事件委托基于冒泡，对于不冒泡的事件不支持。
  2.层级过多，冒泡过程中，可能会被某层阻止掉。
  3.理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
  4.把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

默认行为：

阻止默认行为
  有的时候，我们不希望浏览器执行默认事件                                                                                      比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么                  而不是直接跳转链接 那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件
两个方法来阻止默认事件
    e.preventDefault() : 非 IE 使用                                                                                                            e.returnValue = false ：IE 使用 

阻止默认事件的时候也要写一个兼容的写法