Recommended event capture function addevent ()

1. the following method is recommended by the father of jquery to add and remove events.

Java code

1. /*
   
    
2. * OBJ: the object to bind the event
   
    
3. * Type indicates the event type, such as "click", "LOAD", "Submit", and "Mouseover ".
   
    
4. * FN function name
   
    
5. */
   
   
   
6. Function addevent (OBJ, type, FN)
7. {
8. 
   If
   
   
   (Obj. attachevent)
9. {
10. OBJ [
    'E'
    
    + Type + FN] = FN;
11. OBJ [type + FN] = function ()
12. {
13. OBJ [
    'E'
    
    + Type + FN] (window. Event );
14. }
15. OBJ. attachevent (
    'On'
    
    + Type, OBJ [type + FN]);
16. }
17. 
    Else
    
    
    
18. OBJ. addeventlistener (type, FN,
    False
    
    
    );
19. }
20. /*
    
     
21. * OBJ: the object of the event to be deleted.
    
     
22. * Type indicates the event type, such as "click", "LOAD", "Submit", and "Mouseover ".
    
     
23. * FN function name
    
     
24. */
    
    
    
25. Function removeevent (OBJ, type, FN)
26. {
27. 
    If
    
    
    (Obj. detachevent)
28. {
29. OBJ. detachevent (
    'On'
    
    + Type, OBJ [type + FN]);
30. OBJ [type + FN] =
    Null
    
    
    ;
31. }
32. 
    Else
    
    
    
33. OBJ. removeeventlistener (type, FN,
    False
    
    
    );
34. }
37. // Addevent (document. getelementbyid ('foo'), 'click', dosomething );
    
    
    

2. according to "Pro JavaScript techniques", John resig greatly recommends the addevent () method of Dean Edwards, but does not recommend more streamlined works. He commented on Edwards's addevent:

1

It can work in all browsers, even if it is ancient and does not support any browsers;

1. 2
   
   ,
   This
   
   
   Keywords can be used in all binding functions, pointing to the current element;
2. 3
   
   And all browser-specific functions that prevent default browser behavior and prevent event bubbles;
3. 4
   
   Regardless of the browser type, the event object is always passed in as the first object;
4. 5
   
   The only drawback is that it only works in the bubble stage (because the traditional method of event binding is used in depth ).
5. 6
   
   , The addevent/removeevent function is so powerful that there is no reason not to use it in your code.

1. It can work in all browsers, even if it is old and does not support any browsers; 2. This keyword can be used in all binding functions, pointing to the current element; 3, all browser-specific functions that prevent browser default behaviors and prevent event bubbles; 4. Regardless of the browser type, the event object is always passed in as the first object; 5, the only drawback is that it only works in the bubble stage (because the traditional method of event binding is used in depth ). 6. The addevent/removeevent function is so powerful that there is no reason not to use it in your code.

Dean Edwards said:
My solution is very different.

* It performs no object detection
* It does not use the addeventlistener/attachevent Methods
* It keeps the correct scope (the this keyword)
* It passes the event object correctly
* It is entirely cross-browser (it will probably work on ie4 and ns4)
* And from what I can tell it does not leak memory

The following is the addevent/removeevent function of Dean Edwards:

Java code

1. // Http://dean.edwards.name/weblog/2005/10/add-event/
   
   
   
3. Function addevent (element, type, Handler ){
4. 
   If
   
   
   (Element. addeventlistener ){
5. Element. addeventlistener (type, handler,
   False
   
   
   );
6. }
   Else
   
   
   {
7. 
   // Assign an independent ID to each event processing function
   
   
8. 
   If
   
   
   (! Handler. $ guid) handler. $ guid = addevent. guid ++;
9. 
   // Create an event-type hash table for the element
   
   
10. 
    If
    
    
    (! Element. Events) element. Events = {};
11. 
    // Create an event handler hash table for each element/event
    
    
12. VaR handlers = element. events [type];
13. 
    If
    
    
    (! Handlers ){
14. Handlers = element. events [type] = {};
15. 
    // Store existing event processing functions (if one already exists)
    
    
16. 
    If
    
    
    (Element [
    "On"
    
    + Type]) {
17. Handlers [
    0
    
    ] = Element [
    "On"
    
    + Type];
18. }
19. }
20. 
    // Store the event handler in the hash table
    
    
21. Handlers [handler. $ guid] = handler;
22. 
    // Assign a global event processing function to handle all tasks
    
    
23. Element [
    "On"
    
    + Type] = handleevent;
24. }
25. };
26. // Create a counter with an independent ID
    
    
27. Addevent. guid =
    1
    
    ;
29. Function removeevent (element, type, Handler ){
30. 
    If
    
    
    (Element. removeeventlistener ){
31. Element. removeeventlistener (type, handler,
    False
    
    
    );
32. }
    Else
    
    
    {
33. 
    // Delete the event handler from the hash table
    
    
34. 
    If
    
    
    (Element. Events & element. events [type]) {
35. Delete element. events [type] [handler. $ guid];
36. }
37. }
38. };
40. Function handleevent (event ){
41. VaR returnvalue =
    True
    
    
    ;
42. 
    // Obtain the event processing object (ie uses the global event object)
    
    
43. Event = event | fixevent (((
    This
    
    
    . Ownerdocument |
    This
    
    
    . Document |
    This
    
    
    ). Parentwindow | window). Event );
44. 
    // Obtain the reference of the hash table of the event processing function
    
    
45. VaR handlers =
    This
    
    
    . Events [event. Type];
46. 
    // Process each event processing function in sequence
    
    
47. 
    For
    
    
    (Var I in handlers ){
48. 
    This
    
    
    . $ Handleevent = handlers [I];
49. 
    If
    
    
    (
    This
    
    
    . $ Handleevent (event) ===
    False
    
    
    ){
50. Returnvalue =
    False
    
    
    ;
51. }
52. }
53. 
    Return
    
    
    Returnvalue;
54. };
55. // Add some methods for the lack of IE event objects
    
    
56. Function fixevent (event ){
57. 
    // Added W3C standard event Methods
    
    
58. Event. preventdefault = fixevent. preventdefault;
59. Event. stoppropagation = fixevent. stoppropagation;
60. 
    Return
    
    
    Event;
61. };
62. Fixevent. preventdefault = function (){
63. 
    This
    
    
    . Returnvalue =
    False
    
    
    ;
64. };
65. Fixevent. stoppropagation = function (){
66. 
    This
    
    
    . Cancelbubble =
    True
    
    
    ;
67. };