javascript--事件

事件绑定
1.ele.on+type=function(event){}
兼容性很好,但是一个元素的同一个事件上只能绑定一个处理程序
基本等同于写在HTML行间上
2.obj.addEventListener(type,fn,false);
IE9以下不兼容,可以为一个事件绑定多个处理程序
3.obj.attachEvent(‘on’+type,fn);
IE独有,一个事件可以绑定多个处理相同的函数
解除事件处理程序
ele.οnclick=false/’’/null;
ele.removeEventListener(type,fn,false);
ele.detachEvent(‘on’+type,fn);
注:若绑定匿名函数,则无法解除
** 事件处理模型–事件冒泡,捕获**
事件冒泡:
结构上(非视觉上) 嵌套关系的元素,会存在事件冒泡的功能,即同一事件,处子元素冒泡向父元素.(自底向上)
事件捕获:
结构上(非视觉上) 嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素). (自顶向下)
IE 没有 捕获事件
触发顺序,先捕获,后冒泡
focus,blur,change,submit,reset,select 等事件不冒泡
取消冒泡:
W3C标准event.stopPropagation();但不支持ie9以下版本
IE独有evejt.canceIBubble=true;
阻止默认事件
默认事件–表单提交,a标签跳转,右键菜单等
1.return false; 以对象属性的方式注册的事件才生效
2.event.preventDefault(); W3C标注,IE9以下不兼容
3.event.returnValue=fase;兼容IE
封装阻止默认事件的函数
function cancelHandler(event){ if(event.preventDefault){ event.preventDefault()' }else{ event.returnValue=false; } }
封装事件绑定
function addEvent(elem,type,handle){ if(elem.addEventListener){ elem.addEventListener(type,handle,false); }else if(elem.attcchEvent){ elem.attachEvent('on'+type,function(){ handle.call(elem); }) }else{ elem['on'+type]=handle; } }
事件对象
event||window.event( 用于IE)
事件源对象:
event.target 火狐只有这个
event.srcElement IE只有这个
这两chrome都有
兼容性写法
鼠标事件分类
click mouse-down(范围内鼠标按下触发) mouse-move(鼠标移动事件)
mouse-up (范围弹起鼠标触发) con-text-menu(右键出菜单)
mouse-over(进入范围触发) mouse-out(从范围离开触发)
mouse-enter(进入范围触发) mouse-leave(从范围内离开触发)
移动端三个事件
touchstart touchmove touchend
用button(e里面有个属性叫button)来区分鼠标的按键,0/1/2
DOM3标准规定:click事件只能监听左键,只能通过mousedown和nouseup来判断鼠标标键
如何解决mousedown 和click的冲突
键盘事件分类
* keydown keyup keypress
keydown>keypress>keyup
keydown和keypress的区别keydown可以响应任意键盘按键 ,keypress可以响应字符类键盘
keypress 返回ASCII码,可以转换成相应字符
String.fromCharCode(e.charCode)->此方法能将字符对应码转成字符*
文本操作事件分类
*input(输入内容触发) focus(点进触发)
change(聚焦再失去焦点触发) blur (点出触发)
*
窗体操作类(window上的事件)
*scroll(滚动条滚动触发) load(加载完所有才触发 )
DOMContentLoaded(文档解析完立即触发)
readystatechange(文档解析或加载完触发)
小练习:fixed定位js兼容版
*