gpt4 book ai didi

带有附加选择器的 jQuery .on() 的 JavaScript 等效项

转载 作者:行者123 更新时间:2023-11-28 07:27:29 25 4
gpt4 key购买 nike

这是 JSFiddle 示例:https://jsfiddle.net/1a6j4es1/1/

$('table').on('click', 'td', function() {
$(this).css('background', 'green');
});

如何用纯 JavaScript 重写此代码?
即使对于新的td,回调函数也应该起作用。 table 内的元素元素。

更新:我找到了一个非常简短且干净的解决方案:https://jsfiddle.net/1a6j4es1/28/

function delegateSelector(selector, event, childSelector, handler) {

var is = function(el, selector) {
return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

var elements = document.querySelectorAll(selector);
[].forEach.call(elements, function(el, i){
el.addEventListener(event, function(e) {
if (is(e.target, childSelector)) {
handler(e);
}
});
});
}

delegateSelector('table', "click", 'td', function(e) {
e.target.style.backgroundColor = 'green';
});

最佳答案

<table id="clickable" onclick="changecolor(this)" border=1>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
function changecolor(table)
{
document.getElementById("clickable").addEventListener("click",tableClicked);
function tableClicked(e) {
e.target.style.backgroundColor = 'green';
}
}
</script>

这对我有用..

关于带有附加选择器的 jQuery .on() 的 JavaScript 等效项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29475295/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com