JavaScript события, OnFocus

Question

Теперь я меняется поведение ONFOCUS по умолчанию (OnClick и т.д.) события, как это:

<div onfocus="my(this);"> </div> 
function my(e){ 
    e.style.backgroundColor = "red";//here we do not use getElementById 
} 

Это работает хорошо, пока я не нужно прикрепить события из JavaScript. Конечно, мы можем использовать addEventListener("focus", my), но в этом случае мы не отправляем this значение, и мне нужно найти по getElementById, но это не хорошо для меня. Как я могу решить эту проблему? Спасибо

Answer 1

Попробуйте это. Измените HTML для этого:

<div onclick="my(event);"> test</div> 

И ваши JS к этому:

function my(e){ 
    e.target.style.backgroundColor = "red";//here we do not use getElementById 
} 

e.target является элементом, который получил событие.

Answer 2

document.querySelector("div").addEventListener("click", my, false); //select the only div 
 

 
    function my(e){ 
 
     e.target.style.backgroundColor = "red";//here we do not use getElementById 
 
    }

<div> Test div </div>

Target является ключевым словом. Я бы по-прежнему использовал addEventListener, поскольку это более стандартный подход, чем встроенные события. Также (теперь он вам не нужен) он отправляет ключевое слово this, и он позволяет подключать другие подобные события без их переопределения.

Answer 3

Working example here

Добавьте класс каждый Div вы хотите использовать для фокусировки с TabIndex. Tabindexes может сделать дивы фокус

<div class="sofocus" tabindex="0"> 

И теперь вы можете просто добавить EventListener

var focusDivs = document.querySelectorAll('.sofocus'); 
for(var i = 0; i < focusDivs.length; i++){ 
    var div = focusDivs[i]; 
} 

Bind каждый Div с событием

div.addEventListener("focus", styleItRed); 

А также не фокусирование больше

div.addEventListener("blur", removeColor); 

С что вы можете создать функции

function styleItRed(){ 
    this.style.color = 'red'; 
} 

function removeColor(){ 
    this.style.color = 'inherit'; 
}