JavaScript之按钮重复绑定问题

最新推荐文章于 2021-07-09 17:19:09 发布

clk_esunny

最新推荐文章于 2021-07-09 17:19:09 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 按钮重复绑定

本文链接：https://blog.youkuaiyun.com/clk_esunny/article/details/80393397

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了按钮绑定的最佳实践，包括如何避免重复绑定按钮事件，利用事件冒泡原理进行高效绑定，并提供了一个具体的JavaScript示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮重复绑定问题

1. 按钮绑定：应该减少按钮重复绑定，每个按钮只绑定一次，只有业务多的时候，需要重复绑定，但是绑定前一定要先解绑。

（注：对于像弹出框的按钮绑定，只需创建弹出框的时候绑定一次，因为随着弹出框关闭，弹出框对象已不存在，相应的弹出框里面的按钮绑定也不存在了）

2. 例子：

对于动态改变的按钮，比如信息的“编辑”按钮，建议使用下面的按钮绑定方式：

js 代码:

//点击“编辑”按钮

  $(‘#info-list’).on(‘click’, ‘.btn-edit’, function(){

    var index = $(this).data(‘index’);

    //通过索引，获得信息

    var entity = infoList[index];

    ...

  });

 

HTML代码：

<div id=”info-list”>———————页面只初始化一次，不变的部分

  <div class=”protlet-panel”>————页面动态改变的部分

    <a class=”btn-edit” data-index=”1”>编辑</a>

  </div>

</div>

上面“编辑”按钮的点击事件实际上是绑定在其父元素#info-list上的，而页面动态改变的部分不包括#info-list，所以#info-list一直存在，这样我们就不用每次增加“编辑”按钮时都再次绑定点击事件了。

3. 原理：

利用事件冒泡来让程序知道我们点击了动态添加的链接元素。（事件冒泡：允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上））