Main content
Course: Computer programming - JavaScript and the web > Unit 7
Lesson 5: DOM events with jQueryReview: DOM events in jQuery
Adding an event listener
You can add an event listener using
on(): $("#save-button").on("click", function() {
// handle click event
});If you need to access details about the event, you can find them in the jQuery event object that's passed into the callback function:
$("#face-pic").on("click", function(event) {
var mouseX = event.pageX;
var mouseY = event.pageY;
});Triggering events
You can manually trigger an event on an object from your JavaScript using trigger:
$("#save-button").trigger("click");That can be useful when testing new functionality, or when you want some code to run both when the page loads and after some particular event.
Checking DOM readiness
If you want to be sure that the browser does not run your JS code until the DOM is fully loaded and ready, then you can pass your code to
ready(): $(document).ready(function() {
$("h1").text("Y'all ready for this?");
});A shorter version of that is to pass your code to the jQuery function:
$(function() {
$("h1").text("Y'all ready for this?");
});That code is not as readable as the longer version, however, so we recommend using the
ready() function.Note that if you include your JS in a
<script> tag at the bottom of the page, then your DOM should be fully ready by the time the browser runs your JS. However, if you want to be doubly sure, then you can choose to always check for DOM readinesss.More event techniques
For a longer summary and deeper dive into jQuery events, read jQuery Event Basics in their documentation.
Want to join the conversation?
In the next project I'm trying to get it so that when you click the leafers image the next story line will pop up at the bottom (I've gotten this to work) and the image of the next, older leafers will pop up in the sand as well, but I've tryed googling different ways to try and do that but the image won't show up when you click leafers! Here's my code so far...
<!DOCTYPE html>
<!--Click the background (the picture), then leafers, followed by the images that pop up! -->
<html>
<head>
<meta charset="utf-8">
<title>Project: Scene change</title>
<style>
#leafers {
position: absolute;
top: 210px;
left: 378px;
}
#biggerLeafers{
position: absolute;
top: 250px;
left: 520px;
}
#bigLeafers {
position: absolute;
top: 330px;
left: 340px;
}
#biggestLeafers{
position: absolute;
top: 350px;
left: 480px;
}
</style>
</head>
<body>
<img src="https://www.kasandbox.org/programming-images/landscapes/beach-with-palm-trees.png" id="photo">
<img src="https://www.kasandbox.org/programming-images/avatars/leafers-seedling.png" id="leafers">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("#photo").on("click", function() {
var $story = $("<div></div>");
$story.text("Once there was a young leafers that got stranded on a deserted island...");
$story.appendTo("body");
$dot.css("top", event.pageY + "px");
$dot.css("left", event.pageX + "px");
});
$("#leafers").on("click", function() {
var $story = $("<div></div>");
$story.text("Then he grew and became an even bigger leafers!");
$story.appendTo("body");
$dot.css("top", event.pageY + "px");
$dot.css("left", event.pageX + "px");
$('#theDiv').html('<img src="https://www.kasandbox.org/programming-images/avatars/leafers-sapling.png" id="biggerLeafers" />');
$('#theDiv').appendTo("body");
$('#divid').append('<img src="https://www.kasandbox.org/programming-images/avatars/leafers-sapling.png" />');
});
$("#biggerLeafers").on("click", function() {
var $story = $("<div></div>");
$story.text("And got even bigger and became big leafers");
$story.appendTo("body");
$dot.css("top", event.pageY + "px");
$dot.css("left", event.pageX + "px");
$('#theDiv').prepend('<img id"biggerLeafers" src="http://www.kasandbox.org/programming-images/avatars/leafers-tree.png"/>');
});
$("#bigLeafers").on("click", function() {
var $story = $("<div></div>");
$story.text("And he continued growing and became ULTIMATE LEAFERS!");
$story.appendTo("body");
$dot.css("top", event.pageY + "px");
$dot.css("left", event.pageX + "px");
$('#theDiv').prepend('<img src="https://www.kasandbox.org/programming-images/avatars/leafers-ultimate.png" id="biggestLeafers">');
});
</script>
</body>
</html>
Help!(4 votes)
try to add these lines into each function:
$story.css("position" , "absolute");
$story.css("top", event.pageY + "px");
$story.css("left", event.pageX + "px");(2 votes)
In the previous video, Pamala puts her JavaScript at the beginning and then used the function to make it still run. Why wouldn't you just put the function at the end instead of writing the function to still make it work?(2 votes)
Because, like Pamela said in the talkthrough, there are times when you don't want to do it or can't do it.(1 vote)
Is there a way to do something when a key is pressed?(1 vote)
Yes, there is. There are two ways of doing that: using keyPressed and keyIsPressed. KeyPressed is a function:keyPressed=function(){
//Stuff here
};
And KeyIsPressed is a variable:if (keyIsPressed){
//Code Here
}(2 votes)
How do u make it that when u click a specific key the document executes a command?(1 vote)
You've probably seen mention of it in this article: https://www.khanacademy.org/computing/computer-programming/html-js-jquery/dom-events-with-jquery/a/dom-events-and-properties
It links you to this example: https://www.khanacademy.org/computer-programming/jquery-example-keyboard-events/5042465149681664
The interesting lines are:$("input:text").on("keypress", function);
$("input:text").on("keydown", function);
$("input:text").on("keyup", function);(2 votes)
Where can I find pictures to use for the project; some pictures don't work.(1 vote)- You can use wikipedia images or Khan Academy images only in the KA editor.(2 votes)
- I have a question that's not related to this page. I'm working on a project and I need to save patient's info(first name, last name, phone #, etc). I've written the following code for the first name to be saved. Should I be doing this for each and every info in the profile?
<button id="profileSaveButton" type = "save">Save</button>
var saveButton = document.getElementById("profileSaveButton");
var saveProfile = function(){
var firstName = document.getElementById("firstName").value;
saveButton.localStorage.setItem("firstName", firstName);
};
saveButton.addEventListener("click", saveProfile);(1 vote) 
What is the purpose of$("").trigger("");?
I couldn’t understand that :((1 vote)
It triggers an event on an object.
$("#save-button").trigger("click");
I think causes the click event to be run in the savebutton(1 vote)
Can you add two or more events on one selector? for example $("#save-button").on("click", "mouseEnter" function() {
// handle click event
});(0 votes)- im not sure, but you could chain events :
$("#save-button").on("click", function() {
// handle click event
}).on("mouseenter", function() {
// handle click event
})(1 vote)
- What is the difference between trigger and click?(0 votes)
.click()is one type of event..trigger()does what it says - it programatically triggers an event (such as "click"), invoking the callback function.(1 vote)
- I could use some help on my Scene change project. I've looked at other people's code and have adapted it to fit my code somewhat, but I always end up going back to the drawing board. In this project, I am trying to make it so that you click the leafers seedling and the leafers tree appears. Then you click the avatar team and Oh Noes Guy appears. After that, you click the background and everything changes to lava erupting from a volcano. I got the volcano and leafers to work, but I'm stuck on the Oh Noes Guy part.
Here is the link to the project:
https://www.khanacademy.org/computer-programming/project-scene-change/5593904286072832
Where is the bug?(0 votes)
