1.事件注册

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

和原生基本一致

2.事件处理

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

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

事件绑定 on()

  1. //事件委派，动态生成的元素也能绑定事件
  2. $("ul").on("click",'li',function(){})   
  4. //多事件同时绑定
  5. $("div").on({
  6. mouseover:function(){},   //将所有事件都以对象中的键值方式存储
  7. mouseout:function(){},
  8. click:function(){}
  9. })

事件解绑 off()

  1. $("div").off()   //将div上的所有事件全部解除
  2. $("div").off("click")  //只解除click事件
  3. $("ul").off("click","li")  //解除事件委托

事件自动触发 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变量名