Certains projets utilisent des modèles JS, mais les balises du modèle sont des balises HTML dont les cha?nes ne s'exécutent pas normalement. Une fois la liaison d'événement effectuée sur les balises chargées au début de la page, les balises chargées ultérieurement ne seront chargées que si jQuery l'est. utilisé. Je ne trouve rien à utiliser pour surveiller et implémenter la liaison d'événements.
Le projet stipule que les frameworks tels que jQuery et zetpo ne peuvent pas être utilisés, je voudrais donc demander, comme dans le titre.
<p class="p">標簽p</p>
<script>
var ps = document.querySelectorAll('.p');
for (var i = 0; i < ps.length; i++) {
ps[i].addEventListener('click', function(){
var that = this;
console.log(that.innerText);
})
}
</script>
<script type="template">
<p class="p">字符串標簽p</p>
</script>
3
0
0
歡迎選擇我的課程，讓我們一起見證您的進步~~
Délégation événementielle, le code le plus basique est le suivant !
window.onload = function(){
document.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.className.toLowerCase() === 'p'){
console.log(this.innerHTML);
}
}
}Le document peut être remplacé par d'autres éléments, mais l'élément remplacé doit exister depuis le début ! Il ne peut pas être ajouté dynamiquement après le chargement de la page?!
La délégation d'événement est correcte. Pour parler franchement, elle utilise le bouillonnement d'événements DOM. La réponse de @Waiting for You explique le principe et résout le problème de base. Cependant, il existe encore certaines limites dans les applications pratiques. Il ne peut traiter que l'élément sur lequel on a finalement cliqué, plut?t que les éléments rencontrés lors du processus de bullage.
J'ai écrit un exemple du processus de bouillonnement?: https://jsfiddle.net/4L7p5drb/1/
const outer = document.getElementById("outer");
/**
* host，已經(jīng)存在的元素，用來綁定代理事件的
* evnetName，事件名稱
* predicate，用來判斷代理事件的目標對象 (el: HtmlElement) => bool 類型
* handler，處理函數(shù)，(e: Event) => any 類型，其 this 指向?qū)嶋H目標對象
*/
function proxyListener(host, eventName, predicate, handler) {
host.addEventListener(eventName, e => {
let target = e.target || e.srcElement;
while (target !== host) {
if (predicate(target)) {
handler.call(target, e);
// 這里沒有 break 主要是考慮一多層都擁有可判斷為 true 的對象呢
// 可以根據(jù)實際需要加 break;
}
target = target.parentNode || target.parentElement;
}
});
}
proxyListener(outer, "click",
t => t.classList.contains("middle"),
function(e) {
console.log("hit", this);
});
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
