1. 事件注册

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

和原生基本一致

2. 事件处理

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

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

事件绑定 on()

//事件委派，动态生成的元素也能绑定事件
$("ul").on("click",'li',function(){})   

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

事件解绑 off()

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

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

事件自动触发 trigger()

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

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

3. jQuery 事件对象

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

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

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

4. jQuery 拷贝对象

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

5. 多库共存

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

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