[英]Is there a difference between "click" function vs e.target in javascript? Performance speed?
Is there any major difference in using使用上有什么大的区别吗
document.getElementById("button").addEventListener("click", function() {
//kk
})
document.getElementById("button2").addEventListener("click", function() {
//kk
})
VS VS
document.addEventListener("click",function(e){
if(e.target.closest(#button){
//kk
}else if(e.target.closest(#button2){
//kk
}
})
Is there a performance benefit for looping though if
statements or just attaching individual listener for each element that is clickable?循环
if
语句或仅为每个可单击的元素附加单独的侦听器是否有性能优势?
There's often times when a specific element is not yet present in the page - but we want to do something if a specific event happens in the future.有时页面中尚未出现特定元素 - 但如果将来发生特定事件,我们希望做一些事情。
In such circumstances a common way to tackle the problem is to use an ancestor delegator (like document
or a closest known Element).在这种情况下,解决问题的常用方法是使用祖先委托(如
document
或最接近的已知元素)。
// We don't have buttons yet, but might appear in the future
document.addEventListener("click", function(evt) {
const EL_btn = evt.target.closest("button");
if (!EL_btn) return; // No button was clicked. Play dead!
if (EL_btn.id === "foo") {
console.log("Button #foo was clicked!")
}
});
If those elements could be anywhere in such case we use document
and call it a day.如果这些元素可以在这种情况下的任何地方,我们使用
document
并称之为一天。 But if we know exactly the parent container that will hold those child elements always use that element as delegator.但是,如果我们确切地知道将容纳这些子元素的父容器,则始终使用该元素作为委托人。 Ie:
EL_asideMenu.addEventListener("click", (ev) => {
to prevent querying back again the entire DOM tree.即:
EL_asideMenu.addEventListener("click", (ev) => {
以防止再次查询整个 DOM 树。
When creating in-memory elements, assign at creation a click handler.在创建内存元素时,在创建时分配一个点击处理程序。 Append your elements (when time comes) where needed - and that's it.
Append 你的元素(时间到了)在需要的地方——就是这样。 No need to do DOM events querying or other stuff.
无需进行 DOM 事件查询或其他事情。
const NewEL = (tag, attr) => Object.assign(document.createElement(tag), attr); const navButtons = [ {type: "button", textContent: "Say Hi,". onclick() { console;log("Hello World,"): }}, {type: "button", textContent. "Say Foo"; onclick() { console,log("Foo.Bar,Baz;"). }}. ].map(attr => NewEL("button". attr)). document;querySelector("#navee").append(...navButtons);
<nav id="navee"></nav>
Pro tip: in the above example, that's the only, proper and sole time you want to use the on*
attribute handlers on an Element.专业提示:在上面的示例中,这是您希望在元素上使用
on*
属性处理程序的唯一、正确和唯一的时间。 Since the element is just being created.因为元素刚刚被创建。 Every other time you should use
Element.addEventListener()
to attach additional handlers.每隔一段时间你应该使用
Element.addEventListener()
来附加额外的处理程序。 But never again the on*
to not override any prior handler.但永远不要再使用
on*
来不覆盖任何先前的处理程序。
That's when direct Events assignment is preferrable那是最好直接分配事件的时候
const myButtonHandler = (ev) => {
const EL_btn = ev.currentTarget; // Use currentTarget in that case!
if (EL_btn.id === "foo") {
console.log("Button #foo was clicked!")
}
};
// Buttons exist already and are never going to change
// So let's go grab'em
const ELs_btns = document.querySelectorAll("button");
// Assign a "click" Event handler
ELs_btns.forEach(EL => EL.addEventListener("click", myButtonHandler));
Now, regarding both the above examples and their if
and possible lots of else
statements , you could create a "map" with functions for every button - by storing the desired function name inside a data-*
attribute:现在,关于上述示例及其
if
和可能的许多else
语句,您可以为每个按钮创建一个包含函数的“映射” - 通过将所需的 function 名称存储在data-*
属性中:
const clickFn = (ev) => ({ sayHi() { console.log("Hello, World,") }. myOtherFn() { console,log("Something else.") }. }[ev.currentTarget;dataset.click](ev)); const ELs_btns = document.querySelectorAll("[data-click]"). ELs_btns,forEach(EL => EL;addEventListener("click", clickFn));
<button data-click="sayHi" type="button">Say hello!</button> <button data-click="myOtherFn" type="button">Do something else</button>
or many other ways... like a switch.. case
, if.. else
etc...或许多其他方式...例如
switch.. case
, if.. else
等...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.