JavaScript事件绑定、分类的个人笔记

上期答疑

1.封装兼容性方法getStyle(obj,prop)返回元素计算样式;

function getStyle(elem,prop){//例(div,'width')
    if(window.getComputedStyle){
        return window.getComputedStyle(elem,null)[prop];
        //这里前面对象章节讲过，防止.prop被当成属性而不是变量
    }else{//ie兼容
        return  elem.currentStyle[prop];
    }
};

一、事件绑定

1.ele.onxxx = function (event) {}

兼容性很好，但是一个元素只能绑定一个处理程序
程序this指向是dom元素本身


该方法相当于写在HTML的行间样式上

2.ele.addEventListener(type, fn, false);

IE9以下不兼容，可以为一个事件绑定多个处理程序
程序this指向是dom元素本身


第二种函数声明的方式，后面解绑或定时器时会用到

3.ele.attachEvent(‘on’ + type, fn);

IE独有，一个事件同样可以绑定多个处理程序
程序this指向window

也可以用函数声明的方式，这里不再演示

二、解除事件

1.ele.onclick = false/‘’/null;

2.ele.removeEventListener(type, fn, false);

3.ele.detachEvent(‘on’ + type, fn);

注意：若绑定匿名函数，则无法解除，即前面提到的最好用函数声明的方式

三、事件处理

1.事件冒泡

ele.addEventListener(type, fn, false);默认false，即为事件句柄在捕获阶段执行
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（就像水中一个气泡自底向上冒）

例：如上图显示如果给三个div盒子绑定事件，点击绿色盒子时，它的事件触发后，红色、紫色盒子的事件也会依次自动触发。

2.事件捕获

ele.addEventListener(type, fn, false);设置true，即为事件句柄在冒泡阶段执行
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
例：如上图显示如果给三个div盒子绑定事件，点击紫色盒子时，它的事件触发后，红色、绿色盒子的事件也会依次自动触发。
注：IE没有捕获事件
且触发顺序为先捕获，后冒泡。即如果捕获冒泡同时存在，点击子元素，会先触发祖级捕获事件，然后父级的捕获事件，然后当前元素的捕获/捕获（这里取决你捕获/冒泡事件绑定先后顺序），再是向上冒泡事件
focus，blur，change，submit，reset，select 等事件不冒泡

四、取消冒泡和阻止默认事件

1.取消冒泡

首先了解event。
例：

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(e){},false);

函数里e是为事件对象，里面包含有函数执行时一些信息
event.stopPropagation( );W3C标准但不支持ie9以下版本
event.cancelBubble = true IE独有

div.addEventListener('click',function(e){
	e.stopPropagation();
	//e.cancelBubble = true;IE
},false);

2.阻止默认事件

默认事件 — 表单提交，a标签跳转，右键菜单等;
1.return false; 以对象属性的方式注册的事件才生效

div.onclick = function(){
	return false;
}

2.event.preventDefault(); W3C标注，IE9以下不兼容

div.addEventListener('click',function(e){
	e.preventDefault();
	//e.returnValue = false;IE
},false);

3.event.returnValue = false; 兼容IE
例：有两个默认事件，一是跳转目标网址，二是会回到页面最顶端

var a = document.getElementsByTagName("a")[0];
a.onclick = function(){
    return false;//即可取消这两个默认操作
};

五、事件对象

event ，window.event（IE）
前面已经提到过事件对象，这里主讲事件源对象

1.事件源对象

target：事件属性可返回事件的目标节点（触发该事件的节点）
event.target 火狐独有的
event.srcElement Ie独有的
这俩chrome都有

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(e){
    console.log(e.target);
},false);

六、事件委托

利用事件冒泡，和事件源对象进行处理
优点：

1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件

七、习题练习

1.实现事件对象和事件源对象兼容
2.封装兼容性事件绑定方法。
3.封装阻止默认事件冒泡方法。
4.封装阻止默认事件方法
5.实现标题六中的事件委托
答案下期揭晓

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！