1. 事件注册
element.事件名(function(){})
$("事件触发对象").事件名(function(){});
//例子
$("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变量名