事件

事件处理函数

以 click 为例

oBtn.onclick = () => {};
oBt.addEventListener("click", () => {}, flase); //第三个参数true:事件在捕获阶段处理 false:事件在冒泡阶段处理
// 以上两种方式区别
// onclick所有浏览器都兼容 但是只能绑定一个事件处理函数
// addEventListener w3c规范 IE9以下不支持，但是可以绑定多个事件处理函数

ele.attachEvent('onclick'，()=>{})
// IE8及以下的绑定方式


// 封装一个兼容性写法
function addEvent(el,type,fn){
    if(el.addEventListener){
        el.addEventListener(type,fn,false)
    }
    else if(el.attachEvent){
        el.attachEvent('on'+type,fn.bind(el))
    }
    else{
        el['on'+type] = fn
    }
}

function removeEvent(el,type,fn){
  if(el.addEventListener){
    el.removeEventListener(type,fn,false)
  }
  else if(el.attachEvent){
    el.detachEvent('on'+type,fn)
  }
  else{
    el['on'+type]=null
  }
}

事件冒泡 捕获

事件一层一层从子级向父级传递触发相同类型事件的现象

事件从父级向事件源传递触发相同类型事件的现象叫捕获

如果一套结构既有捕获事件又有冒泡事件则先捕获后冒泡 绑定在事件源上的事件则按执行顺序执行

focus blur change submit reset select 无冒泡捕获事件

// e.stopPropagation() w3c阻止冒泡
// e.cancelBubble = true ie阻止冒泡
var wrapper = document.getElementsByClassName("wrapper")[0];

wrapper.addEventListener(
  "click",
  (e) => {
    var e = e || window.event;
  },
  false
);

// 取消默认事件
document.oncontextmenu = function (e) {
  // return false
  // w3c e.preventDefault() ie9及以下不兼容
  // e.returnVaule = false ie9以下的方法
};