以下为ChatGPT自动生成的解答,正确与否请自行判断。 也许你也可以从大家的发帖中找到想要的答案!
BFE.devAI解答 - JavaScript 代码题
117. 事件委托
实现代码如下:
function onClick(root, predicate, handler) { root.addEventListener('click', function(event) { let el = event.target; while (el !== root) { if (predicate(el)) { handler.call(el, event); } if (event.stopPropagation) { event.stopPropagation(); } if (event.stopImmediatePropagation) { event.stopImmediatePropagation(); } el = el.parentNode; } });}
思路:
- 给root元素绑定click事件,传入事件处理函数。
- 在事件处理函数中,利用event.target获取最先触发事件的元素,然后从这个元素开始逐层向上找祖先元素,依次判断这些元素是否符合predicate。
- 如果当前元素符合predicate,就调用handler处理事件,注意使用call方法将this绑定为当前元素。
- 在处理完当前元素之后,需要判断是否需要停止事件传播。如果stopPropagation方法存在,则调用此方法。如果stopImmediatePropagation方法存在,则调用此方法并立即停止传播。
- 最后处理完当前元素后,需要将元素向上移一层,继续检查其父元素是否符合条件,直到检查到root为止。