JS事件浅析

简介: 一个网页由三层组成(html 结构,js 行为,css 表现),一切的东西其实都建立在html上,html里面的dom提供了一些事件,然后通过js封装,我们可以用js去调用dom上的事件。事件有很多,有我用过的有我没用过的,今天我想分析一番。

事件流



我们都知道,有两种事件流,一个是冒泡一个是捕获。


捕获就是从body开始到你触发事件的节点,从外到内的一个过程。


冒泡呢,与之相反,从你触发的节点开始,一级一级往外,直到body,是一个从内到外的过程。


那么他们两个是同时进行的吗?他们的顺序是先捕获,再冒泡。

在addEventListener中addEventListener(event事件名称,function回调函数,是否在捕获或冒泡阶段执行)第三个参数可以改变事件触发时机。


事件对象 event



div.onclick=function(event){}这个里面的event就是事件对象,我这里说几个常用的。


event.preventDefault() //阻止默认事件,表单提交,a标签。
event.stopPropagation() //阻止传递下去,一帮用在一些自定义组件上,比如遮罩隐藏,在弹框上就要阻止传递了。
event.target //触发事件的元素,事件委托会用到。


事件名称



下面我会把事件列举一下

  • 通用事件
  • load 加载成功,window.load(function(){}),还有一个与之类似的DOMContentLoad当DOM加载完成之后触发。


  • unload 与之相反,卸载的时候


  • error 发送错误的时候,这个比较有意思。img触发error之后使用一张占位图。监听全局的错误提示,然后统计汇总,比如fundebug,也可以自己根据特性写一个针对公司项目的。


  • scroll 滚动的时候触发,无限滚动之类的一些效果


  • resize 放大缩小窗口的时候发生变化,和上面的scroll都需要注意去抖,


  • click 单击事件,在DOM上单击鼠标时候触发。用户在完成一次mousedown和mouseup之后触发click。触发顺序是:mousedown -> mouseup -> click。


  • mousedownmouseup 鼠标按下和弹起,使用频率不是很高。可以做一下拖动之类的效果。


  • mouseoutmouseover 鼠标移出和移入,使用起来会有冒泡的问题,可以使用延时的方法解决


  • mouseleavemouseenter 鼠标移除和移除,解决了冒泡的问题。


  • mousemove 鼠标移动


  • 键盘通用事件
  • keydown 按下键盘


  • keypress 中间的一个事件


  • keyup 抬起键盘


  • textInput 是对keypress的补充,用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。


  • compositionstart 在IME的文本复合系统打开时触发,表示要开始输入了。当你使用输入法的时候会触发一下


  • compositionupdate 在向输入字段中插入新字符时触发。


  • compositionend 在IME的文本复合系统关闭时触发,表示返回正常键盘的输入状态。


  • 控件事件
  • input 当内容发生改变的时触发,有可能是代码触发的改动兼容ie的话input propertychange


  • change 当失去焦点时,内容改变触发


  • blur 失去焦点触发


  • focus 获得焦点触发


  • DOM变动事件这类事件我没有用到过,前段时间在网上看到了一些,整合一下写写测试测试地址
  • DOMNodeInserted 插入节点时触发,appendChild这种


  • DOMNodeRemoved 移除节点时触发,removeChild


  • DOMSubtreeModified 发生变化最后会触发


  • DOMNodeInsertedIntoDocument


  • DOMAttrModified


  • DOMCharacterDataModified


  • 触摸事件 移动端
  • touchstart 触摸


  • touchmove 触摸时移动


  • touchend 移开
    手势 gesturestart - gesturechange - gestureend
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
4月前
|
JavaScript 前端开发
js事件队列
js事件队列
144 55
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
39 3
|
3月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
35 2
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
4月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
42 0
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
50 6
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
25 5
|
3月前
|
监控 JavaScript 前端开发
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
139 0