黑马程序员技术交流社区

标题: 【成都校区】--- JavaScript事件浅析 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-8-22 16:53
标题: 【成都校区】--- JavaScript事件浅析


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

• 我们都知道，有两种事件流，一个是冒泡一个是捕获
• 捕获就是从body开始到你触发事件的节点，从外到内的一个过程
• 冒泡呢，与之相反，从你触发的节点开始，一级一级往外，直到body，是一个从内到外的过程
• 那么他们两个是同时进行的吗？他们的顺序是先捕获，再冒泡
• 在addEventListener中addEventListener（event事件名称，function回调函数，是否在捕获或冒泡阶段执行）第三个参数可以改变事件触发时机
  

二、事件对象 event

[JavaScript] 纯文本查看 复制代码

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
• mousedown和mouseup 鼠标按下和弹起，使用频率不是很高。可以做一下拖动之类的效果
• mouseout和mouseover 鼠标移出和移入，使用起来会有冒泡的问题，可以使用延时的方法解决
• mouseleave和mouseenter 鼠标移除和移除，解决了冒泡的问题
• 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
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2