javascript – So verwenden Sie natives JS, um das Ereignis zu überwachen und mehr geladene Tags zu binden
天蓬老师
天蓬老师 2017-06-26 10:56:02
0
3
808

Einige Projekte verwenden JS-Vorlagen, aber die Tags in der Vorlage sind HTML-Tags, deren Zeichenfolgen nicht normal ausgeführt werden. Nachdem die Ereignisbindung für die am Anfang der Seite geladenen Tags durchgeführt wurde, werden die später geladenen Tags nur dann geladen, wenn jQuery dies tut Mir fällt nichts ein, was ich zum Überwachen und Implementieren der Ereignisbindung verwenden könnte.
Das Projekt schreibt vor, dass Frameworks wie jQuery und zetpo nicht verwendet werden dürfen, daher möchte ich wie im Titel fragen.

标签p

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

Antworte allen (3)
巴扎黑

事件委托吧,一个最基本的代码如下!

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);     }   } }

document可以用其它元素代替,但是,代替的元素必须是一开始就存在!不能是页面加载了再动态加进来的!

    ringa_lee

    一般都是事件委托

      漂亮男人

      事件委托是没错,说白了就是利用 DOM 的事件冒泡, @守候你 的答案说明了原理,也解决了基本的问题。但在实际应用中还是会有一些局限,它只能处理终点击的那个元素,而不是处理冒泡过程中遇到的元素。

      我写了一个冒泡过程中的示例:https://jsfiddle.net/4L7p5drb/1/

      const outer = document.getElementById("outer"); /** * host,已经存在的元素,用来绑定代理事件的 * evnetName,事件名称 * predicate,用来判断代理事件的目标对象 (el: HtmlElement) => bool 类型 * handler,处理函数,(e: Event) => any 类型,其 this 指向实际目标对象 */ 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 的对象呢 // 可以根据实际需要加 break; } target = target.parentNode || target.parentElement; } }); } proxyListener(outer, "click", t => t.classList.contains("middle"), function(e) { console.log("hit", this); });
        Neueste Downloads
        Mehr>
        Web-Effekte
        Quellcode der Website
        Website-Materialien
        Frontend-Vorlage
        Über uns Haftungsausschluss Sitemap
        Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!