前端事件处理集合

2018-01-22  本文已影响0人  写代码的隔壁老王

一、window事件

        window事件是指事件的发生与浏览器窗口本身有关,而非特定的文档内容。当然这里也有一些文档元素上的事件与之重合。常见的window事件包括:

1、load:当页面文档以及图片等资源完全加载完毕后触发

2、onerror:当页面JavaScript处理出错的时候就会触发

3、hashchange: 当前URL的hash值发生变化的时候触发

4、scroll : 页面滚动的时候触发

等等等等其他的,如果需要看更详细的,可在chrome浏览器开发者模式下运行  console.log(this),支持的所有window事件,应有尽有


二、DOM事件

顾名思义,DOM是类似 div一系列的html内容,发生在其身上的所有触发都可以叫做DOM事件,例如 鼠标相关的操作,DOM滚动 scroll,甚至拖拽等等。有必要说下HTML5新增的一系列事件:

H5新增了视频也音频这些元素 <video>  <audio> ,作用在其身上的例如  play  pause  waiting 等操作,均是DOM事件

三、输入框文本事件

常见的文本输入框  input textarea 等获取焦点或者失去焦点,其内容变动触发的事件等等,均是文本框事件

四、鼠标事件

PC端时代,用户触动鼠标所产生的一系列反应,均称为鼠标事件。大体归类分为以下几种:1、鼠标滚动   2、滚轮   3、点击鼠标左键     4、点击鼠标右键  。相关名词包括但不限于  click  dbclick  mouseover mouseenter mousemove    mousedown    mouseup   mouseout   contextmenu

五、键盘事件

当键盘焦点聚集在浏览器的时候,键盘按键按下或者弹出产生的时间成为键盘事件。主要包括三个事件  keyup    keydown    keypress  。无论页面上哪个元素获取焦点的时候,均会产生冒泡到Document和Window对象,传递给键盘处理程序的事件对象有keyCode字段,通过它可以判断按下或者释放的是哪个键盘按钮

六、触摸屏事件

现在H5 移动页面占据了大量的流量,移动H5页面手势动作,是人机交互的主要来源,手指在屏幕端主要的操作有三个:touchstart   touchmove  touchend  ,当然有人要说还有touchcancel,大部分情况下,我是直接忽略这个的,为什么呢,主要要看何种情况下会产生这个touchcancel 。比如用户正在滑动屏幕,突然来了一个电话,这个时候你的滑动被打断了,才会产生touchcancel  ,非常少见,so,我一般就直接忽略了这点

上一篇下一篇

猜你喜欢

热点阅读