用户界面事件:当用户与页面的上的元素交互时发生,但不一定与用户操作有关的事件。
load事件:当页面加载完毕时在window上触发,当图像加载完毕时在ing元素上触发,等等,页面完全加载完毕(包括所有图像,js文件,css等外部文件资源)时触发,img只要设置了src就会下载
unload事件:当页面完全卸载时在window上触发,等等。当一个页面切换到另一个页面时就会触发,经常利用这个事件来清除引用,减少内存的泄露
error:当发生js错误时在window上触发,当图像无法加载时在img上触发
abort事件:当用户停止下载过程时,如果嵌入的内容没有加载完成,则在object元素上触发
select:当用户选择文本框(input或textarea)中的一或多个字符时触发
resize:当窗口或框架的大小发生改变时在window上触发
scroll:当用户滚动带滚动条的元素中的内容时,在该元素上触发
焦点事件:当元素获得焦点或失去焦点时触发
blur:失去焦点时触发,这个事件不会冒泡
focus:获得焦点时触发,不冒泡
focusin:在获得焦点时触发,但他冒泡,DOM3新增
focusout:在失去焦点时触发,冒泡
鼠标事件:当用户通过鼠标在页面上执行操作时触发
click:单击事件,用户单机鼠标按钮(一般是左键)或按下回车键时触发
dbclick:双击事件,当双击鼠标时触发(一般是左键)
mousedown:当用户在按下任意鼠标按钮时触发
mouseup:当用户释放鼠标按钮时触发
mouseenter:在鼠标光标从外部首次(是指每次进入元素,并不是只执行一次)时触发,而且这个事件不冒泡,而且在光标移到到后代元素上不会触发(从父区域进入子区域,再从子区域进入父区域是不会触发的,因为他认为子区域也是他的一部分)
mouseleave:鼠标离开和mouseenter:鼠标进入是一对,刚好相反
mousemove:当鼠标指针在元素内部移时重复的触发
mouseout:当鼠标指针位于一个元素上方,然后移到到另一个元素上方时触发,另一个元素可能是外部元素也可能是他的后代元素,因为他不认为后代元素所在的区域是他的一部分
mouseover:鼠标指针进入和mouseout 鼠标指针离开是一对,恰好相反
除了mouseleave和mouseenter之外都会冒泡
click事件只有触发了mousedown和mouseup之后才会触发,代表click只有触发两次clic才会触发,如果取消了之前的事件将会不触发
鼠标事件都是在浏览器视口中的特定位置发生的,可以通过事件的属性获取到。
坐标位置:
视口区(客户区)坐标位置:clientX和clientY可以获取到位置信息。所有浏览器都支持这两个属性,是相对于浏览器的视口而不是页面而言的,不包括地址栏等
页面坐标位置:pageX和pageY,相对于页面而言,ie8及更早版本不支持这两个属性,不过我们可以计算出来
event.clientX+(document.body.scrollLeft + document.documentElement.scrollLeft)
event.clientY + (document.body.scrollTop + document.documentElement.scrollTop)
屏幕坐标位置:相对于整个电脑屏幕,screenX和screenY
滚轮事件:当使用鼠标滚轮(或类似事件)时触发
mousewheel:跟踪鼠标滚轮或笔记本触摸板
文本事件:当在文档中输入时触发
textinput:在文本显示给用户之前更容易拦截文本,是对keypress的补充
可编辑区输入字符键才可以出发
ie9才支持,firefox不支持
键盘事件:当用户通过键盘在页面上执行操作时触发
keydown:用户按下键盘上的任意键时触发,而且按住不放的话,会重复触发此事件
keypress:用户按下键盘上的字符键时触发,而且按住不放的话,会重复触发此事件,按下esc也会触发
keyup:用户释放键盘上的键时触发
所有元素都支持这三个事件
keydown-》keypress-》textinput-》keyup
keyup和keydown的event有个keycoe属性,代表键盘码,与ASCII相对应
移动端-小程序事件:
touchstart: 当手指触摸屏幕的时候出发
touchmove: 当手指在屏幕移动的时候
touchend: 手指离开屏幕的时候触发
touchcancel: 当被迫中止滑动的时候触发(弹消息,来电等等);
tap:手指触摸后离开(点击)
longtap: 手指触摸后后,超过350ms离开
事件绑定的写法同组件的属性,以 key、value 的形式。
key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart
达内 万寿路 东神