jjzjj

javascript - 事件监听器的影响?

coder 2025-01-11 原文

eventlisteres 有什么影响?我说的是大数字,这里有一个例子:

  • 一开始只有x.marker
  • 当点击 .marker 时,通过 JS 添加所有 child - 事件监听器
  • 每个 child 做自己的事情,这意味着他们每个人都有自己的事件监听器

<!-- Final HTML of single .marker when it has been clicked -->
<div class="marker">
    <div class="remove"></div>
    <div class="change"></div>
    <div class="add"></div>
    <div class="drag"></div>
</div>

var count = 20 000;

for(i = 0; i < count; i++) {

    var marker = document.createElement('div');
    marker.className = 'marker';
    someParentElement.appendChild(marker);

    marker.click( function() {
        //Create child elements
        var remove = document.createElement('div');
        remove.className = 'remove';
        marker.appendChild(remove);

        var change = document.createElement('div');
        change.className = 'change';
        marker.appendChild(change);

        var add = document.createElement('div');
        add.className = 'add';
        marker.appendChild(add);

        var drag = document.createElement('div');
        drag.className = 'drag';
        marker.appendChild(drag);

        //Children eventlisteners
        remove.click( function() {
            //Do it's thing
        });
        change.click( function() {
            //Do it's thing
        });
        add.click( function() {
            //Do it's thing
        });
        drag.click( function() {
            //Do it's thing
        });
    });
}

请不要介意其他事情,例如以编程方式创建 20 000 个元素。我的问题是:让所有这些事件监听器中包含所有这些代码会产生什么影响?只要事件监听器没有被触发,事件监听器中的代码是什么或有多少并不重要?

最佳答案

尝试使用事件委托(delegate),单一事件处理器。参见 switch , .is()

var count = 100;

for (i = 0; i < count; i++) {

  var marker = document.createElement('div');
  marker.className = 'marker';
  marker.innerHTML = marker.className + " " + i;
  document.body.appendChild(marker);

  //Create child elements
  var remove = document.createElement('div');
  remove.className = 'remove';
  remove.innerHTML = "remove" + i;
  marker.appendChild(remove);

  var change = document.createElement('div');
  change.className = 'change';
  change.innerHTML = "change" + i;
  marker.appendChild(change);

  var add = document.createElement('div');
  add.className = 'add';
  add.innerHTML = "add" + i;
  marker.appendChild(add);

  var drag = document.createElement('div');
  drag.className = 'drag';
  drag.innerHTML = "drag" + i;
  marker.appendChild(drag);
  //Create child elements
}

var check = function(args) {
  alert(args.innerHTML.replace(/[^\d+]/g, ""))
}

var obj = {
  remove: check,
  change: check,
  add: check,
  drag: check
}

var message = function(name) {
  console.log(name)
}

$("body").on("click", ".marker", function(event) {
  var name = event.target.className;
  switch (name) {
    case "remove":
      /* do stuff */
      message(name);
      break;
    case "change":
      /* do stuff */
      message(name);
      break;
    case "add":
      /* do stuff */
      message(name);
      break;
    case "drag":
      /* do stuff */
      message(name);
      break;
    default:
      /* do stuff */
      alert(name);
      break;
  }

  // utilizing `.is()`
  if ($(event.target).is(".remove")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if ($(event.target).is(".change")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if ($(event.target).is(".add")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if ($(event.target).is(".drag")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if (!$(event.target).is(".marker")) {
    // utilizing an object
    obj[event.target.className](event.target)
  }

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

关于javascript - 事件监听器的影响?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35120160/

有关javascript - 事件监听器的影响?的更多相关文章

  1. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  2. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式? 最佳答案 您可以像这样为日期选择器提供额外的选项,而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义,我们在StackOverflow上找到一个类似的问题: https://s

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. .net - .NET 将如何影响 Python 和 Ruby 应用程序? - 2

    我很好奇.NET将如何影响Python和Ruby应用程序。用IronPython/IronRuby编写的应用程序是否会非常特定于.NET环境,以至于它们实际上将变得特定于平台?如果他们不使用任何.NET功能,那么IronPython/IronRuby相对于非.NET同类产品的优势是什么? 最佳答案 我不能说任何关于IronRuby的东西,但是大多数Python实现(如IronPython、Jython和PyPy)都试图尽可能忠实于CPython实现。不过,IronPython正在迅速成为这方面的佼佼者之一,并且在PlanetPyth

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是,当我单击“导入项目”按钮时,我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  7. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录? - 2

    例如,假设我有一个名为Products的模型,并且在ProductsController中,我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下,在product_listView中,用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是,每次用户选择新的order_by过滤器时,rails是否必须查询,或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序?有没有一种方法可以编写它,以便在用户排序时rails不会重新查询结果

  8. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务,每x秒轮询一次队列,并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外,还有其他稳定的替代方案吗? 最佳答案 尽管启动基于Rails的持久任务是一种选择,但您可能希望查看更有序的系统,例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西,因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的,因为Rails上的启动时间通常为5-15秒,具体取决于您的硬件。不过,每天这样做几

  9. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系,城市又属于一个州,例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子,但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型,我们在StackOverflow上找到一个类似的问

  10. ruby - 在没有数据库的情况下伪造一个事件记录模型 - 2

    我觉得我错过了什么。我正在编写一个ruby​​gem,它允许与事件记录进行交互,作为其主要功能的附加功能。在为其编写测试用例时,我需要能够指定虚拟事件记录模型来测试此功能。如果我可以获得一个事件记录模型的实例,它不需要与数据库的任何连接,可以有关系,所有这些东西,但不需要我在数据库中设置表,那就太棒了。我对测试还很陌生,在Rails测试之外我也很陌生,但似乎我应该能够相当轻松地完成类似的事情,但我什么也没找到。谁能告诉我我错过了什么?我看过工厂、制造商、固定装置,所有这些似乎都想达到目标。人们如何在您只需要AR对象进行测试的地方测试gem? 最佳答案

随机推荐