1.事件监听
$('#box').click(function(){
console.log('click - 1')
})
- on(eventName,cb)：除了给当前元素做监听，还能做事件委托
$('#box').on('click',function(){
console.log('click - 2')
})
//事件委托
$('#box').on('click','li',function(){
console.log('li - 事件委托')
})
- one(eventName,cb)方法监听：只执行一次
$('#box').one('click',function(){
console.log('click - 3')
})
- 自定义事件：on()/one()都可以定义自定义事件（事件回调中的第一个参数永远是event）
$('ul').on('removeChild',function(event,index){
//根据下标获取选中的元素并删除
$(this).children().eq(index).remove()
})
- 为事件回调绑定数据：将数据绑定到event中供回调读取
<script>
$(function(){
var obj = {a:1,b:2}
$('div').click(obj,function(event){
console.log(event.data)
})
$('div').click() //{a: 1, b: 2}
})
</script>
2.触发事件
- 事件名称()：适用于原生事件，支持冒泡，不支持默认事件
<script>
$(function(){
$('li').on('click',function(){
console.log('li')
})
$('ul').on('click',function(){
console.log('ul')
})
$('#box').on('click',function(){
console.log('box')
})
$('a').on('click',function(){
console.log('a')
})
//模拟(支持冒泡)
$('li').click() //li -> ul _> box
//模拟a连接点击（不支持默认事件）
$('a').eq(0).click() //a 不进行跳转
})
</script>
- trigger()：与事件名称()效果一致，支持批量操作，另外还支持自定义事件
//触发原生事件
$('#box').trigger('click')
//触发自定义事件
$('ul').trigger('removeChild'，2)
//不执行默认事件
$('a').eq(0).trigger('click')
- triggerHandler()：顾名思义，直接执行回调，不会产生事件冒泡，不执行默认事件，只影响第一个匹配元素
//触发原生事件
$('#box').triggerHandler('click')
//触发自定义事件
$('ul').triggerHandler('removeChild',2)
//不执行默认事件 只影响第一个匹配元素
$('a').triggerHandler('click')
3.解绑事件
- off(eventName)：解除当前元素绑定的事件监听,包括自定义事件,如果不传参数，则解绑所有的事件
- 注意：只能移除由query添加的事件，原生dom通过addEventListenner添加的事件off()方法无法移除
// 解绑所有事件监听
$("#ul").off()
//解除click事件监听
$("#ul").off("click")
// 解除自定义事件
$("#ul").off("removeFirstChild")
4.jQuery事件和原生事件的关系
- jQuery添加事件监听的方式是通过dom元素调用addEventListenner()来完成的，这也是他可以重复绑定事件的原因所在
- 原生dom元素能触发jquery绑定的事件
<script>
// 常规注册
$("#ul").click(function(){
console.log("click - juery")
})
$("#ul").on("click",function(){
console.log("click - juery on")
})
//触发jquery监听的事件
document.getElementById("ul").click()
//click - juery
//click - juery on
</script>
<script>
var ul = document.getElementById("ul")
ul.onclick= function(){
console.log("onclick")
}
ul.addEventListener("click",function(){
console.log("click - addEventListener")
})
// jquery对象也能直接调用 原生dom添加的事件监听回调
$("#ul").click()
//onclick
//addEventListener
</script>
5.阻止默认事件和冒泡
- 阻止默认事件：preventDefault()
- 阻止冒泡：stopPropagation()
- 同时阻止默认事件和冒泡 return false（在原生js中，这个语句只能阻止默认行为，不能阻止冒泡）
<body>
<div id="box">
<a href="http://www.baidu.com">百度一下</a>
</div>
</body>
<script>
$("#box").click(function(e){
console.log("box")
})
$("#box>a").click(function(e){
console.log("点击了a链接")
//阻止默认事件(兼容IE8)
e.preventDefault()
//阻止冒泡(兼容IE8)
e.stopPropagation()
// 同时阻止默认事件和冒泡
return false
})
</script>
6.jQuery事件对象
- 回调函数的第一个参数永远是event,后面的参数才是用户传递的数据
- 常用的坐标信息与原生事件对象是一致的
7.总结
- Jquery更方便自定义事件和事件委托
- 对于事件触发，Jquery的方法都屏蔽了元素默认的事件
- 自定义事件也只能由trigger/triggerHandler来触发
