4.jQuery中的事件绑定

4.1.事件绑定

  • on方法绑定
$('#box').on('click',function(){
    alert(1);
})
  • 直接绑定
$("#box").click(function(){
     alert(1})

**总结:**事件里面的this是原生的this,如果要使用jquery方法需要 $(this)

  • off删除事件
$("#box").off("blur");  //删除事件

4.2.事件委托

$("ul").delegate("li","click",function(){
     $(this).css("background","#ccc");
})

###4.3.事件冒泡

事件冒泡就是事件会从元素内部往外传播的一种现象,事件冒泡的好处就是可以节约代码,比如说,有个需求是,点击某个按钮btn1 的时候显示一个div,点击其他元素的时候隐藏div,这个时候,如果没有冒泡机制,要实现这个需求就要给除了btn1 以外的所有元素都绑定上点击事件,如果当前页面有成千上万个元素,那么事件就会被重复绑定成千上万次,如果有了事件冒泡机制就可以把事件绑定给document,通过冒泡机制,点击其他的元素都会触发document身上的点击事件,从而节约代码,此时,只需要把btn1身上的点击事件阻止冒泡就行了

$("#btn1").on("click",function(ev){
      ev.stopPropagation();
})

4.4.阻止浏览器默认行为

浏览器会自带一些默认行为,比如说右键菜单,表单提交等,如果要实现自定义右键菜单或者表单验证这些功能的时候就需要把这些默认行为阻止掉

$("#btn1").on("click",function(ev){
      ev.preventDefault();
})

总结: 在jquery中可以直接return false ;return false 具有阻止浏览器默认行为和阻止冒泡的功能