jquery的事件绑定

序言:这几周都在做响应式的网页,所以每天用到的知识点也差不多,所以今天我就来复习一下jQuery的事件绑定:

知识点+实例:

首先引用:<script src="jquery/jquery-1.11.1.js"></script>   // jQuery插件

 

1.HTML代码:

<div id="div1" style="background:#F05205;width:200px;height:200px">
<input id="btn1" type="button" value="按钮"/>
</div>

<input type="button" value="请点击我"/>

<div id="div1" style="width: 400px;height:400px;border:1px solid red">

<div id="div2" style="width: 300px;height:300px;border:1px solid blue">

<div id="div3" style="width: 200px;height:200px;border:1px solid yellow"></div>
</div>
</div>
<div class="clickme">click me</div>

<div id="div1" style="background:#F05205;width:200px;height:200px">
<input id="btn1" type="button" value="按钮"/>
</div>

2.jQuery关键部分:

</body>
<script src="jquery/jquery-1.11.1.js"></script>
<script>

//通过e.data获取额外数据,可以是数字,字符串,数组,对象
$('input').bind("click",{user:'haha',age:18},function(e){
alert(e.data.age);
 })

//获取绑定的那个 DOM 元素,相当于 this,区别与 event.target ,通过 event.target 获取绑定的 DOM 元素   

 $('#div1').mouseover(function(e){
 alert(e.currentTarget);
})

//获取上一次事件的返回值   
$('#div2').click(function(e){
 return '123';
 });
$('#div2').click(function(e){
alert(e.result);
})

//获取当前的时间戳   
 $('#div3').click(function(e){
 alert(e.timeStamp);
})

//获取键盘的按键   

$('document').keyup(function(e){

 console.log(e.which);
})

//获取触发元素鼠标当前的位置

//pageY/pageX获取相当于页面原点的垂直距离/水平距离  

//screenY/screenX获取显示屏位置的垂直距离/水平距离 

//clientY/clientX相对于页面视口位置的垂直距离/水平距离 
$(document).click(function(e){
alert(e.screenY+' '+ e.pageY+ ' '+ e.clientY);
})

 

$('input').click(function(e){
 alert("这是我的第一次点击!!")
});

//模拟用户点击行为
$('input').trigger('click');

 

//注意:当传递一个值的时候,直接传递即可。当两个值以上,需要在前后用中括号包含 起来。但不能认为是数组形式,下面给出一个复杂的说明。 

//有时在模拟用户行为的时候,我们需要给事件执行传递参数,这个参数类似与 `event.data` 的额外数据,可以可以是数字、字符串、数组、对象。


$('input').click(function(e){

alert("这是我第一次自模拟点击");

}).trigger('click');

$('input').click(function(e,data1,data2){
alert(data1.a+' '+data2[0]);
}).trigger('click',[{a:'123',b:'abc'},['456','def']]);

$('input').bind('myEvent',function(e){
 alert('自定义事件!!');
}).trigger('myEvent');

事件委托
$('.clickme').bind('click',function(){
alert("jnckdnvzlkdfxv");
});

//append向一个元素里面添加一个元素

//appendTo是把一个元素添加到一个元素里
$('body').append('<div class="clickme">click me</div>')

//使用bind()不具备动态绑定功能,只有原始的才有作用
//$('#btn1').bind('click',function(e){
// $(this).clone().appendTo("#div1");
//})

//使用live()具备动态绑定功能,jquery1.3才能使用,jquery1.7之后就很少用,甚至废弃;
//$('#btn1').live('click',function(e){
// $(this).clone().appendTo("#div1");
//})

//$('#btn1').bind('click',function(e){
// $('<input type="button" value="复制的" id="btn1"/>').appendTo('#div1');
//})

//delegate()和undelegate()在jquery1.7中被on()给整合代替了;支持连缀调用方式;
//$('#div1').delegate('#btn1','click',function(){
// $(this).clone().appendTo('#div1')
//});
//$('#div1').undelegate('#btn1','click');

// 支持连缀调用方式;
$('div').first().delegate('#btn1','click',function(){
$(this).clone().appendTo('div:first');
})


//事件绑定和解绑事件共有三组六个,bind()和unbind();live()和die();delegate()和undelegate();
//在jquery1.7之后on()和off()就彻底摒弃了 前面三组 ;
//这些事件中,无论是谁都不能自动解除事件,都得手动解除;


//但在jquery中,提供了one()方法可以自动解除事件,但只能执行一次;
$('#btn1').one('click',function(){
 alert('one仅触发一次');
})
</script>

 

posted on 2015-12-23 10:40  卢美铃儿  阅读(143)  评论(0编辑  收藏  举报

导航