首页 > 其他 > 详细

事件及兼容性处理

时间:2020-09-14 10:34:08      阅读:64      评论:0      收藏:0      [点我收藏+]

 

事件流

JS中的事件流:

  1. 三个阶段:捕获 => 目标 => 冒泡

  2. 自body出发,一路朝着并到达目标元素,然后原路返回到body

  3. 一路上,每个元素最多被触发一次

    • 低IE的元素只能在后半程触发:自目标元素到body

    • 其他:可自定义

  4. 可以阻断事件流的传递

注册回调函数

事件处理形式:事件动态绑定、事件静态绑定

事件静态绑定

直接在HTML元素上绑定函数 函数实参由绑定时传入函数括号内的变量 ? 实参this:该HTML元素 可直接传入 event

动态事件绑定

on+eventType

监听函数的this是绑定该函数的元素 实参:event, 低版本IE 没有实参 on+eventType 只能绑定一个,后面的会覆盖前面的

事件监听

现代浏览器与低IE

  1. 低IE:IE9以下--不支持addEventListener

  2. 方法

    其他:addEventListener/removeEventListener

    低IE:(attachEvent/detachEvent)

  3. 执行顺序: 9个内是倒序 , 超过9个会乱

  4. 方法可被重复绑定

  5. 在所有浏览器中,如果用DOM0的方式来绑定,方法里面用return false也可以阻止默认行为的;这个是可以阻止DOM0的,如果是DOM2级的就不可以了

var event = (function () {
  var listener = function (ele, type, fn) {
    (listener =
      ele.addEventListener ?
        niceListener : IEListener
    )(ele, type, fn);
  };
  var remove = function (ele, type, fn) {
    (remove =
      ele.removeEventListener ?
        niceRemove : IERemove
    )(ele, type, fn);
  };
  return {
    listener: listener,
    remove: remove
  }
})();
?
function IERemove(ele, type, fn) {
  var eventCbArr = ele["handleEvent" + type],
    i = 0,
    len = eventCbArr.length;
  if (eventCbArr && len) {
    for (; i < len; i++) {
      if (eventCbArr[i] == fn) {
        return eventCbArr.splice(i, 1);
      }
    }
  }
}
?
function IEListener(ele, type, fn) {
  eventPush(getEventList(ele, type), fn);
  return ele;
}
function eventPush(eventCbArr, fn) {        
  for (var i = 0; i < eventCbArr.length; i++) {
    if (eventCbArr[i] == fn) {
      return;
    };
  }
  eventCbArr.push(fn);
}
function getEventList(ele, type) {
  if (!ele["handleEvent" + type]) {
    ele.attachEvent("on" + type, function () {
      runCb(ele, eventHandle(e));
    });
  }
  return ele["handleEvent" + type];
}
function runCb(elm, event) {
  var ary = elm["handleEvent" + event.type];
?
  for (var i = 0; i <= ary.length;) {
    var cb = ary[i];
    if (typeof cb === "function") {
      cb.call(elm, e);               //  监听函数的this
      i++;
    } else {
      ary.splice(i, 1);
    }
  }
}
//不再額外考虑 IE 678 的兼容
function eventHandle(e) {
  e = window.event;
  e.target = e.srcElement;
  e.pageX = (document.documentElement.scrollLeft ||
    document.body.scrollLeft) + e.clientX;
  e.pageY = (document.documentElement.scrollTop ||
    document.body.scrollTop) + e.clientY;
  e.stopPropagation = function () { e.cancelBubble = true; }  // 阻止事件进一步传播
  e.preventDefault = function () { e.returnValue = false; }  // 阻止事件的默认行为:
  return e;
}
?
function niceRemove(ele, type, fn) {
  ele.removeEventListener(type, fn);
  return ele;
}
function niceListener(ele, type, fn) {
  ele.addEventListener(type, fn, false);
  return ele;
}

 

事件及兼容性处理

原文:https://www.cnblogs.com/nwamtf/p/12588368.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!