Home > Developer > Web Develop

06jquery-05-Events

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The code for different browser binding events is not the same, so we can block differences between browsers by using jquery to write code.
In jquery, you can use the onTo bind an event, specifying the name of the event and the corresponding handler function: 
  
 
    
   
  
  1. 
  
  2. // 获取超链接的jQuery对象:
    3. 
   
  
  3. 
  
  4. var a = $(‘#test-link‘);
    5. 
   
  
  5. 
  
  6. a.on(‘click‘, function () {
    7. 
   
  
  7. 
  
  8.  alert(‘Hello!‘);
    9. 
   
  
  9. 
  
  10. });
    11.

But generally, we don't use this because we can directly use encapsulated event methods, such as the on click above, which we can write directly: 
 
   
  
    
  
    
   
  1. a.click(function () {
    2. 
  
    
   
  2.  alert(‘Hello!‘);
    3. 
  
    
   
  3. });
    4.

1. Common Event 1.1 mouse events
Click Trigger when mouse clicks
DblClick Trigger when mouse double-click
MouseEnter Trigger when Mouse enters
MouseLeave Trigger when mouse moves out
MouseMove Triggers when the mouse moves inside the DOM
Hover Two functions are triggered when the mouse enters and exits, equivalent to MouseEnter plus MouseLeave

1.2 Keyboard event keyboard events only work on the DOM of the current focus, usually <input> and <textarea>.
KeyDown Triggered when the keyboard is pressed
KeyUp Trigger when keyboard is released
KeyPress Triggers after pressing the key once

1.3 Other events
Focus Triggered when the DOM gets focus
Blur Triggered when the DOM loses focus
Change triggered when the content of <input>, <select>, or <textarea> changes
Submit triggered when <form> commits
Ready Triggered when the page is loaded and the DOM tree finishes initializing

Note: Ready is used only for document objects, our JS code is usually waiting for the DOM to be loaded and then executed, or DOM is often not found, so our own initialization code needs to be placed in the ready event, ensuring that the DOM has been initialized: 
  
 
    
   
  
  1. 
  
  2. <html>
    3. 
   
  
  3. 
  
  4. <head>
    5. 
   
  
  5. 
  
  6.  <script>
    7. 
   
  
  7. 
  
  8.  $(document).on(‘ready‘, function () {
    9. 
   
  
  9. 
  
  10.  $(‘#testForm).on(‘submit‘, function () {
    11. 
   
  
  11. 
  
  12.  alert(‘submit!‘);
    13. 
   
  
  13. 
  
  14.  });
    15. 
   
  
  15. 
  
  16.  });
    17. 
   
  
  17. 
  
  18.  </script>
    19. 
   
  
  19. 
  
  20. </head>
    21. 
   
  
  21. 
  
  22. <body>
    23. 
   
  
  23. 
  
  24.  <form id="testForm">
    25. 
   
  
  25. 
  
  26.  ...
    27. 
   
  
  27. 
  
  28.  </form>
    29. 
   
  
  29. 
  
  30. </body>
    31.

Or: 
  
 
    
   
  
  1. 
  
  2. $(document).ready(function () {
    3. 
   
  
  3. 
  
  4.  // on(‘submit‘, function)也可以简化:
    5. 
   
  
  5. 
  
  6.  $(‘#testForm).submit(function () {
    7. 
   
  
  7. 
  
  8.  alert(‘submit!‘);
    9. 
   
  
  9. 
  
  10.  });
    11. 
   
  
  11. 
  
  12. });
    13.

Usually we use the following method, which is more concise: 
 
   
  
    
  
    
   
  1. $(function () {
    2. 
  
    
   
  2.  // init...
    3. 
  
    
   
  3. });
    4.

2, event parameters some events such as MouseMove and keypress, we need to get the position of the mouse and the value of the key. All events will pass inEventObject as a parameter, you can get more information from the object: 
  
 
    
   
  
  1. 
  
  2. $(function () {
    3. 
   
  
  3. 
  
  4.  $(‘#testMouseMoveDiv‘).mousemove(function (e) {
    5. 
   
  
  5. 
  
  6.  $(‘#testMouseMoveSpan‘).text(‘pageX = ‘ + e.pageX + ‘, pageY = ‘ + e.pageY);
    7. 
   
  
  7. 
  
  8.  });
    9. 
   
  
  9. 
  
  10. });
    11.
As shown, the x, Y coordinate values of the mouse movement are constantly changing: 3. Unbind an event that has been bound to unbind it byoff (' xxx ', function)Implementation, it is worth noting that the off-mode unbind is unable to cancel the direct event method, and the following unbind is not valid: 
  
 
    
   
  
  1. 
  
  2. // 绑定事件:
    3. 
   
  
  3. 
  
  4. a.click(function () {
    5. 
   
  
  5. 
  
  6.  alert(‘hello!‘);
    7. 
   
  
  7. 
  
  8. });
    9. 
   
  
  9. 
  
    11. 
   
  
  11. 
  
  12. // 解除绑定:
    13. 
   
  
  13. 
  
  14. a.off(‘click‘, function () {
    15. 
   
  
  15. 
  
  16.  alert(‘hello!‘);
    17. 
   
  
  17. 
  
  18. });
    19.

This is a two different function object, so off cannot cancel the first anonymous function that has been banding.
You can use off (' click ') to remove all functions of the bound click event, or Off () to remove all types of event handlers that have been bound.
4. Event Trigger conditions Remember,The triggering of an event is always caused by a user action, that is, if you useJS code to change the value, does not trigger the corresponding event！
If you must use the JS trigger event, you can directly invoke the non-parametric event method to triggerFor example: 
 
   
  
    
  
    
   
  1. var input = $(‘#test-input‘);
    2. 
  
    
   
  2. input.val(‘change it!‘);
    3. 
  
    
   
  3. input.change(); // 触发change事件
    4. 
  
    
   
  4. // input.change()相当于input.trigger(‘change‘)，它是trigger()方法的简写
    5.

In addition, some JS code even if set trigger, also because the browser security settings can not be implemented, can only be triggered by the user.

06jquery-05-Events

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More