Js event handler cross-browser solution, js Solution

Source: Internet
Author: User

Js event handler cross-browser solution, js Solution

The examples in this article share the cross-browser solution of js Event Handlers for your reference. The specific content is as follows:

<! DOCTYPE html> 

We will share with you the Javascript native event processing cross-browser code:

// Cross-browser event processor addition method var EventUtil = {addHandler: function (elem, type, handler) {if (elem. addEventListener) {elem. addEventListener (type, handler, false);} else if (elem. attachEvent) {elem. attachEvent ("on" + type, handler); // when you add multiple handler of the same type, the rule in IE mode is the first trigger last added} else {if (typeof elem ["on" + type] = 'function ') {var oldHandler = elem ["on" + type]; elem ["on" + type] = function () {oldHandler (); handler ();} Else {elem ["on" + type] = handler; // multiple event processors can be added. }}, getEvent: function (event) {return event? Event: window. event;}, getTarget: function (event) {return event.tar get | event. srcElement;}, preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}, removeHandler: function (elem, type, handler) {if (elem. removeEventListener) {elem. removeEventListener (type, handler, false);} else if (elem. detachEvent) {elem. detachEvent ("on" + type, handler);} else {elem ["on" + type] = null; // the removal of a single event processor is not supported. Only all event processors can be removed }}, stopPropagation: function (event) {if (event. stopPropagation) {event. stopPropagation ();} else {event. cancelBubble = true ;}}, getRelatedTarget: function (event) {if (event. relatedTarget) {return event. relatedTarget;} else if (event. toElement & event. type = "mouseout") {return event. toElement;} else if (event. fromElement & event. type = "mouseover") {return event. fromElement;} else {return null ;},/* the left and middle buttons of IE8 are both 0; FF cannot recognize the middle keys; Chrome is normal */getButton: function (event) {// return 0, 1, 2-left, center, right if (document. implementation. hasFeature ("MouseEvents", "2.0") {return event. button;} else {switch (event. button) {case 0: case 1: case 3: case 5: case 7: return 0; break; case 2: case 6: return 2; break; case 4: return 1; break; default: break ;}},/* can only detect keypress events. the return value is equal to the character encoding to be displayed * // * IE and Chrome are triggered only by the character key that can be displayed, other FF keys can also be triggered. The returned value is 0 */getCharCode: function (event) {if (typeof event. charCode = "number") {return event. charCode;} else {return event. keyCode ;}}};

The above is all the content in this article, hoping to help you solve js event handler cross-browser.

Articles you may be interested in:
  • Required to compile cross-browser javascript code [compatible javascript multi-browser writing]
  • Notes for developing cross-browser javascript
  • Common cross-browser operations of javascript Range objects
  • Cross-browser support for modification and synchronization of js listening form values
  • Javascript cross-browser Development Experience Summary (5) js events
  • Create a cross-browser event processing mechanism using javascript [produced by Blue-Dream]
  • JavaScript code used to determine whether the window is minimized (cross-browser)
  • Cross-browser common and reusable tab switch js Code
  • Copy data to the Clipboard using JavaScript in Firefox (Copy to Clipboard cross-browser Edition)
  • Summary on cross-browser compatibility between css and javascript

Related Article

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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