js event listening (compatibility considered)

Keywords: JQuery Javascript IE

explain:

Internet The addEventListener() method is not supported in Explorer 8 and earlier IE versions, and is not supported in Opera 7 and earlier Opera versions. However, for browsers that do not support this function, you can use the attachEvent() method to add event handles.
Internet Explorer 8 and earlier does not support the removeEventListener() method, Opera 7.0 and earlier versions of Opera are also not supported. However, for those browsers that do not support this function, you can use the detachEvent() method to remove the The event handle added by the attachEvent() method. (from rookie tutorial above).

keyword:

addEventListener，attachEvent，removeEventListener，detachEvent

JS tool class code:

  1. $(function() {  
  2.     //Add, remove listening events, consider compatibility  
  3.     $.fn.extend({  
  4.         /** 
  5.          * Refer to native JavaScript to add event listening, 
  6.          *  element.addEventListener(event, function, useCapture) 
  7.          * @param {Object} type  must. Event name 
  8.          * @param {Object} handle  must. Specifies the function to execute when the event is triggered 
  9.          * @param {Object} bool  Optional. Boolean value that specifies whether the event is executed during the capture or bubbling phase 
  10.          */  
  11.         addEvent: function(type, handle, bool) {  
  12.             var el, thisLen = this.length;  
  13.             bool ? bool = bool : bool = false; //bool  
  14.             if(thisLen == 1) {  
  15.                 el = this[0]; //Convert jquery object to js object  
  16.                 el.addEventListener ? el.addEventListener(type, handle, bool) :  
  17.                     el.attachEvent('on' + type, handle);  
  18.             } else {  
  19.                 for(var i = 0; i < thisLen; i++) {  
  20.                     el = this[i];  
  21.                     el.addEventListener ? el.addEventListener(type, handle, bool) :  
  22.                         el.attachEvent('on' + type, handle);  
  23.                 }  
  24.             }  
  25.         },  
  26.           
  27.             /** 
  28.          * Refer to native JavaScript to remove event listening, 
  29.          *  element.removeEventListener(event, function, useCapture) 
  30.          * @param {Object} type  must. Event name 
  31.          * @param {Object} handle  must. Specify the function to remove 
  32.          * @param {Object} bool  Optional. Boolean value that specifies whether the event is executed during the capture or bubbling phase 
  33.          */  
  34.         removeEvent:function(type,handle,bool){  
  35.             var el, thisLen = this.length;  
  36.             console.log(this)  
  37.             bool ? bool = bool : bool = false; //bool  
  38.             if(thisLen == 1) {  
  39.                 el = this[0]; //Convert jquery object to js object  
  40.                 console.log(el.removeEventListener)  
  41.                 el.removeEventListener ? el.removeEventListener(type, handle, bool) :  
  42.                     el.detachEvent('on' + type, handle);  
  43.             } else {  
  44.                 for(var i = 0; i < thisLen; i++) {  
  45.                     el = this[i];  
  46.                     el.removeEventListener ? el.removeEventListener(type, handle, bool) :  
  47.                         el.detachEvent('on' + type, handle);  
  48.                 }  
  49.             }  
  50.         }  
  51.     })  
  52. })  

Call:

  1. $('#main').addEvent('touchstart',start);  

Posted by cliftonbazaar on Sat, 02 May 2020 21:41:11 -0700

Hot Keywords

©2024 Programmer Group