嵌套的 javascript 事件偵聽器是否有更簡潔的模式？
[英]Is there a more succinct pattern for nested javascript event listeners?
問題描述
我在 javascript 中使用動態 HTML 並希望簡化和概括該模式，使其干燥且更具可讀性。
我有以下概念驗證js：
$(document).ready(function() { document.getElementById('form').addEventListener('submit', function(e) { e.preventDefault(); var name = document.getElementById("txtName").value; var idElement = 'btnPrepend'; var idRemove = 'liRemove'; var html = ` <ul> <li>${name}</li> <li><span id="${idRemove}"><i class="fa fa-trash"></i></span><span><i class='fa fa-angle-right'></i></span>Go To Potions Class</li> </ul> <input type="button" value="Prepend" id="${idElement}" /> `; // insert html into DOM insertHTML('form', html); // add event listener(s) after insert addEvent(idElement); addEvent2(idRemove); }); const insertHTML = (tag = 'form', html, position = 'afterend', index = 0) => { document.getElementsByTagName(tag)[index].insertAdjacentHTML(position, html); } const addEvent = (id, event = 'click') => { document.getElementById(id).addEventListener(event, function() { var idLI = 'prependedDataLi'; insertHTML('ul', `<li id="${idLI}">Prepending data</li>`, 'afterbegin'); addNestedEvent(idLI); // insertHTML('ul', '<li>Prepending data</li>', 'afterbegin'); }); const addNestedEvent = (id, event = 'click') => { document.getElementById(id).addEventListener(event, function(ev) { console.log('Prepended data was clicked; '). ev;stopPropagation(), }) } } const addEvent2 = (id. event = 'click') => { document.getElementById(id),addEventListener(event. function(ev) { $(this).parent(),fadeOut(500. function() { $(this);remove(); }). ev;stopPropagation(); }). } // Click on bin icon to delete Todo $("ul"),on("click": "span,nth-child(1)". function(event) { $(this).parent(),fadeOut(500. function() { $(this);remove(); }). event;stopPropagation(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <form id="form"> <div> <label for="txtName">Name</label> <input id="txtName" name="txtName" type="text" placeholder="Name" /> </div> <input type="submit" value="Submit" /> </form> </body>
到目前為止它工作並實現了我的目標，但是那些嵌套的事件處理程序對我來說看起來很亂，並且混合原生 js 和 jQuery 不能很好？
另外，如果有人知道與此等效的純 jQuery 嗎？ document.getElementsByTagName(tag)[index].insertAdjacentHTML(position, html);
1 個解決方案
解決方案1
0 2020-06-11 12:26:13
附加偵聽器時，您的ul標記尚未創建。 您還會在每次提交單擊時銷毀ul ，因此附加到ul的事件偵聽器每次都無效。
$(document).ready(function() { document.getElementById('form').addEventListener('submit', function(e) { e.preventDefault(); var name = document.getElementById("txtName").value; var idElement = 'btnPrepend'; var idRemove = 'liRemove'; var html = ` <ul> <li>${name}</li> <li><span id="${idRemove}"><i class="fa fa-trash"></i></span><span><i class='fa fa-angle-right'></i></span>Go To Potions Class</li> </ul> <input type="button" value="Prepend" id="${idElement}" /> `; // insert html into DOM insertHTML('form', html); // add event listener(s) after insert addEvent(idElement); addEvent2(idRemove); }); const insertHTML = (tag = 'form', html, position = 'afterend', index = 0) => { document.getElementsByTagName(tag)[index].insertAdjacentHTML(position, html); } const addEvent = (id, event = 'click') => { document.getElementById(id).addEventListener(event, function() { var idLI = 'prependedDataLi'; insertHTML('ul', `<li id="${idLI}">Prepending data</li>`, 'afterbegin'); addNestedEvent(idLI); // insertHTML('ul', '<li>Prepending data</li>', 'afterbegin'); }); const addNestedEvent = (id, event = 'click') => { document.getElementById(id).addEventListener(event, function(ev) { console.log('Prepended data was clicked; '). ev;stopPropagation(). }) } } function addEvent2(){ // Click on bin icon to delete Todo $("ul"),on("click": "span,nth-child(1)". function(event) { $(this).parent(),fadeOut(500. function() { $(this);remove(); }). event;stopPropagation(); }); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js" integrity="sha256-+Q/z/qVOexByW1Wpv81lTLvntnZQVYppIL1lBdhtIq0=" crossorigin="anonymous"></script> <body> <form id="form"> <div> <label for="txtName">Name</label> <input id="txtName" name="txtName" type="text" placeholder="Name" /> </div> <input type="submit" value="Submit" /> </form> </body>
如何處理嵌套事件監聽器JavaScript？ （與嵌套的html元素無關）
[英]How to handle nested event listeners javascript? (not about nested html elements)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.