jQuery的事件
事件冒泡处理
使用event.stopPropagation();阻止事件冒泡
冒泡事件也可以使用return false来处理
并且
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
$('.box button').click(function (event) {
alert('点击了button');
});
$('.box').click(function (event) {
alert('点击了box');
//事件冒泡阻止
event.stopPropagation()
})
})
/*事件冒泡，当一个div标签里面有一个button元素时
给div与button绑定点击事件，当点击button的时候也会触发div绑定的事件
jquery中只有事件冒泡阶段，没有puhuo
事件冒泡阶段：button->body->html->document
使用stopPropagation()可以处理事件冒泡这种情况
或者使用return false也可以处理事件冒泡，不过return false也会处理默认的js事件，比如说a标签的跳转
*/
</script>
jquery的事件
单双击事件
- 单击事件click()
- 双击事件dblclick()
一个按键同时绑定单击事件以及双击事件，两次单击中间的事件差是300毫秒，如果小于300毫秒，表示双击。假如小于300毫秒，也是表示调用了两次单击，一次双击。如果是单击
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//解决单双击事件冲突问题
var timeer = null;
$('button').click(function () {
//上来先把timer定时器清空了
clearTimeout(timeer);
//定时器，延时300毫秒
timeer=setTimeout(function () {
console.log('单击了');
},300)
});
$('button').dblclick(function () {
//触发了双击事件也把定时器清空了
clearTimeout(timeer);
console.log('双击了')
});
})
</script>
鼠标移入移出事件
-
mouseover()移入
-
mouseout()移出
-
mouseenter()移入
-
mouseleave()移出
-
合成事件
- hover()这个是jquery中的合成事件，合成了mouseenter与mouseleave事件
<head>
<meta charset="UTF-8">
<title>合成事件</title>
<style>
.shop-car{
position: relative;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.shop{
width: 400px;
height: 200px;
display: none;
background-color: red;
}
</style>
</head>
<body>
<div class="shop-car">
<span>购物车</span>
<div class="shop"></div>
</div>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
$('.shop-car').hover(function () {
$('.shop').stop().slideDown(500);
},function () {
$('.shop').stop().slideUp(500);
})
})
</script>
</body>
表单事件
- select()事件，文本选中的时候会调用
<body>
<form action="#">
<input type="text">
</form>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$('input[type=text]').select(function () {
console.log('内容被选中了')
})
</script>
</body>
- submit()事件
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//原声js的是onsubmit事件
$('from').submit(function (e) {
//阻止form表单的默认事件（submit触发form表单的action，往action发请求）
e.preventDefault();
//自定义去发请求
console.log('form被submit了')
})
})
</script>
鼠标的聚焦，失焦，键盘事件
- focus()获得焦点:输入框标示闪烁
- blur()失去焦点:输入框标示不闪烁
- 键盘按键keyup()
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$('input[type=text]').keyup(function (e) {
//e.keyCode是键盘的键码
//可以通过键盘键码使用流程控制判断进行控制
console.log(e.keyCode)
})
</script>
事件委托
事件委托：利用事件冒泡原理，需要动态往父级元素里面添加标签，并且让新添加的标签拥有与兄弟标签一样的事件，可以使用事件委托
<body>
<ul>
<li>111</li>
<li>222</li>
</ul>
<button>按钮</button>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//事件委托（如果是未来追加的元素，需要绑定事件，可以使用事件委托）
//on() 第一个属性事件名，第二个属性是选择器，第三个是fun
$('ul').on('click','li',function () {
alert($(this).text())
});
//未来动态的往ul中追加了li标签，如果只是ul>li标签绑定了click事件，那么可以考虑使用事件委托
$('button').click(function () {
$('ul').append('<li>喵</li>')
})
})
</script>
</body>
