jquery---6 (return false)

本文介绍了JavaScript中的事件代理(Event Delegation)概念,通过事件冒泡机制提高DOM操作效率。同时探讨了事件传播(Event Propagation)机制及如何阻止默认行为。

Event Delegation

      利用javascript中的 event bubbling (事件冒泡) 机制,通过给单个 DOM(父)节点绑定事件,从而可以管理这个节点下所有子节点的事件处理(Deligage(代理活委托)就是指的所有事件的处理都是通过父节点来代理处理的)。

      js的事件代理,事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说,其目标元素都是原始元素,在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待事件从它的子级元素里冒泡上来,并且可以很方便地判断出这个事件是从哪个元素开始的。

比如,点击某个段落会触发一个事件,

$("p").on("click", function() {
  //do something here
});

但是如果再新添加段落,
$(function() {
  $("p").on("click", function() {
    alert("Hello World");
  });
  $("<p />", {
    text: "Paragraph 6"
  }).appendTo("body");
});

这样的话新添加的段落就不会触发,为了解决这一问题应该使用 Event  Delegation ,

$(function() {
  $("body").on("click", "p", function() {    
    alert("Hello World");
  });
  $("<p />", {
    text: "Paragraph 6"
  }).appendTo("body");
});

 
$(selector).on(event, delegateSelector, function() {...});When it is used in this form, the event is still bound to the selector, but it will delegate it to any elements that   match the delegateSelector that are children of it. 
 

同时还可以减少javascript对DOM的处理次数,提高了代码的效率。----------------------------参考http://www.yaohaixiao.com/frontend/event-delegation-in-javascript/

Event Propagation-------- 不常用

When an event is fired on an element in the browser, it’s not just fired on that element,but every element that is a parent of it.  When you click the heading in your example, you also click the div. The heading is within the div, which  means you didn’t just click the heading, but the div, too.这就是 event propagation,事件传播。Typically,the only time you need to worry is when you are binding an event toboth an element and the element’s parent.

 stopPropagation 可以用来阻止 event propagation.

$(function() {
  $("h5").on("click", function(event) {
    alert("header");
   event.stopPropagation();
  });
  $("div").on("click", function() {
    alert("div");
  });
});

Preventing Default Behavior

event.preventDefault()方法是用于取消事件的默认行为,但此方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现。该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。这样<a>链接绑定一个网址连接之后,onClick事件,不跳转href页面。

$(function() {
  $("a").on("click", function(event) {            //function里面的可以是任意字符,但是需要与下面preventdefault相对应。
   event.preventDefault();
   // $("div").css("background", "blue");-----如果加上这句,那么连接语句只是改变颜色而不跳转。
  });
});

 Return false  -------常用

$(function() {
  $("a").on("click", function(event) {
   return false;    //stopping the default event action from being called and stopping the event from propagating
   // $("div").css("background", "blue");
  });
});
return false 等效于calling stopPropagation preventDefault.--------http://sinian1120na.blog.163.com/blog/static/24580508201112432225504/(可以看看作者其他)





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值