> 웹 프론트엔드 > JS 튜토리얼 > Node.js는 몇 가지 크로스 브라우저 이벤트 메소드를 자세히 구현하고 예제를 제공합니다.

Node.js는 몇 가지 크로스 브라우저 이벤트 메소드를 자세히 구현하고 예제를 제공합니다.

高洛峰
풀어 주다: 2016-12-08 15:04:59
원래의
1148명이 탐색했습니다.

js는 일부 크로스 브라우저 이벤트 메서드를 구현합니다.

JavaScript를 사용하여 일반적으로 사용되는 일부 이벤트 속성의 이벤트 바인딩, 제거 및 획득을 구현합니다. 항상 다른 브라우저에서의 호환성을 고려하세요. 크로스 브라우저 이벤트 개체가 제공됩니다. 아래:

 var EventUtil = { 
 on: function(element, type, handler) {/* 添加事件 */
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {//IE 注意:此时事件处理程序会在全局作用域中运行,因此用attachEvent绑定的事件,此时在事件处理函数里的this 等于window,使用时要注意
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
 
  off: function(element, type, handler) {/* 移除事件 */
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
 
  getEvent: function(event) {/* 返回对event对象的引用 */
    return event ? event : window.event;
  },
 
  getTarget: function(event) {/* 返回事件的目标 */
    return event.target || event.srcElement;
  },
 
  preventDefault: function(event) { /* 取消事件的默认行为 */
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
 
  stopPropagation: function(event) {/* 阻止事件冒泡 */
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },
 
  /* mouseover 和mouserout 这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
  getRelatedTarget: function(event) {
    if (event.relatedTarget) {
      return event.relatedTarget;
    } else if (event.toElement) {//IE8 mouserout事件
      return event.toElement;
    } else if (event.fromElement) {//IE8 mouseover事件
      return event.fromElement;
    } else {
      return null;//其他事件
    }
  }
};
로그인 후 복사

은 다음과 같이 호출됩니다.

EventUtil.on(document, "click", function(event){//为document元素绑定click事件
  event = EventUtil.getEvent(event);//获取event事件对象
  alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
로그인 후 복사


관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿