Вопрос по javascript, events, handler – события прикрепления javascript

4

Я видел, что вы можете прикреплять такие события

<button type="button" id="myButton" onclick="myFunction()">

Вы можете сделать то же самое без"onclick=", лайк:

document.getElementById('myButton'). //and here attach the event on click to myFunction

Я пытаюсь разделить JavaScript и HTML.

Ваш Ответ

6   ответов
8

Это похоже наonclick подход, и фактически использует тот же обработчик событий, но удален из HTML:

document.getElementById('myButton').onclick = function(){
    // do stuff
    myFunction();
}

Если у вас нетid на элементе вы также можете использовать:

var inputs = document.getElementsByTagName('input');

for (var i=0, len=inputs.length; i<len; i++){
    if (inputs[i].type == 'text'){
        // assuming you want to affect text-inputs in this case
        inputs[i].onclick = function(){
            // do stuff. In here 'this' refers to inputs[i] element
            myFunction();
        };
    }
}

Альтернативный подход, использующийArray.prototype.forEach()с массивом элементов, созданных с использованиемArray.prototype.slice() а такжеdocument.querySelectorAll():

[].forEach.call(document.querySelector('input[type="text"]', yourFunctionName);

Это выполнитyourFunctionName() функция для каждого<input /> элемент, изtype="text", возвращенныйdocument.querySelectorAll() прохождение этого<input /> элемент в функцию какthis.

Вы также можете использоватьaddEventListener() в этом случае:

document.getElementById('myButton').addEventListener('click', myFunction, false);

А также в этой ситуации, используяdocument.querySelector() (в отличие отdocument.querySelectorAll()), который возвращает первый элемент, который соответствует переданному селектору, используя нотацию CSS:

// gets the element with an 'id' of 'myButton', binding the 'click' event-handler:
document.querySelector('#myButton').addEventListener('click', myFunction, false);

Или же:

// gets the first of the <input> elements, binding the 'click' event-handler:
document.querySelector('input').addEventListener('click', myFunction, false);

Рекомендации:

вау так просто, спасибо! user983124
Добро пожаловать; Я рад, что мне помогли! знак равно
4

Конечно, вам нужно только выбрать свой элемент и вызвать его соответствующую функцию обратного вызова. p.e:

document.getElementById('myButton').onclick = function(e) {
    // your code here
}

Или без встроенной функции:

document.getElementById('myButton').onclick = myObject.myMethod;

https://developer.mozilla.org/en/DOM/element.onclick

+1 за то, что вы избежали когда-либо распространенной встроенной функции & # x2014; они действительно не панацея, так часто востребованная ими.
3

Что-то вроде этого:

  document.getElementById('myButton').onclick = function() {location.href='http://stackoverflow.com';return false;}
0

document.getElementById('myButton').onclick = function() { myFunction(); }
Как насчет сейчас...
Вы даетеonclick возвращаемое значениеmyFunction()еслиmyFunction() возвращает функцию, это не правильно
спасибо @NiftyDude и Энтони Грист, узнал что-то новое
Вы можете просто опустить() см. ответ Энтони Гриста
2

document.getElementById('myButton').onclick = function () {
        console.log('Inline event attach');
    };

    document.getElementById('myButton').addEventListener('click', function () {
        console.log('Using native addEventListener');
    }, false);
Хороший и легкий для понимания ..
4

Да, вы можете (и должны!).

document.getElementById('myButton').onclick = myFunction;

Похожие вопросы