onclick 是前端开发中常用的一个事件监听器，它可以在用户点击某个元素时执行相应的处理程序。有时候我们需要根据不同的场景、用户权限等因素来动态地改变 onclick 处理程序，本文将介绍几种实现方式。
1. 直接修改 onclick 属性
最简单的方法是直接修改元素的 onclick 属性。例如：
-- -------------------- ---- ------- ------- ---------- ------------------------------------ -------- -------- ------------- - ---------------------- - ---------------------------------------- - ---------- - ---------------------- -- ---------
上面代码中，初始状态下点击按钮会执行 handleClick 函数。通过 JavaScript，我们可以动态地将处理程序改为另一个函数。
这种方式的缺点是，如果之前已经有其他代码修改过 onclick 属性，那么这里的修改会覆盖之前的修改。而且如果需要切换多个处理程序，代码可读性也会变得很差。
2. 使用 addEventListener 和 removeEventListener
更好的做法是使用 addEventListener 和 removeEventListener 方法。这样可以避免覆盖之前的处理程序，并且可以添加多个处理程序。
-- -------------------- ---- ------- ------- ----------------------- -------- -------- -------------- - --------------------- - -------- -------------- - --------------------- - --- --- - --------------------------------- ----------------------------- -------------- ----------------------------- -------------- -- -- ------------ ---- -------------------------------- -------------- ---------
上面代码中，我们先添加了两个处理程序 handleClick1 和 handleClick2，然后又移除了 handleClick2。这种做法也可以用于动态地切换处理程序。
需要注意的是，使用 addEventListener 添加的处理程序需要通过 removeEventListener 来移除，而不能直接将事件处理程序设为 null。
3. 使用事件委托
另一种动态改变点击处理程序的方法是采用事件委托。即将点击事件绑定在父元素上，根据实际情况决定是否执行相应的处理程序。
-- -------------------- ---- -------
--- ------------
--- ----------------------------
--- --------------------------
-----
--------
-------- ------------------ -
--- ------ - ---------
-- ---------------- --- ----- -
--- ------ - -----------------------------------
------ -------- -
---- ---------
------------------
------
---- -------
------------------
------
-
-
-
----------------------------------------------------------- -----------------
---------上面代码中，我们给 ul 元素添加了一个事件监听器，当子元素 li 被点击时，根据 data-action 属性决定执行相应的处理程序。
事件委托可以将事件处理程序与具体的元素解耦，减少代码量，并且可以动态地添加或删除子元素而不需要重新绑定事件监听器。
结论
在前端开发中，我们经常需要根据不同的场景、用户权限等因素动态地改变点击事件的处理程序。本文介绍了三种实现方式：直接修改 onclick 属性、使用 addEventListener 和 removeEventListener 方法、以及采用事件委托。这些方法各有优缺点，需要根据实际情况选择合适的实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15061