什么是事件冒泡?
如果父元素子元素都绑定了事件,当子元素的事件被触发时,父元素也会响应。
从里到外,从下级往上级传递的过程。
如何阻止事件冒泡
- 在子元素绑定的事件中加上
return false
- 在子元素的事件中加上
event.stopPropagation()
,需要在click函数中传一个event参数
如何阻止默认行为
- 在需要阻止的事件里加上
return false
- 在需要阻止的事件里加上
event.preventDefault()
,该方法同样需要传入一个event参数
$("a").click(function(event) {
alert("阻止默认行为");
return false; //第一种
event.preventDefault(); //第二种
})
自动触发
自动触发需要调用trigger或triggerHandler()方法
$("button").trigger("click");
$("button").triggerHandler("click");
//自动触发button的点击事件
两者区别:
如果用trigger()
自动触发子元素的事件父元素的事件也会被触发,即事件冒泡。如果用triggerHandler()
则不会发生事件冒泡。
如果使用trigger()
自动触发事件,会触发默认行为,例如自动触发submit事件。triggerHandler()
则不会
如果想用trigger触发a标签的事件和默认行为,则需要将a标签中的内容用span包起来,然后用trigger自动触发span的事件
自定义事件
想要自定义事件,必须满足两个条件
- 事件必须是通过on绑定的
- 事件必须通过trigger()触发
$("son").on("myClick",function() {
alert("son");
})
$("son").trigger("myClick");
利用trigger触发子元素带命名空间的事件,带有相同命名空间的父元素的事件也会被触发
事件委托
在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件。
事件委托就是可以找一个在入口函数执行前就存在的元素来监听动态添加的某些元素的事件
$("button").click(function() {
$("ul").append("<li>我是新增的li标签</li>");
})
//通过button动态添加li标签。
$("ul").delegate("li","click",function() {
console.log($(this).html)
})
//将li的click事件委托给ul监听
//虽然对li没有绑定click事件,但是当点击li时,
//因为事件冒泡的原因,向上传递给绑定了click事件的ul
移入移出
mouseover()/mouseout()
如果在子元素中触发移入移出父元素中的事件也会被触发
hover(function1 () {} , function2 () {})
在子元素中触发移入移出不会触发父元素的事件,工作原理:mouseenter/mouseleave
移入时触发function1,移出触发function2
siblings()
获取到除选中元素以外的同级别的所有元素,并会封装成jquery对象返回。