Skip to main content

Posts

Showing posts with the label click

Three Most Common jQuery Events Part One: Click()

The course summarized three most important and useful jQuery events which could use 99% of the time. These three events are: click(), keypress(), and on(). Click In jQuery, click() method is a quick and easy way to add a click listener to element(s). $("selector").click(function(){ run some code}); Recall the click event in JavaScript, we have to do document.querySelector() first, then addEventListener, and give a function. The jQuery one looks much easier to apply. I create a simple HTML page with some buttons. I will show you how to use click() method to make actions on page. Then, I check whether jQuery file is connected correctly. If I want to get an alert when I click on h1, I will use "$" to select h1, then add alert message inside click() function:  $("h1").click(function(){ alert("h1 is clicked");}) As the result, when you click the h1 text, the page will pop up the alert message. We can write the ...

Advanced DOM: Three Most Popular Event Types We Use All The Time!

Event is that we make things interactive. When we are interacting with a web page, we may click on a button, hover over a picture, drag or drop something, or press the Enter Key. All of those are events and happen all the time. The process of event is that we select an element and then add an event listener to the element we selected. To add a listener, we use a method called addEventListener . element.addEventListener(type, functionToCall); There are two arguments for the addEventListner. Type : the type of event we want to listen for such as "click" FunctionToCall : the function is the code that we want to run when that event happens In our daily life, there are three most popular event types we use all the time: click, mouseover, and mouseout. Click We always like to click the "start" button to start a game or start shopping. How could we do that event in JavaScript? I open the DOM page, and I want the page to pop up an alert message wh...