前端基础-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>

实例

转载于:https://www.cnblogs.com/ManyQian/p/9163257.html