美文网首页
Something u maybe ignore about

Something u maybe ignore about

作者: 老码农不上班 | 来源:发表于2016-09-04 14:00 被阅读18次

In a web project, I want to delegate all elements click event in a function, and call specify event handle function with data attribute in the element.
At first, I try to delegate click event in document body tag using on function:

bind: {
  events: function(){
    $(document).on('click', function(e){
      console.log("click");
      var behavior = $(e.target).attr("data-behavior");
      if ( behavior !== undefined ) {
        eval("App.events." + behavior + "();");
      }
    })
  }
},
events: {
  homeScrollNext: function(){
    // some behavior
  },
  homeContactMe: function(){
    // some behavior
  }
}

After i view the jQuery document about on function Event performance, I feel so ashame of above code I wrote. It reduce the performance

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

too young too simple as president Jiang say.
So, I begin to find a better way to achieve my goal...

jQuery can process simple selectors of the form tag#id.class very quickly when they are used to filter delegated events.

limiting the query scope for selector is a good way to increase the query elements performance. As all elements I want to bind click event have an data-behavior attribute,so I can use it for on function second param to limit the selectors.

bind: {
  events: function(){
    $(document).on('click',"*[data-behavior]", function(e){
      console.log("click");
      var behavior = $(e.target).attr("data-behavior");
      if ( behavior !== undefined ) {
        eval("App.events." + behavior + "();");
      }
    })
  }
},
events: {
  homeScrollNext: function(){},
  homeContactMe: function(){}
}

Maybe it's the best solution for my situation....
There is also shortcut when Using data attribute to find HTML elements, which had been mention by Don’t use data attributes to find HTML elements with JS

相关文章

  • Something u maybe ignore about

    In a web project, I want to delegate all elements click e...

  • Everything Is The Best Arrangeme

    Sometimes there is something unexpected, maybe for good, ...

  • “Maybe something lasts”

    我现在二十岁 在此前的人生 我感受到死亡的时刻有无数次 感受到永恒的瞬间有两次 其中一次就是爱上你 在我以为我已经...

  • Love

    Love maybe is something most changeful and regular in the...

  • I have a try to write in English

    I want to writing something with English, but maybe have ...

  • 创造的重要性不在于其是否有用

    "Creativity is an opportunity to attempt something. Maybe...

  • 1.10

    the way to keep something going is maybe a painful proces...

  • Unicorns

    01 Do you know about unicorns? Maybe you have heard about...

  • About Something

    关于情绪 曾经我以为我是可以将情绪管理的很好的人,我以为将情绪深藏在心底不表现出来就是很好的自控力。然而,实际的情...

  • about something

    有人说“感情里人总要蠢一次” 最近我突然想明白了我和sxy的为什么会变成这样。那段时间大概是她最难受的时候,男朋友...

网友评论

      本文标题: Something u maybe ignore about

      本文链接:https://www.haomeiwen.com/subject/tpplettx.html