Of Stack

Detailed Explanation of jQuery Event

  • 2021-07-24 09:23:19
  • OfStack

1. window event 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    alert("1");
   })
   window.onload=function
  </script>
 </head>
 <body>
  <h1>New Web Project Page</h1>
 </body>
</html>

2. Mouse Event (Light Stick Effect) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    var aa=$("li");
    aa.mouseover(function(){
     $(this).css("background","blue")
    })
    aa.mouseout(function(){
     $(this).css("background","")
    })
   })
  </script>
 </head>
 <body>
  <ul>
   <li> Hehe </li>
   <li> Hee hee </li>
   <li> Ha ha </li>
  </ul>
 </body>
</html>

3. Keyboard events 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $("input").keyup(function(event){
     var co=event.keyCode;
     alert(co);
    })
   })
  </script>
 </head>
 <body>
  <h1> Hehe </h1> 
  <input />
 </body>
</html>

4. Form Events 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $("input").focus(function(){
     $("span").addClass("myred")
    });
    $("input").blur(function(){
     $("span").removeClass("myred")
    });
   });
  </script>
 </head>
 <body>
  <h1> Hehe </h1> 
  <input /><span > Ah ah ah ah ah ah ah ah </span><br />
  <input /><span > Ah ah ah ah ah ah ah ah </span>
 </body>
</html>

5. Unbind 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $("li").bind({
     "mouseover":function(){
      $(this).css("background","blue")
     },
     "mouseout":function(){
      $(this).css("background","")
     }
     "click":function(){
      alert($(this).text());
     }
    }).unbind("mouseover mouseout");
    });
  </script>
 </head>
 <body>
  <ul>
   <li> Hehe </li>
   <li> Hee hee </li>
   <li> Ha ha </li>
  </ul>
 </body>
</html>

Differences of live (), on (), deletage () and bind () in JQ

bind () method is the most direct method to bind events, this method is the longest-standing method to bind to document, and it also solves the compatibility problem well;

Advantages of the bind () approach:

1. Solve the compatibility problem of various browsers well;

2. It is very convenient and simple to bind events;

3. It is very good for the elements selected by ID, not only can hook go up quickly (because there is only one id per page), but also handler can be implemented immediately when the event occurs;

Disadvantages of the bind () approach:

1. bind () does not bind to elements added through bind ();

2. He will bind to all the selected elements;

3. The bind () event will be executed only after the page is loaded, which may cause efficiency problems;

The binding method of live () is bound by bubbling mechanism. Since it is not recommended to use above JQ 1.7, it will not be explained here.

deletage () This method has never been used before, and it is known that there is such a method of binding events after reading it;

The deletage () method is a bit like the live () method, but unlike the live () method, it does not bind event to all ducoment, but you decide what to bind it to;

Advantages of deletage ():

1. Support binding to dynamically added elements

2. You can choose to put that event on the element you specify;

Disadvantages of deletage ():

1. Although the reduction of decoment is very small, it is still necessary to find the event bound to that element. It takes 1 fixed time.

on (): In fact, bind (), live () and delegate () can all be replaced by on (); Like undind (); One sample of die () and undeletage () can be realized by off ();

Advantages of on (): 1. Provides a mechanism for binding events.

Disadvantages of on (): 1. Hides some details of the previous method.

Conclusion: The cost of using bind () is very high, and he will bind all the time to DOM;

live () zai JQ 1.7 is no longer recommended;

deletage () can add binding events to dynamic elements;

on () combines the previous three methods to have a system for binding events. But ON () does not support binding dynamically added elements

Related articles: