Есть 2 способа добавить обработчик событий к dom-элементам.
Первый способ - добавляя обработчик в элемент явным образом в описании.
Второй способ - добавляя их динамически в JS:
Спасибо за внимание.
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
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