这节看不懂啊。。。为什么 $(".aaron").focus(function() { $(this).css('border', '2px solid red') })这个没有效果呢-慕课网

首页课程实战体系课手记专栏慕课教程

这节看不懂啊。。。为什么 $(".aaron").focus(function() { $(this).css('border', '2px solid red') })这个没有效果呢

来源：3-1 jQuery表单事件之blur与focus事件

点点圈圈错错真真

2016-10-30 19:26

这节看不懂啊。。。为什么 $(".aaron").focus(function() { $(this).css('border', '2px solid red') })这个没有效果呢

写回答关注

6回答

骑猪跑的程序员

2016-12-01 16:53:12

已采纳
这一段本身就是不实现效果的。
注意原文中这一句话：“div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。”
所以说，如果代码如下，则input上出现效果，且div上产生focusin( )事件
```
$(".aaron input").focus(function() {         $(this).css('border', '2px solid red')     })
```
1 2

点点圈圈错错...

非常感谢！

2016-12-01 16:54:50

共 1 条回复 >
慕婉清0208

2018-06-02 17:34:51

但是focus事件不是绑定到.arron的div上了吗，点击div区域不应该触发吗

1 0

qq_逐梦之...

div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。 focus()在元素本身产生，focusin()在元素包含的元素中产生

2018-11-04 11:09:31

共 1 条回复 >
qq_明明_10

2017-01-11 14:08:15

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}

.left div {
background: #bbffaa;
}

.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h4>.focusin与blur</h4>
<div class="left">
<div class="aaron">
点击触发焦点(无反应)：
<input type="text" />
</div>
<div class="aaron1">
点击触发焦点并冒泡：
<input type="text" />
</div>
</div>
<script type="text/javascript">
$(".aaron").focusin(function() {
$(this).css('border','1px solid red');
})
$(".aaron1").focusin(function() {
$(this).find('input').val('冒泡捕获了focusin事件')
})
</script>
</script>
<h4>.focusout与blur</h4>
<div class="right">
<div class="aaron3">
点击触发失去焦点(无反应)：
<input type="text" />
</div>
<div class="aaron4">
点击触发失去焦点并冒泡：
<input type="text" />
</div>
</div>
<script type="text/javascript">
$(".aaron3").focusout(function() {
$(this).css('border', '2px solid red')
})
$(".aaron4").focusout(function() {
$(this).find('input').val('冒泡捕获了focusout事件')
})
</script>
</body>
</html>
这样处理就可以看到红框了

0 0
Zhangdibill

2016-12-12 16:47:07

关键在于 “处理”两个字
focus与blur、focusin与focusout都能接受到冒泡
但是 focus与blur对冒泡不会处理，focusin与focusout会对冒泡事件处理
区别就在于“处不处理”冒泡事件

0 3
Albert小白

2016-11-04 15:33:00

你可以吧aaron改成input自己看看效果！！

1 0

Albert...

去掉.啊别忘了

2016-11-04 15:33:56

共 1 条回复 >
点点圈圈错错真真

2016-10-30 19:31:01

就算在 .left里产生了 focuin（）跟他自己有什么关系呢这个 css样式为什么没有实现

0 0