jQuery事件冒泡、默认行为等笔记

什么是事件冒泡?
如果父元素子元素都绑定了事件,当子元素的事件被触发时,父元素也会响应。
从里到外,从下级往上级传递的过程。
如何阻止事件冒泡

  1. 在子元素绑定的事件中加上return false
  2. 在子元素的事件中加上event.stopPropagation(),需要在click函数中传一个event参数

如何阻止默认行为

  1. 在需要阻止的事件里加上return false
  2. 在需要阻止的事件里加上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的事件
自定义事件
想要自定义事件,必须满足两个条件

  1. 事件必须是通过on绑定的
  2. 事件必须通过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对象返回。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值