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>