What is events in website? how to occur and handle in the JQuery?

Asked 28-Jul-2021
Viewed 213 times

1 Answer


1

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?