jquery中的事件和事件对象

by admin on 2014-04-09 13:23:36 in , 次

jquery中的事件和事件对象
1.加载文档事件
2.鼠标事件
3.键盘事件
4.表单事件
5.浏览器事件
6.事件对象
7.绑定事件的方法
8.移除事件的方法
9.事件冒泡（略）
10.事件命名空间

加载文档事件
a. ready()略
b. $.holdReady(bool)暂停或恢复ready事件
c. load(),unload() 1.8中移除

鼠标事件
click()单击左键事件
dblclick()双击左键事件
focusin()获得焦点事件，可作用于父级
focusout()失去焦点事件，可作用于父级
mousedown()鼠标按下事件，和click()有区别
mouseup()鼠标抬起事件
mousemove()，鼠标移动事件
mouseover()鼠标进入事件
mouseout()鼠标离开事件
mouseenter()鼠标进入事件
mouseleave()鼠标离开事件
hover()同时绑定mouseenter和mouseleave事件
<body>
<p>这是P标签</p>
<div>
<input type="text" name="" id="" value="123456" />
<span style="display:none">已获取焦点</span>

</div>
<script>
//当鼠标左键按下，然后再抬起鼠标左键，才算完成一次click事件
/*$('p').click(function(){
alert($(this).text());
});*/
/*$('p').dblclick(function(){
alert($(this).text());
});*/
/*$('div').focusin(function(){
$(this).children('span').show();
});*/
/*$('input').focusin(function(){
$('span').show();
});*/
/*$('p').mousedown(function(){
alert($(this).text());
});*/
/*$('p').mouseup(function(){
alert($(this).text());
});*/

/*$(document).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
$('input').val(x+','+y);
});*/
/*$('p').mouseover(function(){
$(this).css('background','red');
}).mouseout(function(){
$(this).css('background','none');
});*/
$('p').mouseenter(function(){
$(this).css('background','red');
});
$(document).mouseleave(function(){
$('p').css('background','none');
});
</script>
</body>

键盘事件
a. keydown()键盘按下事件
b. keyup()键盘弱起事件
c. keypress()类似与keydown()但有区别
<body>
<input type="text" value="text" />
<script>
$('input').keydown(function(){
alert($(this).val());
});
/*$('input').keyup(function(){
alert($(this).val());
});*/
/*$('input').keypress(function(){
alert($(this).val());
});*/
</script>
</body>

表单事件
focus()获得焦点事件
blur()失去焦点事件
change()表单值改变事件
select()表单元素被选中时的事件，只能用于Input[text]和textarea
submit()表单提交事件
<body>

<input type="password" name="" id="" value="11111" />

<textarea name="" id="" cols="30" rows="10">1231231212213</textarea>
<span style="display:none">asdasdfsdf</span>
<script>
/* $('input').focus(function(){
$('span').show();
});
$('input').blur(function(){
$('span').hide();
});*/

//当有focus事件的元素里面的值改变的时候，并且触发了blur事件，才算完成一次change事件
/*$('input[type=file]').change(function(){
$('span').show();
});*/
/*$('input').select(function(){
$('span').show();
});*/
/*$('textarea').select(function(){
$('span').show();
});*/
</script>
</body>

浏览器事件
a. resize()浏览器窗口改变大小事件
b. scroll()浏览器滚动条移动时发生的事件
c. error() 1.8中废弃
<body style="height:3000px">
<script>
/*$(window).resize(function(){
alert('浏览器窗口已改变！');
});*/
$(window).scroll(function(){
$('body').append('<div>滚动条位置发生偏移</div>');
});
</script>
</body>
事件对象
event.pageX获取鼠标相对于文档的x轴坐标
event.pageY获取鼠标相对于文档的Y轴坐标
event.preventDefault()阻止浏览器默认行为
event.stopPropagation()阻止冒泡
event.which监听键盘输入和鼠标操作
其它略
<body style="height:3000px;width:3000px">
<input type="text" style="position:fixed;top:10px;left:10px" />
<script>
$(document).click(function(e){
var x = e.pageX;
var y = e.pageY;
$('input').val(x+','+y);
});
</script>
</body>
<body>
<form action="http://www.zixue.it" id="form1">
<input type="text" value="11111" name="username" />
<input type="password" value="22222" name="password" />
<input type="submit" value="提交" />
</form>
<script>
$('#form1').submit(function(e){
alert('提交成功!!');
e.preventDefault();
});
</script>
</body>
绑定和移除事件的方法
bind()绑定事件
unbind()移除事件
on()绑定事件
off()移除事件
one()执行一次事件，然后销毁该事件
delegate()虽然未被废弃，但官方推荐使用on()代替
undelegate()用off代替
<body style="height:3000px">
<p>这是P标签</p>
<script>
/*$('p').click(function(){
alert($(this).text());
});*/

/*$('p').bind('click',function(){
alert($(this).text());
});
$('p').mouseover(function(){
$(this).css('background','red');
});
$('p').unbind('click mouseover');*/
/*$('p').one('click',function(){
alert($(this).text());
});*/
/*$('body').delegate('p','click',function(){
$(this).append('<p>我是新增加的P标签<p>');
});*/
$('body').on('click','p',function(){
$(this).append('<p>我是新增加的P标签<p>');
});
</script>
</body>

事件命名空间
<body>
<p>我是P标签</p>
<script>
//第一个开发人员，给p标签添加click事件，使它的背景颜色变成红色
/*$('p').click(function(){
$(this).css('background','red');
});*/
//第二个开发人员，给P标签添加click事件，使它的文本颜色变成蓝色
/* $('p').click(function(){
$(this).css('color','blue');
});*/
//第三个开发人员，不想让P标签在点击的时候添加红色的背景,只想让P标签里的文本颜色变成蓝色，那么他用unbind方法把P标签上的click事件给移除了
/*$('p').unbind('click');*/
$('p').bind('click.background',function(){
$(this).css('background','red');
});
$('p').bind('click.color',function(){
$(this).css('color','blue');
});
$('p').unbind('click.color');

</script>
</body>

jquery中的事件和事件对象

评论

写评论

分享

栏目

赞助商

热门文章

Tag 云

联系方式

照片墙

获取资讯

jquery中的事件和事件对象

相关文章

评论

写评论

分享

栏目

赞助商

热门文章

Tag 云

联系方式

照片墙

获取资讯