1 绑定事件
bind(type [, data ], fn )
第一个参数是事件类型，类型包括： blur focus
load resize scroll unload click dblclick
mousedown mouseup mouseover mouseout
mouseenter mouseleave change select submit
keyup keydown keypress keyup error
第二个参数为可选参数，作为 event.data 属性值传递给事件对象的额外数据对象
第三个参数是⽤用来绑定的处理理函数
绑定事件方法
<div class="box">刘大帅</div>
<script>
//方式一
$('.box').click(function () {
$(this).css('color','red');
})
//方式二: bind版本
$('.box').bind('click',function () {
console.log($(this).html());
})
//方式三: on版本
$('.box').on('click',function () {
console.log($(this).html());
})
</script>
取消绑定事件
$().on('click',function () {});
$().off('click');
2 单击事件
click
<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
$(function () {
$('.box').click(function () {
$(this).hide(1000,function () {
alert($(this).text());
}); //1s后隐藏,并执行函数
})
})
</script>
3 双击事件
dblclick
<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
$(function () {
$('.box').dblclick(function () {
console.log('双击了')
})
})
</script>
4 鼠标摁下和抬起事件
mousedown & mouseup
<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
$(function () {
$('.box').mousedown(function () {
console.log('鼠标摁下了');
})
$('.box').mouseup(function () {
console.log('鼠标抬起了');
})
})
</script>
5 鼠标移动事件
mousemove 一般用于复制粘贴
<div class="box" style="width: 200px;height: 200px;background: red">刘大帅</div>
<script>
$(function () {
$('.box').mousemove(function () {
console.log('移动了');
})
})
</script>
6 鼠标穿过和离开事件
mouseover & mouseout
鼠标穿过被选元素 或者当前被选元素的子元素
<div class="box" style="width: 200px;height: 200px;background: red">
<p style="background: green">刘大帅</p>
</div>
<div id="box" style="width: 100px;height: 40px;background-color: brown;position: relative">
<div class="content" style="position: absolute;width: 200px;height: 200px;top: 40px;background-color: red"></div>
</div>
<script>
$(function () {
$('.box').mouseover(function () {
console.log('鼠标穿过了');
})
$('.box').mouseout(function () {
console.log('鼠标离开了');
})
/*$('#box').mouseover(function () {
$('.content').show();
})
$('#box').mouseout(function () {
$('.content').hide();
})*/
})
</script>
7 鼠标穿过和离开事件
mouseenter & mouseleave
鼠标只穿过被选元素时的事件（推荐使用）
<div id="box" style="width: 100px;height: 40px;background-color: brown;position: relative">
<div class="content" style="position: absolute;width: 200px;height: 200px;top: 40px;background-color: red"></div>
</div>
<script>
$(function () {
$('#box').mouseenter(function () {
console.log('1111');
//使用动画的时候，先要停止动画 在开启动画
// $('.content').show();
$('.content').stop().slideDown();
})
$('#box').mouseleave(function () {
// $('.content').hide();
$('.content').stop().slideUp();
})
})
</script>
8 鼠标聚焦和失焦事件
focus & blur
<input type="text">
<script>
$(function () {
//文档加载时直接获取焦点
$('input[type=text]').focus();
//获取焦点
$('input[type=text]').focus(function () {
console.log('获取焦点了');
});
//失去焦点
$('input[type=text]').blur(function () {
console.log('失去焦点了');
});
//使用户无法使用input输入框
$('input[type=text]').focus(function () {
this.blur();
})
})
</script>
9 键盘摁下和抬起
keydown & keyup
<input type="text">
<script>
$(function () {
$(window).keydown(function (event) {
console.log('键盘摁下了')
console.log(event.keyCode);
//空格 32 enter 13 esc 27
//不同的按键可以做不同的事件
switch (event.keyCode) {
case 32:
//摁下空格了
console.log('空格键触发了');
break;
case 13:
//摁下回车键
console.log('回车键触发了');
break;
default:
console.log('撤销键触发了');
break;
}
})
</script>
10 文档加载事件
ready
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
//方法一
$(document).ready(function () {
$('.box').click(function () {
$(this).css('color','red');
})
})
//方法二
$(function () {
$('.box').click(function () {
$(this).css('color', 'red');
})
})
</script>
</head>
<body>
<div class="box">刘大帅</div>
</body>
</html>
11 监听窗口滚动事件
scroll
<style>
*{
margin: 0;
padding: 0;
}
p{
position: absolute;
top: 200px;
}
body{
padding: 60px;
}
.fixHeader{
width: 100%;
height: 60px;
background-color: red;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
</style>
<body style="height: 2000px">
<div class="fixHeader"></div>
<div class="box"><p>刘大帅</p></div>
<script>
$(function () {
$(window).scroll(function () {
var offset = $('p').offset();
var scrollTop = $(this).scrollTop();
if (scrollTop>offset.top){
// $('.fixHeader').stop().show();
//关闭上一个动画在导航条出现（可设置时间ms）
// $('.fixHeader').stop().fadeIn();
//关闭上一个动画在导航条淡出现（可设置时间ms）
$('.fixHeader').stop().slideDown(1000);
//关闭上一个动画在导航条拉出来（可设置时间ms）
}else {
// $('.fixHeader').stop().hide();
//关闭上一个动画在导航条隐藏（可设置时间ms）
// $('.fixHeader').stop().fadeOut();
//关闭上一个动画在导航条淡隐藏（可设置时间ms）
$('.fixHeader').stop().slideUp(1000);
//关闭上一个动画在导航条拉隐藏（可设置时间ms）
}
})
})
</script>
</body>
12 表单事件
<form action="">
<input type="text">
<select name="" id="select">
<option value="a">a</option>
<option value="b">b</option>
</select>
<input type="submit">
</form>
<script>
//change() 当元素的值发生改变时，使用该方法（仅适用于文本input 包括textarea select）
//select()
//submit()
$(function () {
$('input[type=text]').change(function () {
// console.log('值发生变化了');
var val = $(this).val();
console.log(val);
if (/^/d{4}$/.test(val)){
console.log('输入正确');
$(this).css('borderColor','green');
}else {
console.log('输入错误');
$(this).css('borderColor','red');
}
})
$('#select').change(function () {
console.log($(this).val());
})
$('form').submit(function (event) {
//阻止form表单的提交行为（form表单就不会提交了）
event.preventDefault();
// console.log(111111111);
var val = $('input[type=text]').val();
var oVal = $('#select').val();
console.log(val,oVal);
//与后端发生交互性的行为
//封装了ajax 与后端发生交互的技术
})
})
</script>
13 冒泡事件
假设⽹网⻚页上有两个元素，其中⼀一个嵌套在另⼀一个元素⾥里里⾯面，并且都被绑定了了 click 事件。同时 元素上也绑定了了 click 事件，这样的话，点击最内层的元素，会触发三次 click 事件。这是因为 JavaScript 的事件冒泡机制。
在 jQuery 中，提供了了 stopPropagation() ⽅方法来停⽌止冒泡。
<div class="box" style="width: 200px;height: 200px;border: 1px solid red">
<h3 style="background-color: #ff6700">冒泡</h3>
</div>
<script>
$(function () {
$('.box').click(function () {
alert('父元素点击了');
return false;
//相当于event.stopPropagation();还能阻止默认的跳转行为
})
$('h3').click(function (event) {
//阻止冒泡
event.stopPropagation();
alert('子元素点击了');
})
$(document).click(function () {
alert('文档被点击了');
})
})
</script>
应用
<style>
*{
padding: 0;
margin: 0;
}
.slideDownView{
width: 100%;
height: 400px;
background-color: #ff6700;
position: fixed;
top: 0;
left: 0;
display: none;
}
.slideDownView ul li{
display: inline-block;
width: 100px;
height: 40px;
background-color: blueviolet;
line-height: 40px;
text-align: center;
}
.slideDownView ul li a{
display: block;
width: 100px;
height: 40px;
color: #fff;
}
</style>
<a href="#" class="changefu">换肤</a>
<div class="slideDownView">
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">游戏</a></li>
</ul>
</div>
<script>
$(function () {
$('.changefu').click(function (event) {
//阻止a标签的默认行为
event.preventDefault();
event.stopPropagation();
$('.slideDownView').slideDown(500);
$('.slideDownView ul li a').click(function (event) {
event.preventDefault();
event.stopPropagation();
$(this).css('color','red').parent().siblings('li').children().css('color','#fff');
})
})
$('.slideDownView,ul').click(function () {
return false;
})
$(document).click(function () {
$('.slideDownView').stop().slideUp(500);
})
})
</script>
14 阻止默认事件
网页中有自己的默认行行为，例例如单击超链接会跳转，单击“提交”按钮后表单会提交，有时需要阻止默认行行为。jQuery 提供了了 preventDefault() 方法来阻止元素的默认行行为。
15 事件对象属性
event.type 获取到事件的类型
event.preventDefault() 阻⽌止默认的事件⾏行行为
stopPropagation() 阻⽌止事件冒泡
event.tagent() 获取到触发事件的元素
event.relatedTarget()mousover 和 mouseout 所发⽣生的元素
event.pageX event.pageY获取到光标相对于⻚页⾯面的 x坐标和 y 坐标
event.which()⿏鼠标单击事件中获取到的左、中、右键，在键盘事件中获取键盘的按键
event.metaKey() 为键盘事件获取 ctrl 键
16 移除事件
unbind([type],[data])
第⼀一个参数是事件类型，第⼆二个参数是要移除的函数。如果没有参数，则删除所有的绑定事件
17 one方法
对于只要触发⼀一次，随后要⽴立即解除绑定的情况， jQuery提供了了 one() ⽅法。 当处理理函数触发⼀一次后，⽴立即被删除。
18 合成事件
jQuery 中有两个合成事件， hover() toggle()
hover(fn1,fn2,…fnN) 方法用于模拟光标悬停事件，当光标移动到元素上时，会触发第⼀一个函数（mouseenter），当光标移出这个元素时会触发第二个函数（mouseleave）
toggle() 方法用于模拟⿏鼠标的连续点击事件，第一次单击元素，触发第一个函数，第二次单击同一个元素，会触发第二个函数，如果有更更多的函数，则依次触发，直到最后一个。
<button id="btn">隐藏</button>
<div class="box" style="width: 200px;height: 200px;background: red"></div>
<script>
$(function () {
/*$('.box').mouseenter(function () {
$(this).stop().css('background','green');
})
$('.box').mouseleave(function () {
$(this).stop().css('background','red');
})*/
//合成事件相当于mouseenter和mouseleave
$('.box').hover(function () {
$(this).css('background','green');
},function () {
$(this).css('background','red');
})
var isShow = true;
$('#btn').click(function () {
/*if (isShow){
$('.box').stop().hide();
$(this).text('显示');
isShow = false;
}else {
$('.box').stop().show();
$(this).text('隐藏');
isShow = true;
}*/
$('.box').toggle();
})
})
</script>
19 事件委派
<ul>
<li>123</li>
<li>234</li>
<li>345</li>
</ul>
<button class="add">添加</button>
<script>
//事件委派
$('ul').on('click','li',function () {
console.log($(this).html());
})
//动态添加标签
$('.add').click(function () {
$('ul').append('<li>456</li>');
})
</script>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/279154.html