Details about How to Write compatible js events

Details about How to Write compatible js events

This article describes how to write compatible js events, including the following:

1. Key code compatibility of Keyboard Events

var inp = document.getElementById('inp')var result = document.getElementById('result')function getKeyCode(e) { e = e ? e : (window.event ? window.event : "") return e.keyCode ? e.keyCode : e.which}inp.onkeypress = function(e) { result.innerHTML = getKeyCode(e)}

2. compatible Writing of window size

When we get the scroll distance of the scroll bar:

IE, Chrome: document. body. scrollTop

FF: document.doc umentElement. scrollTop

// The visible area size of the browser window (excluding the toolbar and the scroll bar) // 1600 * 525var client_w = document.doc umentElement. clientWidth | document. body. clientWidth; var client_h = document.doc umentElement. clientHeight | document. body. clientHeight; // The actual width and height of the webpage content (including the same side of the toolbar and scroll bar) // 1600 * 8var scroll_w = document.doc umentElement. scrollWidth | document. body. scrollWidth; var scroll_h = document.doc umentElement. scrollHeight | document. body. scrollHeight; // The actual width and height of the webpage content (excluding the toolbar and the scroll bar) // 1600 * 8var offset_w = document.doc umentElement. offsetWidth | document. body. offsetWidth; var offset_h = document.doc umentElement. offsetHeight | document. body. offsetHeight; // The scrolling height var scroll_Top = document.doc umentElement. scrollTop | document. body. scrollTop;

3. compatible Writing of DOM event handler (capability detection)

Var eventshiv = {// event compatible with getEvent: function (event) {return event? Event: window. event;}, // type compatible with getType: function (event) {return event. type ;}, // target is compatible with getTarget: function (event) {return event.tar get? Event.tar get: event. srcelem;}, // Add event handle addHandler: function (elem, type, listener) {if (elem. addEventListener) {elem. addEventListener (type, listener, false);} else if (elem. attachEvent) {elem. attachEvent ('on' + type, listener);} else {// here because. cannot be linked to the 'on' string. You can only use [] elem ['on' + type] = listener;}, // remove the event handle removeHandler: function (elem, type, listener) {if (elem. removeEventListener) {elem. removeEventListener (type, listener, false);} else if (elem. detachEvent) {elem. detachEvent ('on' + type, listener);} else {elem ['on' + type] = null ;}}, // Add event proxy addAgent: function (elem, type, agent, listener) {elem. addEventListener (type, function (e) {if (e.tar get. matches (agent) {listener.call(e.tar get, e); // this points to e.tar get}) ;}, // cancel the default behavior preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}, // block event bubbling stopPropagation: function (event) {if (event. stopPropagation) {event. stopPropagation ();} else {event. cancelBubble = true ;}}};

4. The opacity cannot be used in browsers earlier than IE9

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

5. Bind two identical events to an element: compatibility issues with attachEvent/attachEventLister

Event binding: (incompatible, two combinations are required for compatibility if... else ..)

For IE8 or earlier: attachEvent ('event name', fn );

FF, Chrome, IE9-10 with: attachEventLister ('event name', fn, false );

Function myAddEvent (obj, ev, fn) {if (obj. attachEvent) {// obj under IE8. attachEvent ('on' + ev, fn);} else {// FF, Chrome, IE9-10 obj. attachEventLister (ev, fn, false );}}

6. Obtain the non-interline style values of elements.

Function getStyle (object, oCss) {if (object. currentStyle) {return object. currentStyle [oCss]; // IE} else {return getComputedStyle (object, null) [oCss]; // except IE }}

7. node loading

// The unique node loading event under Firefox is executed only after the node is loaded. Unlike onload, it does not seem to be much used. You can directly put js code behind the page structure .. Document. addEventListener ('domcontentloaded', function () {}, false); // DOM loading is complete. It seems that all except IE6-8 can.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.