|
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="text" name="" id="" value="11111" /> -->
<input type="password" name="" id="" value="11111" />
<!-- <input type="file" name="" id="" /> -->
<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>
|