"Image gallery" task, problem about "e.target", please help me

MDN Learn
1

Well, i’m not a native speaker, so i might cannot describe my question very well, hope you can understand and help me.

i’ve uploaded my answer(code) to my GihHub respository. it works well.
“Image Gallery”, my own GitHub respository

The problem is, is there any differences between e.target.e.target.setAttribute(‘class’, ‘light’) and btn.target.e.target.setAttribute(‘class’, ‘light’) ?
(the code is in “btn.onclick”, which i’ve already write it with an anonymous function –
btn.onclick = function (e){…}
)
i tried both of the expression above, and both of them work well.
can i simplely think, “e.target” is equal to “btn”,?
and even in any code like

“elementName.eventname = function(e) {…}”
can i think
“e.target” is equal to the variable “elemntName”?

thanks for your reply.

2

Hello @OMpZoNE

according to your code
btn = document.querySelector(‘button’);
so it will return the button object
please be careful in case if there many button on your page which will make btn to be array of button objects

for your question

if i understand your question right

this

btn.onclick = function () {    
    if (btn.getAttribute("class") === "dark") {
        btn.setAttribute('class', 'light');
        btn.textContent = "变亮";
        overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
    }        
    else {
        btn.setAttribute('class', 'dark');
        btn.textContent = '变暗';
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
    }
}

equal this

btn.onclick = function (e) {    
    if (e.getAttribute("class") === "dark") {
        e.setAttribute('class', 'light');
        e.textContent = "变亮";
        overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
    }        
    else {
        e.setAttribute('class', 'dark');
        e.textContent = '变暗';
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
    }
}

cause e will be equal btn cause the function of the event handler get the object that the event fired on it

but for me i use the first case unless if i want to create many event listener as in the case of the thumb image

hope that help and have a nice day:)

2 Likes
3

thanks alot for your reply, and i think i understand your analysis.

but in fact, the 2nd code block in my problem is, i use “e.target”, and it is also worked.
btn.onclick = function (e) {
if (e.target.getAttribute(“class”) === “dark”) {
e.target.setAttribute(‘class’, ‘light’);
e.target.textContent = “变亮”;
overlay.style.backgroundColor = “rgba(0,0,0,0.5)”;
}
else {
e.target.setAttribute(‘class’, ‘dark’);
e.target.textContent = ‘变暗’;
overlay.style.backgroundColor = ‘rgba(0,0,0,0)’;
}
}

and now, i’m reading about the document of Event and Event.target on MDN, i think the answer is there.

4

and, i just test my code again.
if i change “btn” to “e”, it doesn’t work.
for example, if i change “btn.textContent = “变亮”;” to “e.textContent = “变亮”;”, it doesn’t work.

5

sorry for my miss type
change btn to e.target

btn.onclick = function (e) {    
    if (e.target.getAttribute("class") === "dark") {
        e.target.setAttribute('class', 'light');
        e.target.textContent = "变亮";
        overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
    }        
    else {
        e.target.setAttribute('class', 'dark');
        e.target.textContent = '变暗';
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
    }
}
6

so btn wll be equal e.target

sorry for that mistake

7

你好， 事件对象 e 的 target 属性始终是事件刚刚发生的元素的引用。
所以在这个情况下 e.target 指向了 btn 这个按钮元素，两者相同。

1 Like
8

刚下我看了下target和currentTarget两个属性的说明，是不是像myButton这样的一个button元素，对应的e.target和e.currentTarget都和这个myButton相同？
但是有些特殊的（比如ul）就不相同，这个是不是得查每个元素的事件监听器是否监听的自身？
然后好像currentTarget是永远指向自身的，但是target就不一定了

9

不好意思，我还没有用到过 currentTarget 这个属性，所以暂时不清楚这个问题的答案。