鼠标事件
click():单击事件
dblclick():双击事件
mousedown():鼠标点击事件
mouseup():鼠标释放事件
click事件就是由mousedown和mouseup两个动作构成,所有click事件需要鼠标松手后执行
mousemove():鼠标移动事件,每当鼠标移动到jQuery对象每一像素都会执行
mouseover():鼠标移入事件,当鼠标移动到元素上就会执行事件,子元素也会触发
mouseout():鼠标移出事件,当鼠标移动出元素时就会执行事件
mouseenter():(IE专用)只有在鼠标指针移动到被选元素时,才会触发 mouseenter 事件。
mouseleave():(IE专用)只有在鼠标指针穿过被选元素时,才会触发mouseleave事件。
mouseover、mouseenter、mousemove区别
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
p{
height: 50px;
border: 1px solid red;
margin: 30px;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.mouseover()方法</h2>
<div class="left">
<div class="aaron1">
<p>鼠标离开此区域触发mouseover事件</p>
<a>mouseover事件触发次数:</a><br/>
<a>mouseover冒泡事件触发次数:</a>
</div>
</div>
<h2>.mouseenter()方法</h2>
<div class="right">
<div class="aaron2">
<p>鼠标进入此区域触发mouseenter事件</p>
<a>mouseenter事件触发次数:</a><br/>
<a>mouseenter冒泡事件触发次数:</a>
</div>
</div>
<br/>
<h2>.mousemove()方法</h2>
<div class="left">
<div class="aaron3">
<p>鼠标进入此区域触发mousemove事件</p>
<a>mousemove事件触发次数:</a><br/>
<a>mousemove冒泡事件触发次数:</a>
</div>
</div>
<script type="text/javascript">
var a1 = 0;
$(".aaron1 p").mouseover(function(e) {
$(".aaron1 a:first").html('mouseover事件触发次数:' + (++a1))
})
var a2 = 0;
$(".aaron1").mouseover(function() {
$(".aaron1 a:last").html('mouseover冒泡事件触发次数:' + (++a2))
})
</script>
<script type="text/javascript">
var b1 = 0;
$(".aaron2 p").mouseenter(function(e) {
$(".aaron2 a:first").html('mouseenter事件触发次数:' + (++b1))
})
var b2 = 0;
$(".aaron2").mouseenter(function() {
$(".aaron2 a:last").html('mouseenter冒泡事件触发次数:' + (++b2))
})
</script>
<script>
var c1 = 0;
$(".arron3 p").mousemove(function() {
$(".aaron3 a:first").html("mousemove事件触发次数:" + (++c1))
});
var c2 = 0;
$(".aaron3").mousemove(function() {
$(".aaron3 a:last").html('mousemove冒泡事件触发次数:' + (++c2))
})
</script>
</body>
</html>
hover(进入事件、离开事件):鼠标进入元素/鼠标离开元素所执行的事件。
focusin():聚焦事件。
focusout():失焦事件。
表单事件
blur():当元素失去焦点时执行事件。
focus():当元素获得焦点时执行事件。
blur、focus 不支持冒泡,focusin、focusout 支持冒泡。
change():input元素会监听value值的变化,当有所改变,失焦后就会触发事件;select元素鼠标做出选项即会触发时间;
textarea元素同input一样。
select():只能用于input元素和textarea元素,元素内容被选择时触发事件。
submit():表单提交事件
冒泡事件
顾名思义冒泡时间就跟冒泡一样是一连串发生的,也就是说在页面上可以有多个事件,也可以是多个元素响应到有个事件。比如说,在网页上有 两个元素,其中一个元素嵌套在另一个元素上,并且都绑定了一个事件,当你触发其中的一个内嵌事件的时候,js会执行两个事件结果,而且这个结果是按照一定的顺序来执行的响应事件的。之所以称之为冒泡,是因为事件会按照一定的层次结果像是冒泡一样不断向上直至顶端。
例如:
<BODY onclick="alert('aaa');">
<div onclick="alert('bbb');">
<a href="#" class="cooltip" title="这是我的超链接提示1。" onclick="alert('ddd');">
提示
</a>
</div>
</BODY>
上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是:a --> div --> body 。a冒泡到div冒泡到body。
键盘事件
keydowm():当用户按下键盘键时,就会触发事件。
keyup():当用户松开键盘键时,就会触发事件。
keypress():与keydown类似,当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。
keypress事件与keydown和keyup的主要区别
- 只能捕获单个字符,不能捕获组合键
- 无法响应系统功能键(如delete,backspace)
- 不区分小键盘和主键盘的数字字符
总而言之,
KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。
事件绑定与解绑
on( events ,[ selector ] ,[ data ] ):事件绑定。
最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
//快捷方式
$(".btn1").click(function() {})
// on方法
$(".btn1").on("click",function() {})
// 多事件单函数
$(".btn").on("mouseout mouseover", function(){})
//多事件多函数
$(".btn").on({
mouseout : function(){},
mouseover : function(){}
})
on()的高级用法--事件机制委托的机制
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
$("div").on("click","p",fn)
off():卸载事件。
事件对象的使用
event.target:代表当前触发事件的元素。
event.type:获取事件的类型
event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标
event.preventDefault() 方法:阻止默认行为
event.stopPropagation() 方法:阻止事件冒泡
event.which:获取在鼠标单击时,单击的是鼠标的哪个键(左键报告1,中间键报告2,右键报告3)
event.currentTarget : 在事件冒泡过程中的当前DOM元素
this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用;
自定义事件
trigger(事件名,[可选参数]):能触发任何事件,但没有事件源对象,即事件对象event无法完美的实现,并且会在DOM树上冒泡。
.triggerHandler():触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件。