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>
