Detailed explanation of JavaScript cross-platform event definition and usage examples-JS Tutorial-php.cn

Detailed explanation of JavaScript cross-platform event definition and usage examples

伊谢尔伦

Release： 2017-07-22 15:43:51

Original

1849 people have browsed it

Cross-platform events

What are cross-platform events? That is, executing the same event on different browsers uses different methods.

What is the EventUtil object? what's the effect? It is a container that integrates all event-related functions to facilitate the management of event objects. It has no attributes. Mainly handles the integration of DOM events and IE events to make them as similar as possible.

Let’s take a look at the object properties and methods between DOM and IE for comparison (here we only point out the different properties and methods between the two). There are five main points:
DOM Properties and Methods IE Properties and Methods srcobj
us Take a look at a small demo, which can effectively solve the problem of cross-platform compatibility of events:

<html>
<head>
  <title>eventUtil</title>
  <script eventType="text/javascript">
    var eventUtil = {
      //监听事件
      addListener: function(obj, eventType, fn) {
        if (obj.addEventListener) {
          obj.addEventListener(eventType, fn, false);
        } else if (obj.attachEvent) {
          obj.attachEvent(&#39;on&#39; + eventType, fn);
        } else {
          obj[&#39;on&#39; + eventType] = fn;
        }
      },
      //返回event对象
      getEvent: function(event) {
        return event || window.event;
        //return event ? event : window.event;
      },
      //返回目标事件对象
      getTarget: function(event) {
        return event.target || event.srcobj;
      }，
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },     
      removeListener: function(obj, eventType, fn) {
        if (obj.removeEventListener) {
          obj.removeEventListener(eventType, fn, false);
        } else if (obj.deattachEvent) {
          obj.detachEvent(eventType, fn);
        } else {
          obj[&#39;on&#39; + eventType] = null;
        }
      },
      
      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };
  </script>
</head>
<body>
  <input eventType="button" value="click me" id="btn" />
  <p>event</p>
  <a>Hello word!</a>
  <script eventType="text/javascript">
  function addBtnListen(event)
  {
    var event = eventUtil.getEvent(event);
    var target = eventUtil.getTarget(event);
    alert("my name is kock");
    alert(event.eventType);
    alert(target);
    eventUtil.stopPropagation(event);

  }
  function getBodyListen(event)
  {
      alert("click body");
  }
  function getLinkListen(event)
  {
       alert("prevent default event");
       var event = eventUtil.getEvent(event);
       eventUtil.preventDefault(event);
  }
  window.onload=function()
  {
      var btn = document.getobjById("btn");
      var link = document.getobjsByTagName("a")[0];
      eventUtil.addListener(btn, "click", addBtnListen);
      eventUtil.addListener(document.body, "click", getBodyListen);
      eventUtil.addListener(link, "click",getLinkListen);
  }   
</script>
</body>
</html>

Copy after login

The above method can solve the problem of cross-platform events. Next , let’s take a look at the properties of charCode.

First define a new method for eventUtil, formatEvent, which accepts one parameter, the Event object.

eventUtil.formatEvent=function(event)
{
  if(isIE&&isWin)---检测浏览器的问题

  {
   event.charCode=(event.type=="keypress")?event.keycode:0;
   event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段
  }
  return event;
}

Copy after login

The above is the detailed content of Detailed explanation of JavaScript cross-platform event definition and usage examples. For more information, please follow other related articles on the PHP Chinese website!