jQuery【事件处理器、鼠标事件、表单事件、键盘事件、浏览器事件、事件对象、jQuery遍历】(三)-全面详解（学习总结---从入门到深化）

事件之绑定事件处理器

事件之鼠标事件

事件之表单事件

事件之键盘事件

事件之浏览器事件

事件对象

jQuery遍历

事件之绑定事件处理器

1、 .on()
在选定的元素上绑定一个或多个事件处理函数

$("#button").on("click", function(event){console.log("事件处理器")
});

事件委托

$("#ul").on("click", "li", function(event){console.log($(this).text());
});

2、.one()
为元素的事件添加处理函数。处理函数在每个元素上每种事件类型
最多执行一次

$("#btn").one("click", function() {console.log("这是一个只能触发一次的事件.");
});

3、.off()
移除一个事件处理函数，移除on事件处理器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><button id="btn1">添加事件按钮</button><button id="btn2">删除事件按钮</button><button id="btn3">按钮</button><script>function aClick() {console.log("点击事件")}$("#btn1").on("click",function () {$("#btn3").on("click", aClick);});$("#btn2").on("click",function () {$("#btn3").off("click", aClick);});</script>
</body>
</html>

事件之鼠标事件

1、 .click()
为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 "click" 事件

$("#btn").click(function() {alert("点击事件");
});

2、.hover()
将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行

$("li").hover(// 滑入function () {console.log("滑入")},// 滑出function () {console.log("滑出")}
);

3、.mouseenter()
鼠标进入事件

$("div").mouseenter(function(){console.log("鼠标进入事件");
})

4、.mouseleave()
鼠标离开事件

$("div").mouseleave(function(){console.log("鼠标进入事件");
})

5、.mousemove()
鼠标滑动事件

$("div").mousemove(function(){console.log("鼠标进入事件");
})

6、.mouseover()
鼠标进入事件（注：支持事件冒泡）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>.container{width: 200px;height: 200px;background-color: red;}.box{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="container"><div class="box"></div></div><script>$(".container").mouseover(function(){console.log("鼠标进入事件container");})$(".box").mouseover(function(){console.log("鼠标进入事件box");})</script>
</body>
</html>

7、.mouseout()
鼠标离开事件（注：支持事件冒泡）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>.container{width: 200px;height: 200px;background-color: red;}.box{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="container"><div class="box"></div></div><script>$(".container").mouseout(function(){console.log("鼠标离开事件container");})$(".box").mouseout(function(){console.log("鼠标离开事件box");})</script>
</body>
</html>

事件之表单事件

1、.focus()
为 JavaScript 的 "focus" 事件绑定一个获取焦点处理函数，或者触发元素上的 "focus" 事件

$('#input').focus(function() {alert('获得焦点事件');
});

2、.blur()
为 "blur" 事件绑定一个失去焦点处理函数

$('#other').click(function() {$('#target').blur();
});

3、.change()
为JavaScript 的 "change" 事件绑定一个表单改变处理函数

$('.target').change(function() {alert('内容改变');
});

4、.submit()
当用户提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在 <form> 元素上

$('#target').submit(function() {alert('表单提交事件');
});

事件之键盘事件

1、 .keydown()
添加键盘按下事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><input type="text" class="username"><script>$(".username").keydown(function(){console.log("键盘");})</script>
</body>
</html>

2、.keypress()
添加键盘事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><input type="text" class="username"><script>$(".username").keypress(function(){console.log("键盘");})</script>
</body>
</html>

3、.keyup()
添加键盘抬起事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><input type="text" class="username"><script>$(".username").keyup(function(){console.log("键盘");})</script>
</body>
</html>

事件之浏览器事件

1、.resize()
添加浏览器窗口发生变化触发事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><script>$(window).resize(function(){console.log("改变浏览器尺寸");})</script>
</body>
</html>

2、.scroll()
浏览器滚动事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><script>$(window).scroll(function(){console.log("滚动");})</script>
</body>
</html>

事件对象

1、event.type
获取事件类型

$("#btn").click("click",function(e){console.log(e.type);
})

2、event.target
获取当前元素对象

$("#btn").click("click",function(e){console.log(e.target);
})

3、event.currentTarget
获取当前元素对象

温馨提示
target：指向触发事件元素
currentTarget：指向添加事件的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div id="container"><button id="btn">按钮</button></div><script>$("#container").click("click",function(e){console.log("container",e.currentTarget);console.log("container",e.target);})$("#btn").click("click",function(e){console.log("btn",e.currentTarget);console.log("btn",e.target);})</script>
</body>
</html>

4、event.preventDefault()
如果调用这个方法，默认事件行为将不再触发。

<a href="https://itxiaotong.com">itxiaotong</a>
<script>$("a").click("click",function(e){e.preventDefault();})
</script>

5、event.stopPropagation()
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script><style>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div><button>按钮</button></div><script>$("div").click("click",function(e){console.log("div");})$("button").click("click",function(e){e.stopPropagation();console.log("button");})</script>
</body>
</html>

jQuery遍历

1、 .map()
通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul><script>$("li").map(function(index,ele){console.log(index,ele);})</script>
</body>
</html>

2、.each()
遍历一个jQuery对象，为每个匹配元素执行一个函数

$("li").each(function(index,ele){console.log(index,ele);
})

温馨提示
each和map的返回值不同，map返回一个新的数组，each返回原始数组

3、 .get()
通过jQuery对象获取一个对应的DOM元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul><script>var li = $("li").get(0);li.innerHTML = "新的列表"</script>
</body>
</html>