jquery的事件绑定

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

知识点+实例：

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

1.HTML代码：

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

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

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

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

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

<div id="div1" style="background:#F05205;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>