事件总结

事件委托：让利用事件冒泡的原理 让自己所触发的时间 让他的父元素代替执行
注意：事件委托先执行然后在执行自身设置的事件

1 jq未统一前事件的添加

  1 简单事件添加
    $("#btn").click(function(){ 内容 })

  2 多个事件添加 使用bind方法管理
    $("#btn).bind("click mouseenter mouseleave",function(){ 内容 })
    $("#btn).bind("click":function(){ 内容 },"mouseenter":function(){ 内容 })

  3 delegate() [ˈdeləɡət]  可以添加事件委托 事件代理
    $("#box").deledate("选择器","事件",function(){ 内容 })
    注意参数传递的顺序：参数1 指定哪些内部元素可以触发  参数2 事件类型  参数3 事件处理程序

2 最终jq用on()统一了所有的事件添加方式

  1 简单事件添加
    $("#btn").on("click",function(){ 内容 })

  2 添加多个事件
    $("#btn").on("click mouseenter mouseleave",function(){ 内容 })  多个事件公用一个处理程序
    $("#btn).on("click":function(){ 内容 },"mouseenter":function(){ 内容 })  使用on方法同时管理同一个标签的多个事件

  3 事件委托的方式
    注意参数传递的顺序：参数1 事件类型 参数2 指定哪些内部元素可以触发 参数3 事件处理程序
    $("#box").on("click","p,span",function(){ 内容 }) 将事件委托给box 而不是直接添加给内部的子元素

  4 注意：事件委托先执行然后在执行自身设置的事件

  5 事件的取消
    1 移除指定事件(移除各种各样的事件)
      $("#box").off("click")
      1.1如果想要移除指定事件类型中的某一事件 可以传入参数2 事件处理程序
      $("#box").off("click",fun) 清除事件中一部分程序
      1.2 移除事件委托
      $("#box").off("click","**")
    2 同时移除多种事件
      $("#box).off("click mouseenter")
    3 移除box的所有事件
      $("#box").off()

  6 事件触发的方式
    1 手动触发事件 $("#btn").click()
    2 使用trigger [ˈtrɪɡə(r)] 方法触发某个事件 与基本的触发方式基本相同 $("#btn").trigger("click")
      使用trigger触发事件效果(标准的触发方式 会执行事件代码以及触发事件执行的页面显示效果)
    3 triggerHandler  $("#btn").triggerHandler("click");
      使用triggerHandler 只会触发代码的执行 不会出现页面显示的变化

  7 阻止事件的冒泡和捕获

    标准浏览器 e.stopPropagation()  IE9之前  event.conceBubble=true
  
  8 阻止默认事件：为了不让a点击之后跳转 我们就要给他的点击事件进行阻止
    
    return false  e.preventdefault()

      e.preventDefault() [prɪˈvent] [dɪˈfɔlt]  可以取消标签的默认事件效果(a连接跳转效果)
      return false 可以取消标签的默认事件效果 同时阻止事件的传播
      return false 在js中只能取消标签的默认事件效果
      
      阻止默认事件
      在a标签的事件代码中 我们只需要阻止事件的默认效果 但是希望冒泡 使用e.preventDefault()
      return false 将冒泡也进行了阻止 无法触发父元素的事件委托
      
      阻止事件的冒泡和捕获
      e.stopPropagation()  [stɑp] 阻止事件传播
      IE9之前  event.conceBubble=true