jquery事件之事件


事件名


说明


语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器)


blur()


获得失去鼠标光标焦点事件

jQueryObject.blur( [ [ data ,]  handler ] )

change()


在文本内容或选项被更改时触发。该事件仅适用于<input type="text">和<textarea>以及<select>

jQueryObject.change( [ [ data ,]  handler ] )

click()


事件就是鼠标按钮单击事件

jQueryObject.click( [ [ data ,]  handler ] )

dblclick()


鼠标左键双击事件。

jQueryObject.dblclick( [ [ data ,]  handler ] )

error()


在js发生错误或资源加载失败时触发。该事件主要用于window对象、<img>等元素。

jQueryObject.error( [ data ,]  handler )

focus()


获得鼠标光标焦点事件,(与blur()相反)

jQueryObject.focus( [ [ data ,]  handler ] )

focusin()


获得焦点事件。与focus事件不同的是:focusin可以检测该元素的后代元素获得焦点的情况

jQueryObject.focusin( [ [ data ,]  handler ] )

focusout()


失去焦点事件。与blur事件不同的是:focusout可以检测该元素的后代元素获得焦点的情况

jQueryObject.focusout( [ [ data ,]  handler ] )

keydown()

 会在按下键盘按键时触发。它与keypress事件类似,但keypress着重的是按下该键输入了哪个字符,按下任何键都可触发keydown)。
jQueryObject.keydown( [[ data ,]  handler ] )
 keypress()  按下键盘按键时触发。它与keydown事件类似,但keypress着重的是按下该键输入了哪个字符    jQueryObject.keypress( [[ data ,]  handler ] )
 keyup()  按下键盘按键并释放时触发    jQueryObject.keyup( [[ data ,]  handler ] )
mousedown() 在鼠标按钮被按下时触发。(无需释放)
jQueryObject.mousedown( [[ data ,]  handler ] )
mouseup() 在鼠标按钮被释放时触发。
jQueryObject.mouseup( [ [ data ,]  handler ] )
mouseenter() 在鼠标进入某个元素时触发。只会在鼠标进入当前元素时触发
jQueryObject.mouseenter( [[ data ,]  handler ] )
 mouseleave()  在鼠标离开某个元素时触发,只会在鼠标离开当前元素时触发    jQueryObject.mouseleave( [[ data ,]  handler ] )
 mouseover()  在鼠标进入某个元素时触发,鼠标进入当前元素及其任何后代元素时触发    jQueryObject.mouseover( [[ data ,]  handler ] )
 mouseout()  鼠标离开某个元素时触发,鼠标离开当前元素及其任何后代元素时触发    jQueryObject.mouseout( [[ data ,]  handler ] )
 load()  在资源加载完成时触发。从1.8开始被标记为已过时    jQueryObject.load( [[ data ,]  handler ] )
resize() 会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。
jQueryObject.resize( [ [ data ,]  handler ] )
scroll() 在元素的滚动条位置发生改变时触发。该事件一般仅适用于window对象或其他可滚动元素(一般会出现滚动条)。
jQueryObject.scroll( [ [ data ,]  handler ] )
select() 在文本框中的文本内容被选中时触发。该事件仅适用于<input type="text">和<textarea>文本框
jQueryObject.select( [ [ data ,]  handler ] )
submit() 事件会在表单被提交时触发。该事件仅适用于<form>元素。
jQueryObject.submit( [ [ data ,]  handler ] )

1.blur()事件就是获得失去鼠标光标焦点事件。
$("#txt1").blur(function(){
$(this).css("border"," 1px solid red");
});
判断文本框验证:
var data={"name":"eric","sex":"man"};
$("#t1").blur(data,function(event){
var map=event.data;
var tips="";
if(!$(this).val()){
$(this).next(".tips").html("").append("<b style=‘color:red;‘>请输入"+map.name+"</b>");
return false;
}
if($(this).val!="eric"){
$(this).next(".tips").html("").append("<b style=‘color:red;‘>输入有误,名字不是"+map.name+"</b >");
return false;
}
});
2.change()函数用于为每个匹配元素的change事件绑定处理函数。change事件会在文本内容或选项被更改时触发。该事件仅适用于<input type="text">和<textarea>以及<select>。对于text和textarea元素,该事件会在元素失去焦点时发生(文本内容也发生了更改)。
文本框值发生变化就记录时间并判断输入的值是否已经存在:
var data={"name":"eric","sex":"man"};
function changeHandle(event){
var map=event.data;
$("#log").append(new Date().toLocaleString()+","+map.name+" 发生了改变<br>");
if($("#txt1").val()==map.name){
$("#log").append(new Date().toLocaleString()+","+map.name+" 已经存在 <br>");
}
}
$("#txt1").change(data,changeHandle);
3.click事件就是鼠标按钮单击事件。
4.dblclick事件就是鼠标左键双击事件。
var data={"name":"eric","sex":"man"};
$("#btn").dblclick(data,function(event){
alert(event.data.name);
});
5.error()函数用于为每个匹配元素的error事件绑定处理函数。会在js发生错误或资源加载失败时触发。该事件主要用于window对象、<img>等元素。删除通过error()绑定的事件,使用unbind()函数。
$("img").error( function(){
alert( "图片加载失败!" );
} );
// 图片加载失败时,重新加载新的图片URL
var newImageURL = "http://www.365mini.com/static/image/backTop.png";
$("img").error( newImageURL, function(event){
this.src = event.data;
} );
6.focus事件就是获得鼠标光标焦点事件,要删除通过focus()绑定的事件,请使用unbind()函数。(与blur()相反)
$("#t2").focus(function(event){
$(this).css("border","1px solid red");
});
// 为所有text元素的focus事件绑定处理函数
var inputMap = { "name": "姓名", "age": "年龄" };
$(":text").focus( inputMap, function(event){
var map = event.data;
$(this).next(".tips").html( ‘请输入[‘ + map[this.name] + ‘]‘ );
} );
7.focusin事件就是获得焦点事件。与focus事件不同的是:focusin可以检测该元素的后代元素获得焦点的情况(换句话说,focusin事件支持冒泡)。
8.focusout事件就是失去焦点事件。与blur事件不同的是:focusout可以检测该元素的后代元素获得焦点的情况(换句话说,focusout事件支持冒泡,blur不支持)。
9.keydown事件会在按下键盘按键时触发。它与keypress事件类似,但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress),keydown着重的是按下了哪个键(按下任何键都可触发keydown)。删除通过keydown()绑定的事件,使用unbind()函数。
$("#t2").keydown(function(event){
$(this).css("border","1px solid red");
});
// 只允许按下的字母键生效 (使用某些输入法可能会绕过该限制)
var validKeys = { start: 65, end: 90 };
$("#keys").keydown( validKeys, function(event){
var keys = event.data;
return event.which >= keys.start && event.which <= keys.end;
} );
10.keypress事件会在按下键盘按键时触发。它与keydown事件类似,但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress),keydown着重的是按下了哪个键(按下任何键都可触发keydown)。
11.keyup事件会在按下键盘按键并释放时触发。例如:你一直按住A键,直到10秒钟后才释放,只会在释放按键的时候触发一次keyup事件。但在这个过程中会触发许多次keydown事件(或keypress事件)。因此,keyup事件无法阻止字符的输入。
$("#t2").keyup(function(event){
$(this).css("border","1px solid red");
});
12.mousedown事件会在鼠标按钮被按下时触发。mouseup事件会在按下鼠标按钮并释放时触发。注意:如果一直按住鼠标按钮不放,也只会触发一次mousedown事件。
$("#t2").mousedown(function(event){
$(this).css("border","1px solid red");
});
13.mouseup事件会在鼠标按钮被释放时触发。mousedown事件会在鼠标按钮被按下(无需释放)时触发。
$("#t2").mouseup(function(event){
$(this).css("border","1px solid red");
});
14.mouseenter事件会在鼠标进入某个元素时触发。它与mouseover事件相似,但mouseenter事件只会在鼠标进入当前元素时触发,而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发(换句话说,mouseover事件支持冒泡)。
$("#t2").mouseenter(function(event){
$(this).css("border","1px solid red");
});
15.mouseleave事件会在鼠标离开某个元素时触发。它与mouseout事件相似,但mouseleave事件只会在鼠标离开当前元素时触发,而mouseout事件会在鼠标离开当前元素及其任何后代元素时触发(换句话说,mouseout事件支持冒泡)。
$("#t2").mouseleave(function(event){
$(this).css("border","1px solid red");
});
16.mouseover事件会在鼠标进入某个元素时触发。它与mouseenter事件相似,但mouseenter事件只会在鼠标进入当前元素时触发,而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发(换句话说,mouseover事件支持冒泡)。
17.mouseout事件会在鼠标离开某个元素时触发。它与mouseleave事件相似,但mouseleave事件只会在鼠标离开当前元素时触发,而mouseout事件会在鼠标离开当前元素及其任何后代元素时触发(换句话说,mouseout事件支持冒泡)。
18.load事件会在资源加载完成时触发。该事件主要用于window对象、document对象、<body>、<script>、<link>、<img>、<iframe>、<frameset>、<frame>等元素。jQuery 1.0 新增该函数,但从1.8开始被标记为已过时。
19.unload事件会在页面退出时触发。该事件主要用于window对象、<body>、<frameset>元素。从1.8开始被标记为已过时。
20.resize事件会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。
var minSize = { width: 800, height: 600 };
$(window).resize( minSize, function(event){
var min = event.data;
var $dom = $(this);
if( $dom.width() < min.width ){
$("body").append("<br>窗口宽度不要小于" + min.width );
}else if( $dom.height() < min.height ){
$("body").append("<br>窗口高度不要小于" + min.height);
}
} );
21.scroll事件会在元素的滚动条位置发生改变时触发。该事件一般仅适用于window对象或其他可滚动元素(一般会出现滚动条)。
// 向下滚动到据顶部超过1000px时,回到顶部:
var maxScrollTop = 1000;
$(window).scroll( maxScrollTop, function(event){
var $me = $(this);
if( $me.scrollTop() > event.data ){
$me.scrollTop( 0 );
}
} );
22.select事件会在文本框中的文本内容被选中时触发。该事件仅适用于<input type="text">和<textarea>文本框。
// 为所有text元素的select事件绑定处理函数
var user = { name: ‘CodePlayer‘, age: 18 };
$(":text").select( user, function(event){
$("#msg").html( event.data.name + ",你选择了[" + this.name + "]中的一些文本内容!" ).show().fadeOut( 2000 );
} );
23.submit事件会在表单被提交时触发。该事件仅适用于<form>元素。
// 触发form元素的submit事件
// $("form").submit( );
还可以为事件处理函数传递一些附加的数据:
var map = { name: "姓名", age: "年龄" };
$("form").submit( map, function(event){
var labelMap = event.data;
var label = ‘‘;

// 循环验证所有text元素是否为空
$(this).find(":text").each(function(){
if( !this.value ){
label = labelMap[this.name];
return false;
}
});

if( label ){
alert( label + "不能为空!" );
return false;
}
} );

html页面:

<body>
<form>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>qinqin</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<input id="btn" type="button" value="点击绑定一次" />
<div id="n2">
<p id="n6"><span>CodePlayer</span></p>
<p id="n7"><span>qinqin</span></p>
<input id="txt1" type="text"/>
</div>
<div id="log"><div>
<input id="t1" name="name" type="text" /><span class="tips"></span>
<br>
<input id="t2" name="age" type="text" /><span class="tips"></span>
<img src="http://www.365mini.com/static/image/invalid.png" alt="回到顶部" />
</form>
</body>

时间: 2024-10-17 12:52:49

jquery事件之事件的相关文章

jQuery中的事件

1:加载dom     在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中,     通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.     $(document).ready(function(){});缩写$(function(){}); 2: 事件绑定:对匹配的元素进行特定的事件绑定: bind() 3:合成事件:         hover():

jQuery完整的事件委托(on())

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery完整的事件委托(on())</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> &l

jQuery选择器和事件

一.jQuery选择器    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.1.min.js"></script> <script src="Selector.js"></script>

jQuery代码优化:事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台 MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

HTML5 audio元素如何使用js与jquery控制其事件

前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜欢自己瞎折腾.(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com) 听一个写博客的朋友说周末的博客阅读量明显下降,周末大好时光不出去泡妹子的肯定是有难言之隐的.先来重温一下audio标签的基本属性 定义和用法 <audio> 标签定义声音,比如音乐或其他音频流.

Jquery:Jquery中的事件&lt;二&gt;

这几天快忙死了,办了离职还得办入职,完全打乱了我的计划,但是能有一个理想的工作,还是很开心的,以后加把劲,争取把计划再赶上来!不说了,学习!!! 五.事件对象的属性 1.event.type:获取事件的类型,其中event是事件的对象. 2.event.preventDefaule(),在上一个学习笔记中已经有介绍了,该方法是阻止默认的事件事件行为.event.stopPropagation(),该方法的作业是阻止事件的冒泡. 3.event.target,它的作用是获取到触发事件的元素.通过返

JQuery 自动触发事件

常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使用下面的代码来触发id为btn的按钮的click事件. 1 $('#btn').trigger("click"); 这样,当页面加载完毕后,就会立刻输出想要的效果.也可以直接简写click(),来达到同样的效果: 1 $('#btn').click(); 触发自定义事件 trigger()

jquery的自定义事件通过on绑定trigger触发

jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字数计算,如果是直接键盘输入或者粘贴进来的话,是可以使用input方法检测到,但是如果是通过js插入的文本,这个时候input事件就监测不到了,这个时候如果我们事先给绑定一个myChange事件,它的回调函数就是来处理计算其中的文本字数的,我们在使用js给这个textarea赋值以后,连缀写上.tri