Как объединить два события | Javascript

Объединение двух событий

Так работает

<input type="button" value="навести" onmouseover="one();" onmouseout="two();" />

<script>
function one() {
    alert('Здравствуйте');
}

function two() {
    alert('Ещё раз привет');
}
</script>

Так не работает

<input type="button" value="клик" onclick="one();" onclick="two();" />

<script>
function one() {
    alert('Здравствуйте');
}

function two() {
    alert('Ещё раз привет');
}
</script>

Так можно

<input type="button" value="клик" onclick="one(); two();" />

<script>
function one() {
    alert('Здравствуйте');
}

function two() {
    alert('Ещё раз привет');
}
</script>

И так

<input type="button" value="щелчок" id="click" />

<script>
document.getElementById('click').onclick = three;

function one() {
    alert('Здравствуйте');
}

function two() {
    alert('Ещё раз привет');
}

function three() {
    one();
    two();
}
</script>

И так

<input type="button" value="щелчок" id="click" />

<script>
var raz = document.getElementById('click');

raz.addEventListener("click", one);
raz.addEventListener("click", two);

function one() {
    alert('Здравствуйте');
}

function two() {
    alert('Ещё раз привет');
}
</script>

Два события вызывают одну функцию

Изначально текст 111. Если нажата клавиша клавиатуры или совершён щелчок по тексту, то - 222

<input type="button" value="111" id="raz"/>

<script>
window.onkeyup = function() {
    document.getElementById('raz').value = '222';
}

document.getElementById('raz').onclick = function() {
    document.getElementById('raz').value = '222';
}
</script>

Для того, чтобы упростить код:

<input type="button" value="111" id="raz"/>

<script>
window.onkeyup = ya;
document.getElementById('raz').onclick = ya;

function ya() {
    document.getElementById('raz').value = '222';
}
</script>

Или:

<input type="button" value="111" id="raz"/>

<script>
function ya() {
    document.getElementById('raz').value = '222';
}
window.addEventListener("keyup", ya);
document.getElementById('raz').addEventListener("click", ya);
</script>

Практическое использование.

в f t
наверх ↑

7 комментариев:

Анонимный
Да это сложно!
NMitra
Нужно дополнить пример с addEventListener когда будет минутка.
Анонимный
Здравствуйте!
У меня такой вопрос.
Да два вызова окна это хорошо.
А как сделать. Например я нажал на кнопку див поменял цвет. Нажал ещё раз, див опять поменял цвет. То есть как бы что бы по порядку одно действие, ещё нажатие другое действие. Не скажите как это сделать?
А то у меня сейчас одним кликом один цвет, два клика другой цвет.

Буду благодарен за любую инфо.
До свидания.
NMitra
Здравствуйте, https://jsfiddle.net/Lv9b5g7q/

<div></div>

<script>
document.querySelector('div').onclick = function() {
this.style.backgroundColor = (this.style.backgroundColor == 'red' ? 'green' : 'red');
}
</script>

Тоже самое (если фон красный, то сделать его зелёным, иначе - else - красным) https://jsfiddle.net/Lv9b5g7q/1/

<div></div>

<script>
document.querySelector('div').onclick = function() {
if (this.style.backgroundColor == 'red') {
this.style.backgroundColor = 'green';
} else {
this.style.backgroundColor = 'red';
}
}
</script>
Анонимный
Спасибо Спасибо Спасибо!!!
Вы как всегда спасаете меня.
Благодарю Вас.
Анонимный
Чётко. Спасибо. Замечательная подача информации. Чётко. Прямо в точку. Ни капли лишнего. Вощще.
NMitra
Спасибо за отзыв! Подняли настроение :)