Main content
Course: Computer programming - JavaScript and the web > Unit 7
Lesson 5: DOM events with jQueryWhat DOM events and properties are there?
Browsers trigger many events. You can use jQuery to add event listeners for any of those events.
A full list of browser events is on MDN, but here are some of the most common event types and names, plus examples of using them:
- mouse events: 'click' (example), 'mousedown'/'mouseup' (example), 'mousemove' (example), 'mouseenter'/'mouseleave' (example)
- keyboard events: 'keydown', 'keypress', 'keyup' (example)
- touch events: 'touchdown', 'touchup', 'touchstart', ‘touchcancel’ (example)
- drag events: 'dragstart', 'dragend' (Many developers use jQueryUI for drag functionality, as it can be tricky to use the drag events directly. Here are examples of draggable elements and drop zones.)
- form events: 'submit' (example), 'change' (example), 'focus'/'blur' (example).
- window events: 'scroll' (example), 'reload', 'hashchange'
When you add an event listener and the event happens, jQuery will call your code back with a jQuery event object that has relevant properties on it. Read the documentation to learn more about what properties are available.
Want to join the conversation?
What are you supposed to do in the challenge "Croc Clicker"?(4 votes)
You have to use jQuery to add an event listener to the element with idcrocs
Make an event listener like this:$("#crocs").on("click", function() {
})
Then add the code for changing the text of#resultsand then increment thenumClicksvariable by 1:$("#crocs").on("click", function() {
$("#results").text("You clicked " + numClicks + " times");
numClicks++;
})
Make sure you define variablenumClicksoutside the event listener function
I would be a good idea to show your source code next time.
Hope this helps(5 votes)
What's wrong with my codes?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Spot the Dog</title>
<style>
.dot {
border-radius: 10px;
background: black;
position: absolute;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<img id="dog-pic" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Alopekis_white_male.jpg" width="500" alt="White dog">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("#dog-pic").on("click", function(event) {
var $dot = $("<div></div>");
$dot.addClass("dot");
$dot.css("position","absolute");
$dot.css("top","event.pageY" + "px");
$dot.css("left","event.pageX" + "px");
$dot.appendTo("body");
});
</script>
</body>
</html>(3 votes)
By putting quotation marks aroundevent.pageYandevent.pageX, you've converted them into strings. They must be object properties (at least, I assume they're object properties). Treat them the way you would if they were variables.(4 votes)
Can't we just do it like this:
$("element").click(function(event) {
console.log("blabla")
})
What's the difference of what we learned? Aren't they both the same thing?(1 vote)
.click(); is a function specialized for clicking while .on(); can use any event. You can decide which to use depending on the circumstance.(3 votes)
- How to do "croc clicker"?(2 votes)
- Why in the mousemove example there is no "on" method used? I have tried to use this strange procedure on other examples and it won´t work. Is it because this strange procedure is only valid when we are listening to events on the document?(1 vote)
- Why if I delete the script-tag where the JQuery library is taken from a CDN nothing happens?? I´ve tried this in the example above: mouse events, click.(1 vote)
- I think that KA preset jQuery into our programs.(1 vote)
What does MDN, stand for?(1 vote)- Mozilla Developer Network - a reference for developers that includes useful JavaScript info. Mozilla is the company responsible for the FireFox browser.(1 vote)
- What if you wanted to do something on hover?(1 vote)
- There is no event for hover, so you would have to do something like
$element.on("mouseenter", function() {
var timeout;
interval = setTimeout(function() {
// put hover code here
}, 500);
$element.on("mouseleave", function () {
clearTimeout(interval);
});
});setTimeout(func, millis)runs func after millis milliseconds. For more information onsetTimeoutsee https://www.w3schools.com/jsref/met_win_settimeout.asp(1 vote)
Hi!
How do you make text that pops up on the screen as if someone was actively typing it? Also, I'm trying to create dialogue boxes that change every time the user clicks for the project at the end of this unit. How would I do so?
Thanks!(1 vote)
In spot the dog the code supposed to cover the dog with dots. The line of code I'm confused is that it is saying that it has a error and hascodeILLEGAL CODE(1 vote)
