JavaScript 事件
1. 如何绑定事件
1.ele.onxxx = function (event) {}
兼容性很好,但是一个元素只能绑定一个处理程序基本等同于写在HTML行间上
2.ele.addEventListener(type, fn, false);
IE9以下不兼容,可以为一个事件绑定多个处理程序
3.ele.attachEvent(‘on’ + type, fn);
IE独有,一个事件同样可以绑定多个处理程序
2.事件处理的运行环境
-
1.ele.onxxx = function (event) {}
程序this指向是dom元素本身
-
obj.addEventListener(type, fn, false);
程序this指向是dom元素本身
-
obj.attachEvent(‘on’ + type, fn);
程序this指向window
3.解除事件处理程序
-
ele.onclick = false/‘’/null
-
ele.removeEventListener(type, fn, false);
-
ele.detachEvent(‘on’ + type, fn);
注意: 若绑定匿名函数,则无法解除
4.事件处理模型
1.事件冒泡
结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素
冒泡向父元素。(自底向上)
2.事件捕获
结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素
捕获至子元素(事件源元素)。(自底向上)
注意:
1.IE没有捕获事件
2.触发顺序,先捕获,后冒泡
3.focus,blur,change,submit,reset,select 等事件不冒泡
5.取消冒泡和阻止默认事件
1.取消冒泡
-
W3C标准 event.stopPropagetion() ; 但不支持IE9以下版本
-
IE独有,event.cancelBubble = true;
2.阻止默认事件
默认事件 — 表单提交,a标签跳转,右键菜单等
-
return false
以对象属性的 方式注册的事件才生效
-
event.preventDefault() , W3C标准,IE不兼容
-
event.returnValue = false; 兼容IE
6.事件对象
当触发事件时,系统会返回一个事件对象,含有对象触发的事件,事件源等...
-
event
和window.event
(用于IE) -
事件源对象:
事件产生的源头对象
event.target 火狐独有的
event.srcElement Ie独有的
这俩chrome都有
7.事件委托
利用事件冒泡,和事件源对象进行处理
优点:1. 性能 不需要循环所有的元素一个个绑定事件
2.灵活 当有新的子元素时不需要重新绑定事件
8.事件分类
1.鼠标事件
-
click
鼠标点击,onclick = onmousedown+onmouseup
-
mousedown
鼠标按下
-
mousemove
鼠标移动
-
mouseup
放开单击鼠标
-
mouseover
=mouseenter
//html5写法鼠标进入目标位置
-
mouseout
=mouseleave
//html5写法鼠标离开目标位置
-
contextmenu
鼠标右键
如何识别鼠标单击双击?
用button来区分鼠标的按键,0/1/2,在事件对象查看
0 --> 单击,1 --> 滚动轮,2 --> 双击
注意: DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键。
如何解决mousedown和click的冲突?
利用时间差,时间小于0.3秒则视为click;
2.键盘事件
-
keydown
'.oo'用户在键盘上按下某按键时发生。一直按着某按键则会不断触发
-
keypress
用户按下一个按键,并产生一个字符时发生,一直按住某键则不断触发
-
keyup
用户释放某一个按键是触发。
触发的顺序
keydown > keypress > keyup
keydown和keypress的区别
keydown 可以响应任意键盘按键,keypress只可以相应字符类键盘按键
keypress返回ASCII码,可以转换成相应字符
3.文本操作事件
-
input
获取文本内容
-
focus
获取焦点时
-
blur
失去焦点时
-
change
onchange 事件会在域的内容改变时发生。