this в addEventListener

158
19 апреля 2018, 11:26

Как правильно через addEventListener передать this, в функцию deleteFile?

function deleteFile (e)
    {
        console.log(e.dataset.file);
    }
    btnsDeleteFile = document.querySelectorAll('.deleteFile');
    for (var i = 0; i < btnsDeleteFile.length; i++) {
        btnsDeleteFile[i].addEventListener('click', deleteFile);
    }
Answer 1

Есть несколько способов.

Замыкание:

[...document.querySelectorAll('.deleteFile')].forEach(el =>  
    el.addEventListener('click', e => console.log(el)) 
);
<div class='deleteFile'>1</div> 
<div class='deleteFile'>2</div> 
<div class='deleteFile'>3</div>

This, как вы просили:

function deleteFile (e) { 
    console.log(this); 
} 
     
[...document.querySelectorAll('.deleteFile')].forEach(el =>  
   el.addEventListener('click', deleteFile));
<div class='deleteFile'>1</div> 
<div class='deleteFile'>2</div> 
<div class='deleteFile'>3</div>

event.target

function deleteFile (e) { 
    console.log(e.target); 
} 
     
[...document.querySelectorAll('.deleteFile')].forEach(el =>  
   el.onclick = deleteFile);
<div class='deleteFile'>1</div> 
<div class='deleteFile'>2</div> 
<div class='deleteFile'>3</div>

READ ALSO
Методы объекта ES5
javascript

Методы объекта ES5

Можно ли обратиться к методу объекта изнутри через binding identifier, как во второй функции?

 120
Css файл с атрибутом disabled загружается дважды
javascript

Css файл с атрибутом disabled загружается дважды

Здравствуйте!

 147
Отображение js android
javascript

Отображение js android

 164
Поиск в яндексе на node.js [требует правки]
javascript

Поиск в яндексе на node.js [требует правки]

Есть вопросы,которые бот должен искать в яндексеКак можно это реализовать?

 136