一个网页由三层构成（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。

  • 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