Es5 For

layout: post
title:  javascript ES5事件委托
tags: javascript ES5
categories: ES5

** javascript ES5事件委托*

1. 何为事件委托，其实就是事件代理，在js中因为操作dom，存在父子根节点缘故，考虑性能的情况下是很有必要的，虽然现在vue等框架写起来很爽，但是时间委托在大量数据渲染的情况下会死很有必要的，可能这种场景也少吧，下面是我测试的场景，可能你会说这种场景咋就不后端处理，那这个就不是现在纠结的问题的

   1. 具体案列

        <div>

          <h1>日志</h1>

          <div class=”manix-box” @click=”selectItem”>

            <div v-for=”(item, key) in es6Studys” :key=”key”>

              <h3 :data-id=”key”>

               

               

              </h3>

            </div>

          </div>

          <div class="blog_content_container" id="gitalk-container"></div>

        </div>

      </template>

      ```

2. 如何实现一个私有变量，用getName方法可以访问，不能直接访 (1)通过defineProperty来实现 obj={ name:yuxiaoliang, getName:function(){ return this.name } } object.defineProperty(obj,”name”,{ //不可枚举不可配置 }); (2)通过函数的创建形式 function product(){ var name=’yuxiaoliang’; this.getName=function(){ return name; } } var obj=new product();

3节流 $(document).ready(function(){ // Check every 300ms the scroll position $(document).on(‘scroll’, _.throttle(function(){ check_if_needs_more_content(); }, 300));

function check_if_needs_more_content() {
pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();

// console.log($(document).height()); // console.log($(window).scrollTop()); // console.log($(window).height()); //console.log(pixelsFromWindowBottomToBottom);

if (pixelsFromWindowBottomToBottom < 200){
  // Here it would go an ajax request
  $('body').append($('.item').clone()); 
  
}   } });