---
title: "What is events in website? how to occur and handle in the JQuery?"  
description: "What is events in website? how to occur and handle in the JQuery?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93825/what-is-events-in-website-how-to-occur-and-handle-in-the-jquery  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 2 minutes  

---

# What is events in website? how to occur and handle in the JQuery?

What is [events](https://www.mindstick.com/forum/1622/writing-events-to-log-text-file-using-java) in [website](https://www.mindstick.com/articles/12445/5-ways-to-make-your-website-more-professional)? how to occur and [handle](https://www.mindstick.com/articles/311004/suede-skillet-handle-cover) in the JQuery?

## Answers

### Answer by Ravi Vishwakarma

jQuery events are actions that can be detected by web browsers. These events are used to create dynamic pages in the web site. An event shows the actual action on a web page. When the user manipulates the web page, it is called events. Such as mouse click, mouse enter, page loading, change of text from testfield. In other words, any action taken by the user on the page is called events.

**Some example of events** \

1. Mouse Click on page
2. Web page loading
3. Scrolling a page
4. Mouse enter on page

## Following name of events

1. click event
2. dblclick event
3. mouseenter event
4. keyup event
5. keydown event
6. keypress event
7. submit event
8. change event
9. focus event
10. load event
11. unload event
12. resize event

```
Syntax:$(selector).event-name( function(){    //statement});
```

```
<!doctype html>
<html lang='en'>
  <head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <!-- Bootstrap CSS -->
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
<title>Event demo</title>
    <script>
        $(document).ready(function () {
            $('#clk').click(function () {
                $('p').text('Single Click on box');
            });
            $('#clk').dblclick(function () {
                $('p').text('Double Click on box');
            });
        });
    </script>
</head>
<body>
    <div class='container'>
        <div class='p-3 my-3 bg-primary text-center text-white rounded-lg' id='clk'>Click me ( one or two times) </div>
        <p class='alert alert-link'>Single Click</p>
    </div>
    <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
  </body>
</html>
```

Output:

![What is events in website? how to occur and handle in the JQuery?](https://answers.mindstick.com/questionanswer/1d211efc-068a-4400-a949-9bf70bbfd913/images/43bd4c70-d6eb-444e-806a-08cbf30b8a30.png)

\

\


---

Original Source: https://answers.mindstick.com/qa/93825/what-is-events-in-website-how-to-occur-and-handle-in-the-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
