JQuery事件绑定，事件对象，事件委托

JQuery事件绑定

使用bind的绑定方式

$(".btn1").bind("click",function(){
alert("wosshigetanchuang");
})

bind方法有一个专门用来去除绑定事件的方法

$(".btn").unbind("click");

使用live的方式去绑定：这种方式已经被弃用，目前已经不再使用，如果要用就需要使用JQ1版本

$(".btn1").live("click",function(){
//这是live事件绑定
})
$(".btn1").die("click");

在以前的JQuery版本，事件委托不是on，而是使用delegate

$(".btn1").delegate(".box1","click",function(){
})
$(".btn1").undelegate(".box1","click");

JQuery当中的事件对象

JQ当中的事件全部都是二级事件，并且它默认执行的是事件冒泡 JQ里面的事件对象并不是原生的事件对象，它是自己封装的一个对象，正式因为它是自己封装的对象， 所以在JQ里面肯定还有一些不同的地方 1、JQ的事件对象不需要做兼容性处理，因为在框架的内部就已经做了处理

event = event || window.event;
//原生DOM的事件对象的兼容性处理
//而在JQuery当中，直接使用event就可以了

2、JQ事件对象上面的stopProPagtion（）是自己封装的方法，它不是原生的事件方法，所以停止事件 冒泡于取消事件传播时候，直接调用这个方法就可以了

//原生DOM事件里面，取消事件传播于冒泡
event.cancelBubble = true; //IE
event.stopProPagtion(); //W3C
//JQ当中直接调用方法
event.stopProPagtion()

3、JQuery事件对象里面，如果要阻止事件的默认行为也就是event.preventDefault（），而在原生的 DOM对象里面0级事件取消默认行为return false，2级event.preventDefault（）

//0级事件
return false
//2级事件
event.preventDefault()
//JQuery当中
event.preventDefault()

注意：JQ当中的写法和原生里面2级事件的写法看似一样，实际完全不同，因为2个event对象是一个是 原生的一个是JQ的，所以调用出的方法，虽然方法名一样，但是还是不同的 4、在JQ事件里面的return false 会同时停止事件冒泡于阻止事件默认行为，等于说把2-3两项的内容都 做了 5、JQ里面的事件对象是框架自己封装的一个对象，如果想要找到原生的事件来用可以使用 originalEvent属性【有一些特殊的事件必须要在原生事件对象上面找属性】 6、JQ里面which属性代表鼠标的键，1左键，2中键，3右键 7、JQ因为是2级DOM事件可以事件多次监听，这样在触发事件的时候会同时调用所有的监听方法，在 JQ的事件里面提供了一个排他的特性event.stopImmediatePropagation()

$("#btn1").on("click",function(event){
console,.log("haha");
});
$("#btn1").on("click",function(event){
console,.log("hehe");
event.stopImmediatePropagation() //断开事件链，hoho就不执行了
});
$("#btn1").on("click",function(){
console,.log("hoho");
});

JQuery事件委托 在JQ的事件委托里面，它于原生的DOM里面事件的事件委托不太一样 原生DOM： 1、event.target 代表触发者 2、event.currentTarget 代表绑定者 JQ里面： 1、event.target 代表触发者 2、event.currentTarget 代表绑定者 3、event.delegateTarget 事件委托者

<div class="box">
<div class="small-box">
<button type="button" class="btn1">按钮1</button>
</div>
</div>
<script type="text/javascript">
$(".box").on("click",".small-box",function(event){
console.log("我触发了事件",event);
})
</script>

.box 是委托者delegateTarget .small-box 是绑定者currentTarget .btn1 是 触发者 总结公式：

$(事件的委托者delegateTarget).on(事件类型，事件的绑定者currentTarget，function(){
//如果你没有阻止事件的传播，那么触发者可以是绑定者也可以是绑定者的子元素
})

JQuery方法里的this JQ里面的this与原生DOM里面的this大致用法是差不多

$(".small-box").click(function(){
console.log(this);
}) //small-box
$(".small-box").on("click",function(){
console.log(this);
}) //small-box
$(".box").on("click",".small-box",function(event){
console.log(this);
}) //small-box

JQ当中的事件里，this永远指向事件的绑定者 JQ中this 还有一个特殊的用法，它可以直接通过选择器选取以后的操作

$("li").click(function(){
$(this).hide();
})

这里的this实际指向的是当前被触发的这个元素