JavaScript events
It’s all eventful
Much of what we want to do with JavaScript is wait for users to interact
That user interaction is called an “event”
Event listening
- When a user interacts with your website an event is triggered
- Your JS can listen to when that event happens
- A function you write can be called when an event happens
Events
click,dblclick,contextmenumousedown,mouseup,mouseover,mouseout,mousemovekeypress,keydown,keyupfocus,blur,change,submit- animation, transition, touch, drag, browser
- and many, many more…
Responding to events
jQuery’s on() function can be used to listen and respond
There’s also off() if you want to stop listening
HTML
<button id="click-me">Click me!</button>
$('#click-me').on('click', function () {
alert('Hello, World!');
});
HTML
<ul>
<li>Titanosaurus</li>
<li>Apatosaurus</li>
<li>Brontosaurus</li>
<li>Brachiosaurus</li>
</ul>
.is-clicked {
background-color: limegreen;
}
$('ul').on('click', 'li', function (e) {
$(this).toggleClass('is-clicked');
});
HTML
<a class="stego-link" href="https://en.wikipedia.org/wiki/Stegosaurus">Go!</a>
var $link = $('.stego-link');
$link.on('click', function (e) {
e.preventDefault();
alert($(this).attr('href'));
});
HTML
<form>
<label for="grocery-input">Shopping list</label>
<input id="grocery-input">
<button type="submit">Add</button>
</form>
<ul class="list"></ul>
var $input = $('#grocery-input');
var $list = $(".list");
$('form').on('submit', function (e) {
var $li = $('<li>');
e.preventDefault();
$li.html($input.val());
$list.append($li);
});