目录
1. jQuery事件注册
单个事件注册
其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。
2. jQuery事件处理
1)事件处理 on() 绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
- events:一个或多个用空格分隔的事件类型,如click或keydown
- selector:元素的子元素选择器
- fn:回调函数,即绑定在元素身上的侦听函数
优势:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.current {
background-color: antiquewhite;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
<ol>
</ol>
<script>
$(function() {
//1.单个事件注册
// $("div").click(function() {
// $(this).css("background", "red");
// });
// $("div").mouseenter(function() {
// $(this).css("background", "blue");
// });
// $("div").mouseleave(function() {
// $(this).css("background", "green");
// });
//2.事件注册on
//可以绑定多个事件,多个事件处理多个程序
// $("div").on({
// click: function() {
// $(this).css("background", "red");
// },
// mouseenter: function() {
// $(this).css("background", "blue");
// },
// mouseleave: function() {
// $(this).css("background", "green");
// }
// });
//事件处理程序相同
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
//3.on实现事件委托
//click是绑定在ul身上的,但是触发的对象是li,冒泡把事件委托给ul
$("ul").on("click", "li", function() {
//点击了li之后,ul才会显示出警示框
alert(11);
})
//4.on可以给未来动态创建的元素绑定事件
//点击li之后无反应
// $("ol li").click(function() {
// alert(11);
// });
//但是点击on绑定的事件,点击li就会弹出警示框
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>创建li</li>");
$("ol").append(li);
});
</script>
</body>
结果为:
2)事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
如果有的事件指向触发一次,可以使用one()来绑定事件。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
$("div").on({
"click": function() {
console.log("点击");
},
"mouseover": function() {
console.log("鼠标经过");
}
});
$("ul").on("click", "li", function() {
alert(11);
});
//1.事件解绑off
//解绑了div身上的所有事件
// $("div").off();
//只解除div身上的点击事件
$("div").off("click");
//解除事件委托
$("ul").off("click", "li");
//2.one():只能触发事件一次
$("p").one("click", function() {
alert(11);
});
})
</script>
</head>
<body>
<div></div>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<p>ppp</p>
</body>
结果为:
3)自动触发事件trigger()
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<input type="text">
<script>
$(function() {
$("div").on("click", function() {
alert(11);
});
$("input").on("focus",function() {
$(this).val("123");
});
//1.元素.事件():会触发元素的默认行为
// $("div").click();
//2.元素.trigger(“事件”):会触发元素的默认行为
// $("div").trigger("click");
//输入框会有光标闪烁
// $("input").trigger("focus");
//3.元素.triggerHandler(“事件”):不会触发元素的默认行为
$("div").triggerHandler("click");
//输入框不会有光标闪烁
$("input").triggerHandler("focus");
})
</script>
</body>
结果为:
3. jQuery事件对象
事件被触发,就会有事件对象的产生。
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
});
$("div").on("click", function(e) {
console.log("点击了div");
//阻止冒泡
e.stopPropagation();
});
});
</script>
</body>
结果为: