JS的事件绑定

绑定事件

  1. onclick,无兼容性问题,但是多次绑定会互相覆盖
e.onclick = null; // 解绑时,设置为null即可 
  1. addEventListener,w3c的标准方式,如果绑定多次不会互相覆盖
e.removeEventListener(event.type, handle, boolean); // 解绑参数与绑定相同
  1. attachEvent,IE的独有方式,绑定多次不会互相覆盖,只在冒泡阶段触发
e.detachEvent(event.type, handle); // 解绑
兼容的事件绑定方法
function addEvent(ele, event, handle, bool) {
  if(ele.addEventListener) {
    ele.addEventListener(event, handle, bool);
  } else if(ele.attachEvent) {
    ele.attachEvent("on"+event, handle);
  } else {
    ele["on"+event] = handle;
  }
}
兼容的事件解绑方法
function removeEvent(ele, event, handle, bool) {
  if(ele.removeEventListener) {
    ele.removeEventListener(event, handle, bool);
  } else if(ele.detachEvent) {
    ele.detachEvent("on"+event, handle);
  } else {
    ele["on"+event] = null;
  }
}

阻止默认事件

  1. onclick => return false;
  2. addEventListener => event.preventDefault(); // event = e || window.event;
  3. attachEvent => event.returnValue = false;

阻止事件冒泡与捕获

  1. 标准:event.stopPropagation();
  2. IE:event.cancelBubble = true;

事件委托

先将事件绑定到父元素,然后再根据e.target或e.srcElement确定实际触发事件的子元素,而后进行相应的操作。

触发事件

var ele = document.body;
var event = document.createEvent("HTMLEvents");
event.initEvent("scroll", true, false);
ele.dispatchEvent(event);
  1. createEvent的参数包括五种:
    Events:包括所有事件
    UIEvents:包括DOMActivate, DOMFocusIn, DOMFocusOut, keydown, keypress, keyup 以及 所有MouseEvents
    HTMLEvents:包括abort, blur, change, error, focus, scroll, load, reset, select, submit, unload
    ** MouseEvents:包括click, mousedown, mousemove, mouseover, mouseout, mouseup
    ** MutationEvents:
    都不常用就不列举了
  2. 需要通过initEvent初始化
    HTMLEvents和Events:initEvent(type, bubbles, cancelable);
    ** UIEvents:initUIEvent(type, bubbles, cancelable, windowObject, detail);
    ** MouseEvents:
    initMouseEvent(type, bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);
    ** MutationEvents:**initMutationEvent(type, bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange);
  3. 最后使用dispatchEvent来触发
  4. 若是IE浏览器,可以跳过前三步,直接使用el.fireEvent(type)来触发
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是事件: 我们可以简单的把事件理解为浏览器的感知系统。比如说:他可以感觉到用户是否点击(click)了页面、鼠...
    张松1366阅读 6,837评论 1 6
  • 事件流: 事件流:页面接收事件的顺序。 IE定义的:事件冒泡流(由最具体的元素依次传播到DOM树的最上层的Docu...
    xiaoguo16阅读 612评论 0 0
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,285评论 3 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,076评论 1 10
  • 应该是暑期到来的原因,小蜜蜂发现好多良心剧,都在这个时候冒出来了。如《我的前半生》《绣春刀2》《权力的游戏第七季》...
    夏梦冬眠阅读 268评论 3 6