MYSQL
PHP
HTML
CSS
JS

Обработчики событий. onClick, onMouseMove

Есть 2 способа добавить обработчик событий к dom-элементам. Первый способ - добавляя обработчик в элемент явным образом в описании.
?
1
2
3
4
<div onclick="this.innerHTML='Clicked!'">Click</div>
<div onmousemove="this.innerHTML='Mouse Moved!'">Mouse Move</div>
<div onmouseover="this.innerHTML='Mouse Overed!'">Mouse Over</div>
<div onkeypress="this.innerHTML='Key Pressed!'">Key Press</div>
Click
Mouse Move
Mouse Over
Key Press
Второй способ - добавляя их динамически в JS:
?
1
2
3
4
<div id='clickOnIt'></div>
<div id='moveOnIt'></div>
<div id='overOnIt'></div>
<div id='pressOnIt'></div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    /*Чистый JS*/
    document.getElementById("clickOnIt").onclick=function(){
        this.innerHTML="Clicked!";
    };
 
    /** Чистый JS, можно повесить несколько обработчиков на одно событие **/
    document.getElementById("clickOnIt").addEventListener("click", function(){
        this.innerHTML="Clicked!";
    });
 
    /*jQuery*/
    $("#moveOnIt").on("mousemove", function(){
      this.innerHTML="Moved!";
    });
    $("#overOnIt").on("mouseover", function(){
        $(this).html("Mouse overed!");
    });
    $("#pressOnIt").on("keypress", function(){
        this.innerHTML="Key pressed!";
    });
</script>
Click
Mouse Move
Mouse Over
Key Press
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Сортировка массивов в JS. Функция sort Пишем свой калькулятор на JS Управление HTML элементами Замыкания в Javascript Многоуровневый динамический список на Javascript
↑