focus()在元素本身产生,focusin()在元素包含的元素中产生,你们队这句话是如何理解的???
focus()在元素本身产生,focusin()在元素包含的元素中产生
对这句话是怎么理解的??
前面一截可以看懂,后面一截给我的感觉像是:在产生foucs()的元素的内部 的 元素产生focusin()。
求解!谢谢
focus()在元素本身产生,focusin()在元素包含的元素中产生
对这句话是怎么理解的??
前面一截可以看懂,后面一截给我的感觉像是:在产生foucs()的元素的内部 的 元素产生focusin()。
求解!谢谢
2019-08-07
我的理解:
我的理解:
1、首先从定义上看:
(1)focus():当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。
(2)focusin():当元素(或在其内的任意元素)获得焦点时发生 focusin 事件。
2、focus():需要在表单元素本身上绑定才有效果,如练习中的
$(".aaron").focus(function() {//focus()此时是绑定在class=aaron的div上的
$(this).css('border', '2px solid red');//而div无法聚焦,所以点击div时看不到效果
})//再点击子元素input时发现也无效果,说明父元素绑定的focus事件不会波及子元素
若想让input有效果,就应将focus绑定在它本身,修改如下:
$(".aaron>input").focus(function() {
$(this).css('border', '2px solid red')
})
2、focusin():在元素包含的元素中产生。还是拿练习中的例子:
$(".aaron1").focusin(function() {//focusin绑定在class=aaron1的div上
$(this).find('input').val('冒泡捕获了focusin事件')//此时只有input获焦时才会执行规定的函数
})//说明,fucusin虽然绑定在父元素aaron1上,但实际是由其子元素input获焦时产生。
3、总结:focus()需要在表单元素本身上使用才能产生效果,focusin()在任意子元素获得焦点时也会触发。
focusin()在元素包含的元素中产生的意思是指子元素聚焦时才能触发父元素的focusin()方法,例如:
<div id="test">点击触发</div> $("#test").focusin(function() { alert(113)//此时点击没有弹出效果 $(this).css('border','2px solid blue') //没有添加上边框 }); <div id="test">点击触发:<input type="text" /></div> $("input").focus(function() { $(this).css('border','2px solid red'); }); $("#test").focusin(function() { $(this).css('border','2px solid blue');//成功触发事件添加了边框 });
举报