前端基础-jQuery的事件的用法
阅读目录
一、常用事件
1、鼠标事件之click事件
用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。
这两个方法的用法是类似的，下面以click()事件为例
使用上非常简单：
方法一：$ele.click()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").click(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").click() //手动指定触发事件
});
方法二：$ele.click( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素
<div id="test">点击触发<div>
$("#test").click(function() {
//this指向 div元素
});
方法三：$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
2、键盘事件之keydown()与keyup()事件
鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件，将用户行为分解成2个动作，
键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听
keydown事件：
当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法
//直接绑定事件 $elem.keydown( handler(eventObject) ) //传递参数 $elem.keydown( [eventData ], handler(eventObject) ) //手动触发已绑定的事件 $elem.keydown()
keyup事件：
当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的
注意：
- keydown是在键盘按下就会触发
- keyup是在键盘松手就会触发
- 理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，
- 但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。
<h2>keydown()与keyup()事件</h2>
<div class="left">
<h4>测试一</h4>
<div class="aaron">监听keydown输入:
<input class="target1" type="text" value="" /><br />
按下显示输入的值:<em></em>
</div>
<h4>测试二</h4>
<div class="aaron">监听keyup输入:
<input class="target2" type="text" value="" /><br />
松手显示输入的值:<em></em>
</div>
</div>
<script type="text/javascript">
//监听键盘按键
//获取输入的值
$('.target1').keydown(function(e) {
$("em:first").text(e.target.value)
});
//监听键盘按键
//获取输入的值
$('.target2').keyup(function(e) {
$("em:last").text(e.target.value)
});
</script>
3、鼠标事件之hover事件
jQuery直接提供了一个hover方法，可以便捷处理。只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
- handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
!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">
<title>hover示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
width: 100%;
background-color: #3d3d3d;
position: fixed;
top: 0;
}
.nav ul {
list-style-type: none;
line-height: 40px;
}
.nav li {
float: left;
padding: 0 10px;
color: #999999;
position: relative;
}
.nav li:hover {
background-color: #0f0f0f;
color: white;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.son {
position: absolute;
top: 40px;
right: 0;
height: 50px;
width: 100px;
background-color: #00a9ff;
display: none;
}
.hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>登录</li>
<li>注册</li>
<li>购物车
<p class="son hide">
空空如也...
</p>
</li>
</ul>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(".nav li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
4、鼠标事件之focusin事件
当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，
如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件
使用上非常简单：
方法一：$ele.focusin()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，一般用的比较少
<div id="test">点击触发<div>
$("ele").focusin(function(){
alert('触发指定事件')
});
方法二：$ele.focusin( handler )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">点击触发<div>
$("#test").focusin(function() {
//this指向 div元素
});
方法三：$ele.focusin( [eventData ], handler )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").focusin(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
<h2>.focusin()方法</h2>
<div class="left">
<div class="aaron">
点击聚焦：<input type="text" />
</div>
</div>
<div class="right">
<div class="aaron1">
点击聚焦并传递参数：<input type="text" />
</div>
</div>
<script type="text/javascript">
//input聚焦
//给input元素增加一个边框
$("input:first").focusin(function() {
$(this).css('border','2px solid red')
})
</script>
<script type="text/javascript">
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('网', fn)
}
a();
</script>
4、鼠标事件之focusout事件
当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，
jQuery提供了一个focusout事件
使用上非常简单：
方法一：$ele.focusout()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少
<div id="test">点击触发<div>
$("ele").focusout(function(){
alert('触发指定事件')
});
方法二：$ele.focusout( handler )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<div id="test">点击触发<div>
$("#test").focusout(function() {
//this指向 div元素
});
方法三：$ele.focusout( [eventData ], handler )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").focusout(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
<h2>.focusout()方法</h2>
<div class="left">
<div class="aaron">
点击触发失去焦点：<input type="text" />
</div>
</div>
<div class="right">
<div class="aaron1">
点击触发失去焦点并传递参数：<input type="text" />
</div>
</div>
<script type="text/javascript">
//input失去焦点
//给input元素增加一个边框
$("input:first").focusout(function() {
$(this).css('border','2px solid red')
})
</script>
<script type="text/javascript">
//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusout('网', fn)
}
a();
</script>
5、表单事件之blur与focus事件
我们学过了表单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件
6、表单事件之change事件
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
input元素
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素
多行文本输入框，当有改变时，失去焦点后触发change事件
change事件很简单，无非就是注意下触发的先后行为
<h2>input、textarea与select</h2>
<div class="left">
<div class="aaron">input：
<input class="target1" type="text" value="监听input的改变" />
</div>
<div class="aaron1">select：
<select class="target2">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</div>
<div class="aaron3">textarea：
<textarea class="target2" rows="3" cols="20">多行的文本输入控件</textarea>
</div>
</div>
输出结果：
<div id="result"></div>
<script type="text/javascript">
//监听input值的改变
$('.target1').change(function(e) {
$("#result").html(e.target.value)
});
//监听select：
$(".target2").change(function(e) {
$("#result").html(e.target.value)
})
//监听textarea：
$(".target3").change(function(e) {
$("#result").html(e.target.value)
})
</script>
7、表单事件之select事件
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
select事件只能用于<input>元素与<textarea>元素
使用上非常简单：
方法一：.select()
触发元素的select事件:
$("input").select();
方法二：$ele.select( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<input id="test" value="文字选中"></input>
$("#test").select(function() { //响应文字选中回调
//this指向 input元素
});
方法三：$ele.select( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<input id="test" value="文字选中"></input>
$("#test").select(11111,function(e) {//响应文字选中回调
//this指向 div元素
//e.data => 11111 传递数据
});
<h2>input与textarea</h2>
<div class="left">
<h4>测试一</h4>
<div class="aaron">
选中文字：input
<input type="text" value="多多帅" />
</div>
<button id="bt1">触发input元素的select事件</button>
<h4>测试二</h4>
<div class="aaron">
textarea：
<textarea rows="3" cols="20">用鼠标选中文字</textarea>
</div>
</div>
<script type="text/javascript">
//监听input元素中value的选中
//触发元素的select事件
$("input").select(function(e){
alert(e.target.value)
})
$("#bt1").click(function(){
$("input").select();
})
//监听textarea元素中value的选中
$('textarea').select(function(e) {
alert(e.target.value);
});
</script>
8、表单事件之submit事件
提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、
做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作
使用上非常简单，与基本事件参数处理保持一致
方法一：$ele.submit()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").submit(function(){
alert('触发指定事件')
})
$("#text").click(function(){
$("ele").submit() //指定触发事件
});
方法二：$ele.submit( handler(eventObject) )
绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<form id="target" action="destination.html">
<input type="submit" value="Go" />
</form>
$("#target").submit(function() { //绑定提交表单触发
//this指向 from元素
});
方法三：$ele.submit( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<form id="target" action="destination.html">
<input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //绑定提交表单触发
//data => 1111 //传递的data数据
});
通过在<form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为
具体能触发submit事件的行为：
- <input type="submit">
- <input type="image">
- <button type="submit">
- 当某些表单元素获取焦点时，敲击Enter（回车键）
上述这些操作下，都可以截获submit事件。
这里需要特别注意：
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为 传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可
jQuery处理如下：
$("#target").submit(function(data) {
return false; //阻止默认行为，提交表单
});
<h2>submit</h2>
<div class="left">
<div class="aaron">
<form id="target1" action="test.html">
回车键或者点击提交表单：
<input type="text" value="输入新的值" />
<input type="submit" value="Go" />
</form>
</div>
<div class="aaron">
<form id="target2" action="destination.html">
回车键或者点击提交表单,禁止浏览器默认跳转：
<input type="text" value="输入新的值" />
<input type="submit" value="Go" />
</form>
</div>
</div>
<script type="text/javascript">
//回车键或者点击提交表单
$('#target1').submit(function(e) {
alert('捕获提交表达动作,不阻止页面跳转')
});
//回车键或者点击提交表单,禁止浏览器默认跳转：
$('#target2').submit(function() {
alert('捕获提交表达动作,阻止页面跳转')
return false;
});
</script>
二、事件绑定
1、on()的多事件绑定
之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。
翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。
基本用法：.on( events ,[ selector ] ,[ data ] )
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离，传递不同的事件名，可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 天王盖地虎
}
$( "button" ).on( "click", {
name: "天王盖地虎"
}, greet );
可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的
<h2>on绑定多事件</h2>
<h4>测试一</h4>
<div class="left">
点击触发：on('click',fn)
<div id="test1"></div>
</div>
<script type="text/javascript">
//事件绑定一
$("#test1").on('click', function(e) {
$(this).text('触发事件：' + e.type)
})
</script>
<h4>测试二</h4>
<div class="left">
点击触发：on('mousedown mouseup')
<div id="test2"></div>
</div>
<script type="text/javascript">
//多事件绑定一
$("#test2").on('mousedown mouseup', function(e) {
$(this).text('触发事件：' + e.type)
})
</script>
<h4>测试三</h4>
<div class="right">
点击触发：on(mousedown:fn1,mouseup:fn2)
<div id="test3"></div>
</div>
<script type="text/javascript">
//多事件绑定二
$("#test3").on({
mousedown: function(e) {
$(this).text('触发事件：' + e.type)
},
mouseup: function(e) {
$(this).text('触发事件：' + e.type)
}
})
</script>
2、on()的高级用法
针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。
这些方法的底层实现部分 还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的
委托机制
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
在on的第二参数中提供了一个selector选择器，简单的来描述下
//参考下面3层结构
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
//给出如下代码：
$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，
那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
<h2>on事件委托</h2>
<div class="left">
<a>钱多多</a>
<div class="aaron">
<a>111</a>
<a>点击这里</a>
</div>
</div>
<script type="text/javascript">
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制，点击a元素的时候，事件触发
$('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
</script>
三、移除事件
1、卸载事件off()方法
- 通过.on()绑定的事件处理程序
- 通过off() 方法移除该绑定
根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。
当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
<h2>删除事件</h2>
<h4>测试一</h4>
<div class="left">
on('mousedown mouseup')
<div class="aaron">点击触发</div>
</div>
<button>点击删除mousedown事件</button>
<script type="text/javascript">
var n = 0;
//绑定事件
$(".aaron:first").on('mousedown mouseup', function(e) {
$(this).text( '触发类型:' + (e.type) + ",次数" + ++n)
++n;
})
//删除事件
$("button:first").click(function() {
$(".aaron:first").off('mousedown')
})
</script>
<h4>测试一</h4>
<div class="left">
on('mousedown mouseup')
<div class="aaron">点击触发</div>
</div>
<button>点击销毁所有事件off</button>
<script type="text/javascript">
var n = 0;
//绑定事件
$(".aaron:last").on('mousedown mouseup', function(e) {
$(this).text( '触发类型:' + (e.type) + ",次数" + ++n)
++n;
})
//删除事件
$("button:last").click(function() {
$(".aaron:last").off()
})
</script>
四、页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录注册示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name">
<span class="error"></span>
<label for="passwd">密码</label>
<input type="password" id="passwd">
<span class="error"></span>
<input type="submit" id="modal-submit" value="登录">
</form>
<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
function myValidation() {
// 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定义一个标志位，记录表单填写是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= 0 ){
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能为空");
flag = false;
}
});
// 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
return flag;
});
// input输入框获取焦点后移除之前的错误提示信息
$myForm.find("input[type!='submit']").on("focus", function () {
$(this).next(".error").text("");
})
}
// 文档树就绪后执行
$(document).ready(function () {
myValidation();
});
</script>
</body>
</html>
上一篇： node里使用supervisor
下一篇： 云计算能否成为巨大商业蛋糕