1. 事件注册

  1. element.事件名(function(){})
  2. $("事件触发对象").事件名(function(){});
  3. // 例子
  4. $("div").click(function(){console.log(1)})

和原生基本一致

2. 事件处理

jQuery特有的三个事件处理方法：

  • on() 事件绑定
  • off() 事件解绑
    • one() 只触发一次事件
  • trigger() / triggeHandler() 事件触发

    事件绑定 on()

    ```javascript // 事件委派，动态生成的元素也能绑定事件 $(“ul”).on(“lick”,”li”,function() {})

// 多事件同时绑定 $(“div”).on({ mouseover:function(){}, //将所有事件都以对象中的键值方式存储 mouseout:function(){}, click:function(){} })

  2. ---
  4. <a name="stuZk"></a>
  5. ### 事件解绑 off()
  6. ```javascript
  7. $("div").off()    //将div上的所有事件全部解除
  8. $("div").off("click")    //只解除click事件
  9. $("ul").off("click","li")    //解除事件委托

如果只想事件触发一次可以使用one()

事件自动触发 trigger()

  1. element.click() // 简单来说就是再设置一个相同的空事件顶掉之前的事件+
  2. element.trigger("type")    //type 为自动触发的事件类型
  3. element.triggerHandler(type)

triggerHandler 不会触发元素的默认行为，类似与input获得焦点时内部光标会闪烁一样

3. jQuery 事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

  1. element.on(events,[selector],function(event){})

阻止默认行为：event.preventDefault()或者 return false
阻止冒泡：event.stopPropagation()

4. jQuery 拷贝对象

  1. $.extend([deep],target,object1,[objectN])
  • deep： 如果为 true 就是深拷贝，默认为 false 浅拷贝
  • target：要拷贝的对象
  • object1：第一个拷贝的对象
  • objectN：第N个要拷贝的对象
  • 浅拷贝在对象引用拷贝时只会拷贝对象地址，修改对象会影响拷贝对象
  • 深拷贝为完全克隆，即对象也会创建一个新的地址来存放，而不是共用一个地址，修改目标对象不会影响拷贝对象

5. 多库共存

当其他库的 $ 和 jQuery 库冲突时，支持修改顶级对象名

  1. jQuery("div")        //将 $ 符号换成 jQuery
  2. let xx = $.noConflict();    // 自己定义一个变量来当jQuery变量名