2.03.24jQuery的事件处理
1.事件类型
- jq常见的事件类型:
- click
- mouseenter
- mouseleave
- keydown
- keyup
- keypress
- focus
- blur
- change
- jq封装的事件是个函数,调用时事件函数通过传参的方式给予到jq对象
- 比如:
//jq:
$(".box").click(function(){ })
//js:
dom.onclick = function(){ }
2.事件绑定
- click事件
<style>
.box {
width: 100px;
height: 120px;
background-color: #ccc;
font-size: 30px;
cursor: pointer;
}
</style>
<div class="box">0</div>
<script src='./jquery/jquery-3.6.0.min.js'></script>
<script>
// 需求:
// 点击盒子,计数器变量增一
// 编码:
// 定义计数器变量
var count = 0 ;
// 给.box标签绑定点击事件(此处不需要使用on,也不需要使用等于号 =)
$(".box").click(function(){
count ++;
// 设置盒子的文本
// $(".box").text(count);
// console.log(this);// 事件调用者 原生dom对象
// console.log($(this));// 事件调用者 jquery对象
$(this).text(count);
})
</script>
- 注意jq绑定事件函数的this
- jq绑定事件函数的 this 是 事件调用者 原生dom对象
- jq绑定事件函数的$(this) 是 事件调用者 jquery对象
- focus
- blur
- change
- 等价于oninput的写法,没有oninput这个事件
<input type="text" placeholder="请输入" class="inp">
<select id="selectBox">
<option value="0">选择城市</option>
<option value="gz">广州市</option>
<option value="sz">深圳市</option>
<option value="mm">茂名市</option>
<option value="zh">珠海市</option>
</select>
<script src='../../jq/jquery-3.6.0.min.js'></script>
<script>
// 表单事件
// focus
$(".inp").focus(function(){
// 输入框获取焦点 设置背景色黄色
$(this).css("background","yellow")
})
// blur
$(".inp").blur(function(){
// 输入框失去焦点 设置背景色白色
$(this).css("background","white")
})
// change
$("#selectBox").change(function(){
// $(this) 是jquery对象,是change函数的调用者
var city = $(this).val();
console.log("参数:",city);
})
// oninput
// $(...).input is not a function
// $(".inp").input(function(){});// 不存在这个函数 所以报错
// 正确写法
$(".inp").on('input',function(){
var v = $(this).val()
console.log(v);
})
</script>
3.事件对象
- 原生事件对象event与jq事件对象对象的event不完全一样,但常用的event对象的属性的拼写是一样的,可以把它当原生event一样使用,使用过程中遇到问题,可以打印一下jq事件对象event看一看
<div class="container" style="width: 100px;height: 100px;background-color: blanchedalmond;"></div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
// 给.container标签绑定鼠标移动事件
$(".container").mousemove(function(event){
console.log(event);
var _type = event.handleObj.origType;
console.log(_type);
console.log(event.pageX,event.pageY);
})
</script>
4.事件委托
<div class="layout">
<a class="link-item" href="/login">登录</a>
<a class="link-item" href="/register">注册</a>
<div class="container" style="width: 100px;height: 100px;background-color: blanchedalmond;"></div>
</div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
$(".link-item").click(function(event){
// 阻止浏览器默认行为(此处禁止链接跳转)
// return false;
// 调用事件对象提供的方法, 阻止浏览器默认行为
event.preventDefault();
// 阻止事件冒泡
//event.stopPropagation();
console.log("a");
})
$(".layout").click(function(){
console.log("div");
})
- jq对象.bind
- 从 jQuery 3.0 开始,.bind()已弃用。不鼓励使用它,因为他被改成什么样不可知,在不同版本有不同的功能。
- bind可以给当前元素及其指定的子元素绑定事件
<div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">
<button class="btn-1">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
</div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
$(".container").bind("click","button",function(event){
console.log(event.target);
})
$(".test").click(function(event){
event.stopPropagation();
console.log("test");
})
$(".test").click(function(event){
console.log("test2");
})
</script>
<div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">
<button class="btn-1">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
</div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
// bind 绑定事件(可以绑定多个事件)
// $obj.bind(参数1,参数2)
$(".btn-1").bind("click mouseenter mouseleave",function(event){
// 获取事件类型
var _type = event.handleObj.origType;
console.log("触发事件类型:",_type);
})
</script>
- $obj.bind(参数1,参数2(可选),参数3)
<div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">
<button class="btn-1">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
</div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
// 可选参数:
//$obj.bind(参数1,参数2(可选),参数3)
$(".btn-1").bind("click mouseenter mouseleave",{x:100,y:100},function(event){
// 获取事件类型
var _type = event.handleObj.origType;
console.log("触发事件类型:",_type);
// 打印参数2(可选参数)
console.log(event.data);
})
</script>
<div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">
<button class="btn-1">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
</div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
$(".container").bind("click","button",function(event){
console.log(event.target);
})
//这里后面添加的button元素也被绑定了上面的click事件
var str = '<button>按钮+</button>';
$(".container").append(str);
</script>
- jq对象.delegate
- 从 jQuery 3.0 开始,.delegate()已弃用,不鼓励使用它,因为他被改成什么样不可知,在不同版本有不同的功能。
<div class="container " style="width: 100px;height: 200px;background-color: blanchedalmond;">
<ul >
<li><button>按钮1</button></li>
<li><button>按钮2</button></li>
<li><button>按钮3</button></li>
</ul>
</div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
// $obj.delegate(参数1,参数2,参数3)
// $obj.delegate(选择器,事件类型,回调函数)
$(".container").delegate("button","click",function(){
console.log(this);//事件源
})
// 可以动态创建按钮,新创建的按钮也具有上面绑定的事件
var str = '<li><button>按钮4</button></li>';
$(".container ul").append(str);
//只能给只能指定的元素添加事件,不能给元素本身添加
</script>
- jq对象.on
- 建议使用该方法,不使用上面两个方法
- 只能给指定的元素绑定事件,不能给自身绑定事件
- 可以绑定多个事件
- 能动态绑定事件
<div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">
<button class="btn-1">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
</div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
//只能给指定的元素绑定事件,不能给自身绑定事件
$(".container").on("click","button",function(event){
console.log(event.target);
})
//可以绑定多个事件
$(".container").on("click mouseenter",".test",function(event){
console.log("test");
})
//能动态绑定事件
var str = '<button>按钮+</button>';
$(".container").append(str);
</script>
5.jq对象与原生dom的相互转化
<div class="box" style="width: 100px;height: 100px;background-color: red;"></div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
var dom = document.querySelector(".box");
console.log(dom); // <div class="box"></div>
var $obj = $(".box");
console.log($obj); //jquery对象
//元素对象转jq对象
var dom_$obj=$(dom);
console.log(dom_$obj);//jquery对象
//jq对象转元素对象
var $obj_dom=$obj[0];
console.log($obj_dom);// <div class="box"></div>
var $obj_dom=$obj.get(0);
console.log($obj_dom);// <div class="box"></div>
</script>
6.jq隐式遍历的特点
- 这里列举css方法有隐式遍历的功能
- 还有addClass,removeClass,toggleClass,hasClass等也有隐式遍历的特点
- 例子1:
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script src='./jquery/jquery-3.6.0.min.js'></script>
<script>
// 需求:
// 设置5个按钮的背景色
// JQ:
$("button").css("backgroundColor","deepskyblue");
// JS:
// var buttons = document.querySelectorAll("button");
// for(var i = 0 ; i < buttons.length ; i ++){
// buttons[i].style.backgroundColor = "yellowgreen";
// }
// 总结:
// jquery获取元素,返回的是jquery对象
// css 方法是由jquery对象调用
// css 方法封装过程,已经对获取的元素进行了遍历
// jq其中一个特点:隐式迭代(函数封装,内部循环)
</script>
- 例子2:
<style>
ul {
width: 900px;
height: 100px;
display: flex;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
width: 120px;
height: 40px;
border: 1px solid #ccc;
margin: 0 5px;
cursor: pointer;
text-align: center;
line-height: 40px;
}
</style>
<ul class="nav-list">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
<script src="../jquery/jquery-3.6.0.min.js"></script>
<script>
// 描述:
// 当前点击的标签设置高亮(字体、背景、边框),不是当前点击的标签移除高亮
// 编码:
// jquery
// 获取元素并且绑定事件
$(".nav-list").on('click','li',function(){
// console.log(this);// 事件源
// console.log($(this));// 事件源对应的jquery对象
// $(this).css().siblings() 获取除了当前点击的标签以外的兄弟元素
$(this)
.css( "backgroundColor","yellowgreen")
.siblings()
.css("backgroundColor","white")
})
</script>
<script>
// 编码:
// javascript
var items = document.querySelectorAll(".nav-list li");
// 循环标签数组
for(var i = 0 ; i < items.length ; i ++){
items[i].onclick = function(){
// 排他思想
for(var j = 0 ; j < items.length ; j ++){
items[j].style.backgroundColor = "white";
}
// 设置当前点击的标签高亮
// this 在当前函数作用域(事件调用者)
this.style.backgroundColor = "deepskyblue";
}
}
</script>
7.jq链式编程的特点
- 像上面的例子中的 “$(this).css( “backgroundColor”,“yellowgreen”).siblings().css(“backgroundColor”,“white”)” 就是链式编程
- 例子:
<style>
button {
border: 1px solid #ccc;
padding: 15px 20px;
}
</style>
<button>按钮1</button>
<button>按钮2</button>
<button class="btn-demo">按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
$(".btn-demo").css("backgroundColor","red").css("color","white").siblings("button").css("borderRadius","20px");
</script>
- 模仿jq的链式编程的特点去封装自己的jq
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQ 学习 </title>
<style>
button {
border: 1px solid #ccc;
padding: 15px 20px;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button class="btn-demo">按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script src='./jquery/jquery-3.6.0.min.js'></script>
<script>
// jQuery的链式编程:
// $(".btn-demo").css("backgroundColor","red").css("color","white").siblings("button").css("borderRadius","20px")
// 自定义工具
// ====================================
// 定义构造函数
var Foo = function(selector){
this.element = document.querySelector(selector);
this.arr = [this.element]
}
Foo.prototype.css = function(prop,value){
// 判断数组是否有值
if(this.arr.length != 0 ){
for(var i = 0 ; i < this.arr.length ; i ++){
// 设置css属性和属性值
this.arr[i].style[prop] = value;
}
}
// 实现链式编程,需要该实例对象,可以返回当前函数作用域的this
// 这是实现链式编程的关键代码
return this;
}
Foo.prototype.siblings = function(){
var el = this.element.parentElement;
var elements = el.children;
this.arr = [];
for(var i = 0 ; i < elements.length ; i ++){
if(elements[i] == this.element){
// 跳出当前这个循环
continue;
}
this.arr.push(elements[i]);
}
// 这是实现链式编程的关键代码
return this;
}
// 原生JS实现链式编程
function myjQuery(selector){
// 返回一个构造函数的实例对象(属性和方法)
return new Foo(selector);
}
window.myjQuery = window._ = myjQuery;
// =====================================
// 自定义的myjQuery函数,实现链式编程的操作
_(".btn-demo").css("backgroundColor","red").css("color","white").siblings().css("borderRadius","20px")
</script>
</body>
</html>
- 链式编程的特点是:在函数调用完成后得return一个this,即return jq对象本身