jQuery事件相关介绍
$(document).ready()和window.onload方法区别
- 执行时机不同
window.onload方法是在网页中的元素（包括元素的所有关联文件）完全加载到浏览器后执行，即JavaScript此时才可以访问网页中的任何元素。
$(document).ready()方法在DOM完全就绪时就可以被调用，无需等待元素的相关联文件下载完毕，可以大大提高程序的响应速度。 - 使用次数不同
window.onload时机一次只能保存一个函数的引用。
$(document).ready()方法每次调用都会在现有的行为上追加新的行为。
示例代码
<!--$(document).ready()和window.onload方法区别-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$()和window.onload区别</title>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
//1 执行时机的不同
/*window.function(){
alert($("img").width());
}; 加载完成执行*/
/*$(function () {
alert($("img").width());
});无需等待关联文件下载完毕，网速较慢可看到区别*/
//2 执行次数的不同
//window.onload时机一次只能保存一个函数的引用。最后的那个
//$(document).ready()方法每次调用都会在现有的行为上追加新的行为。
/*window.function () {
alert("hello1");
};
window.function () {
alert("hello2");
}; //结果是hello2*/
/*$(function () {
alert("hello1");
});
$(function () {
alert("hello2");
}); //hello1和hello2都会显示*/
</script>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546583479684&di=4c6ac15a06402177862dffee3b5e1757&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F95dab2448f56d804b5923549b17195a3b1902f11.png"/>
</body>
</html>
jQuery事件绑定
- 在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，语法如下
bind(type,[data],fn)
//type:事件类型 [data]:传递给处理函数的进行处理的额外数据 fn：用来绑定的处理函数
$("div").bind("click",function(){});//绑定一个事件
$("div").bind("mouseover mouseout"(),function(){});//同时绑定多个事件
- jQuery常用的事件类型
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
<style type="text/css">
table{
border: 0;
border-collapse: collapse;
}
td{
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th{
font:bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
/*偶数行样式*/
.even{
background: #fff38f;
}
/*奇数行样式*/
.odd{
background: #ffffff;
}
/*选中行样式*/
.selected{
background: #FF6500;
color: #fff;
}
/*悬浮时样式*/
.over {
background: green;
}
</style>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//1.分别给奇数行和偶数行加样式
$("tbody tr:odd").addClass("add");
$("tbody tr:even").addClass("even");
$("tbody tr:has([checked])").addClass("selected");
//bind:添加事件
$("tbody tr").bind("click",function () {
//如果之前没有加selected样式，则加样式
//如果之前已经加selected样式，则去掉
$(this).toggleClass("selected");
//如果有样式，则多选框选中，如果没有样式，多选框取消选中
var isSelected = $(this).hasClass("selected");
$(this).find("input").prop("checked",isSelected);
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>张三</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>李四</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input userId="${test.userId}" type="checkbox" name="choice" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tbody>
</table>
</body>
</html>
合成事件
hover()和toggle()
- hover()方法
hover(enter,leave);
//用于模拟光标悬停事件，当鼠标移到元素上的时候回触发enter函数，当鼠标离开元素的时候会触发leave函数
- toggle()方法
toggle([fn1],[fn2],[fn3]...);
//1 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件
//2 toggle()方法另一个功能是，显示的时候隐藏，隐藏的时候显示。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover和toggle</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#panel{
width: 300px;
border: 1px solid #0050D0;
}
.head{
height: 24px;
line-height: 24px;
text-indent: 10px;
background: #96E555;
cursor: pointer;
width: 100%;
}
.content{
padding: 10px;
text-indent: 24px;
border-top: 1px solid #0050D0;
display: none; /*隐藏*/
}
</style>
<script src="../scripts/jQuery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//多个事件
//移入和移出都执行这个匿名函数
/*$(".head").bind("mouseenter mouseout",function () {
//显示和隐藏切换
$(".content").toggle();
});*/
//移入执行第一个函数，移出执行第二个函数
$(".head").hover(function () {
$(".content").show(); //显示
},function () {
$(".content").hide(); //隐藏
});
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后 又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码， 做更多的事情。
它封装JavaScript常用的功能代码， 提供一种简便的JavaScript设计模式， 优化HTML文档操作、事件处理、动画设计和Ajax交互。
</div>
</div>
</body>
</html>
事件对象
- 在jQuery中使用事件对象非常简单，只需要为函数添加一个参数。
$("element").bind("click",function(event){ //event:事件对象
//函数对象语句
})
停止事件冒泡
- 使用event.stopPropagation()方法来停止事件冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>停止事件冒泡</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 300px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 220px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../scripts/jQuery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//为span元素绑定click事件
$("span").bind("click", function (event) {
var txt = $("#msg").html() + "<p>内存span元素被点击</p>";
$("#msg").html(txt);
//阻止冒泡
//方式一
//event.stopPropagation();
//方式二
//同时对元素停止事件冒泡和默认行为
return false;
});
//为div元素绑定click事件
$("#content").bind("click",function (event) {
var txt = $("#msg").html() + "<p>外层div元素被点击</p>";
$("#msg").html(txt);
//event.stopPropagation();
return false;
});
//为body元素绑定click事件
$("body").bind("click", function() {
var txt = $("#msg").html() + "<p>body元素被点击</p>";
$("#msg").html(txt);
});
});
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
</html>
阻止默认行为
- 使用event.preventDefault()方法来阻止元素的默认行为
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认行为</title>
<script src="../scripts/jQuery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//如果用户名为空，则提示用户名不能为空，并且不提交
//如果用户名不为空，则提交
$("#sub").bind("click",function(event){
var username = $("#username").val();
if(username.trim()==""){
//提示用户名不能为空
$("#msg").html("<span>用户名不能为空</span>");
//阻止默认行为
//方式一
//event.preventDefault();
//方式二
return false;
}
});
});
</script>
</head>
<body>
<form action="http://www.harmonyWin.com">
用户名：<input type="text" id="username"> <br/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>
同时对元素停止事件冒泡和默认行为
常用的事件对象属性
- event.type:用于获取到事件类型，比如click等。
- event.target:用于获取到事件触发的元素。
- event.pageX:获取到光标相对于页面x的坐标。
- event.pageY:获取到光标相对于页面y的坐标。
- event.which:获取鼠标的左、中、右键，分别为1、2、3。
- event.metaKey:键盘事件中获取安静。
移除事件
语法
unbind([type],[data]);
//1. 如果没有参数，则删除所有的绑定事件。
//2. 如果提供了事件类型作为参数，则只删除该类型的绑定事件。
//3. 如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数被删除。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解除绑定事件</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../scripts/jQuery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").bind("click",myfun1=function () {
$("#test").append("<p>我的绑定函数1-click</p>");
}).bind("mouseout",myfun2=function () {
$("#test").append("<p>我的绑定函数2-mouseout</p>");
}).bind("click", myfun3=function () {
$("#test").append("<p>我的绑定函数3-click</p>")
});
$("#del1").click(function () {
//移除所有事件
$("#btn").unbind();
});
$("#del2").click(function () {
//删除指定类型的事件
$("#btn").unbind("mouseout");
});
$("#del3").click(function () {
$("#btn").unbind("click", myfun3);
});
});
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="del1">删除所有事件</button>
<button id="del2">删除mouseout事件</button>
<button id="del3">删除处理函数是myfun3的事件</button>
</body>
</html>
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
