js编程笔记之事件异常

事件处理程序的运行环境

1.ele.onxxx = function (event) {}
程序this指向是dom元素本身
2.obj.addEventListener(type, fn, false);
程序this指向是dom元素本身
3.obj.attachEvent(‘on’ + type, fn);
程序this指向window
封装兼容性的 addEvent(elem, type, handle);方法
复制代码

解除事件处理程序

ele.onclick = false/‘’/null;
ele.removeEventListener(type, fn, false);
ele.detachEvent(‘on’ + type, fn);
注:若绑定匿名函数，则无法解除
复制代码

事件处理模型 — 事件冒泡、捕获

事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，
自子元素冒泡向父元素。（自底向上）
复制代码

事件捕获：

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，
自父元素捕获至子元素（事件源元素）。（自顶向下）
IE没有捕获事件
触发顺序，先捕获，后冒泡
focus，blur，change，submit，reset，select 等事件不冒泡
复制代码

取消冒泡和阻止默认事件

取消冒泡：

W3C标准 event.stopPropagation();但不支持ie9以下版本
IE独有 event.cancelBubble = true;
封装取消冒泡的函数 stopBubble(event)
阻止默认事件:
默认事件 — 表单提交，a标签跳转，右键菜单等
1.return false;  以对象属性的方式注册的事件才生效
2.event.preventDefault(); W3C标注，IE9以下不兼容
3.event.returnValue = false; 兼容IE
封装阻止默认事件的函数 cancelHandler(event);
复制代码

事件对象

event || window.event 用于IE
事件源对象:
event.target   火狐只有这个
event.srcElement  Ie只有这个
这俩chrome都有
兼容性写法
复制代码

事件委托

利用事件冒泡，和事件源对象进行处理
优点：
1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件
复制代码

事件分类

鼠标事件

click、mousedown、mousemove、mouseup、contextmenu、
mouseover、mouseout、mouseenter、mouseleave
用button来区分鼠标的按键，0/1/2
DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键
如何解决mousedown和click的冲突
复制代码

键盘事件

keydown keyup keypress
keydown > keypress > keyup
keydown和keypress的区别
keydown 可以响应任意键盘按键，keypress只可以相应字符类键盘按键
keypress返回ASCII码，可以转换成相应字符
文本操作事件
input,focus,blur,change
窗体操作类(window上的事件)
scroll load