javascript事件详解和事件冒泡, 捕获介绍, 事件委托经典例子

事件
ele.onxxx = function(event) { }
兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序
基本等同于写在HTML行间
obj.addEventListener(type, fn, flase);
IE9以下不兼容, 可以为一个事件绑定多个处理程序
obj.attachEvent(‘on’ + type, fn);
IE独有, 一个事

事件

如何绑定事件

  • ele.onxxx = function(event) { }
    • 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序
    • 基本等同于写在HTML行间
  • obj.addEventListener(type, function( ){ }, flase);
    • IE9以下不兼容, 可以为一个事件绑定多个处理程序
  • obj.attachEvent(‘on’ + type, fn);
    • IE独有, 一个事件同样可以绑定多个处理程序

事件处理程序的运行环境

  • ele.onxxx = function(event) { }
    • 程序this指向是dom元素本身
  • obj.addEventListener(type, fn, false);
    • 程序this指向是dom元素本身
  • obj.attachEvent(‘on’ + type, fn);
    • 程序this指向window
  • 封装兼容性的addEvent(elem, type, handle);方法
1
2
3
4
5
6
7
8
9
10
11
12
function addEvent(elem, type, handle) {
if(elem.addEventListener) {
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent) {
elem['temp'] = function() {
handle.call(elem);
}
elem.attachEvent('on' + type, elem['temp']);
}else{
elem['on' + type] = handle;
}
}

解决事件处理程序

  • ele,.onclick = flase/ ‘ ‘/ null;
  • ele.removeEventListener(type, fn, false);
  • ele.detachEvent(‘on’ + type, fn);
  • 注: 若绑定匿名函数, 则无法解除
  • 封装的兼容方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function removeEvent(elem, type, handle) {
    if(elem.removeEventListener) {
    elem.removeEventListener(type, handle, false);
    }else if(elem.detachEvent) {
    elem.detachEvent('on' + type, handle);
    }else{
    elem['on' + type] = null;
    }
    }

事件处理模型–事件冒泡 \ 捕获

事件冒泡

  • 结构上(非视觉上)嵌套的元素, 会存在事件冒泡的功能, 即同一个事件, 自子元素冒泡向父元素(自底向上)

Tips: addEventListener中的第三个参数false/true, 当为true是事件变为捕获机制 , flase时为冒泡机制

事件捕获

  • 结构上(非视觉上)嵌套关系的元素, 会存在事件捕获的功能, 即同一个事件, 自父元素捕获至子元素(事件源元素). (自顶向下)
  • IE没有捕获事件

EG:
例子

  • 当为捕获机制时: 当点击黄色方块时(结构嵌套, 黄色为里面的div, 红色为父级), 先出发的是红色点击事件, 之后是绿色, 黄色;
  • 当为冒泡机制时, 先触发黄色事件, 然后依次向父级冒泡, 为绿色, 红色.

即使两个都有, 触发顺序, 先捕获, 后冒泡

focus(鼠标聚焦), blur(鼠标失去焦点), change, submit, reset, select等事件不冒泡


取消冒泡和阻止默认事件

取消冒泡:

  • W3C标准event.stopPropagation( );但不支持ie9以下版本
    eg:

    1
    2
    3
    4
    5
    var div = document.getElementsBYTagName('div')[0];
    div.onClick = function() {
    console.log('a');
    e.stopPropagation();
    }
  • IE独有event.cancelBubble = true;

  • 封装取消冒泡的函数
1
2

阻止默认事件:

  • 默认事件—表单提交, a标签跳转, 右键菜单等.
  • return flase; 以对象属性的方式注册的事件才生效
  • event.preventDefault( ); W3C标准, IE9以下不兼容
  • event.returnValue = false; 兼容IE
  • 封装阻止默认事件的函数cancelHandler(event);

事件对象

  • event || window.event 用于IE
    eg:

    1
    2
    3
    div.onclick = function(e) {
    var event = e || window.event;
    }
  • 事件源对象

    • event.target 火狐只有这个
    • event.srcElement IE只有这个
      eg1:在HTML中有100个li, 要求点击任意li, 打印出li中的内容
      这里写图片描述
      #注意:又称事件委托!!!!!!!!!
      eg2:
1
2
3
4
5
6
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
wrapper.onClick = function(e) {
var event = e || window.event;
var target = event.target || event.srcElement//获取事件源对象, 就是找到吹泡泡的人
}
  • 以上chrome都有
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!