之前总结了事宜捕捉和冒泡以及阻挠事宜流传，本日写一下事宜代办方面的总结
DOM 事宜之捕捉、冒泡：
阻挠事宜流传：
事宜代办
监听列表中多项 li 时，完成点击 li 控制台打印对应文本，以下：
<ul class="ct">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>起首想到的对每一个 li 举行监听
let ct = document.querySelector('.ct'）
for(let i = 0; i < ct.children.length; i++){
ct.children[i].onclick = function(e){
console.log(e.target.textContent)
}
}或许
let ct = document.querySelector('.ct'）
for(let i = 0; i < ct.children.length; i++){
ct.children[i].addEventListener('click',function(e){
console.log(e.target.textContent)
})
}运用onclick和addEventListener的区分：onclick是属性，addEventListener是要领。
简朴来讲，假如运用onclick，假如此元素须要同时增加多个onclick事宜，那末之前的onclick会被掩盖，而运用addEventListener增加的事宜相当于调用它，并通报相应的参数。
假如此时 li 是动态天生的，每一个li 都要给它增加监听器，监听器多了会迥殊占内存，从而影响机能，这里最好的体式格局是运用事宜代办。
举个简朴的例子：大学宿舍同砚，买的快递都到了，这时候有两种要领，一种是每一个人都去取本身的快递，另一种要领是人人找一个同砚，让他一致去取快递，然后在发给每一个同砚。
这里取快递就是一个事宜，第一种要领就是相当于给每一个元素增加事宜，第二种要领一致去取快递的同砚就是代办元素。
运用事宜代办来完成它，监听的元素应该是这些元素的父元素，当我点击父元素内的元素时，父元素都邑取得相应，并分发相应的事宜。e.target就是点击的元素。
let ct = document.querySelector('.ct')
ct.addEventListener('click', function(e) {
console.log(e.target.textContent)
})用事宜代办操纵一些比较复杂的事变，比以下面代码，当我点击开首增加，则在<li>苹果</li>前增加input内的内容，假如我点末端增加<li>葡萄</li>后增加input内的内容。
<ul class="ct">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<div class="content">
<input class="ipt-add-content" placeholder="增加内容" />
<button id="btn-add-start">开首增加</button>
<button id="btn-add-end">末端增加</button>
</div>这里事宜代办元素是content，如按照上面的要领，给每一个子元素分发事宜，那末当我点击input时，也会触发click事宜，这就偏离了我们的需求。所以这里须要做一个推断，只有点开首增加或许末端增加才增加到相应的位置，点其他地方一概不操纵。
在这里须要注重e.currentTarget和e.target的区分：e.currentTarget：增加事宜的元素e.target：实行事宜的元素
大部分事宜中这两者没什么区分，但在click事宜中，假如运用事宜代办，这两个指向的就不是同一个元素。
let ct = document.querySelector('.ct')
let addContent = document.querySelector('.ipt-add-content')
let content = document.querySelector('.content')
content.addEventListener('click', function(e) {
let li = document.createElement('li')
li.textContent = addContent.value
if(e.target.textContent === '开首增加'){ //只有点'开首增加'才实行
ct.insertBefore(li,ct.firstChild)
}else if(e.target.textContent === '末端增加'){//只有点'末端增加'才实行
ct.appendChild(li)
}
})经常使用的 HTML 事宜
鼠标事宜
mousedown：鼠标按下触发，个中button属性监测鼠标按下哪一个键：0是鼠标左键，1鼠标中心的滚轮，2鼠标右键。mouseup：鼠标松开触发，个中button属性监测鼠标按下哪一个键：0是鼠标左键，1鼠标中心的滚轮，2鼠标右键。mousemove：鼠标挪动触发click：点击事宜dblclick：双击事宜mousewheel：鼠标转动事宜，wheelDelta能够剖断鼠标转动方向，180 向上转动，-180 向下转动mouseover：鼠标进入触发，会冒泡，假如监听的是父元素，鼠标移入到父元素内的子元素也会触发mouseout：鼠标脱离触发，会冒泡，假如监听的是父元素，鼠标从父元素内的子元素移出也会触发movseenter:鼠标进入触发，不会冒泡mouseleave:鼠标脱离触发，不会冒泡
注：
-
clientX,clientY客户端坐标位置，当事宜发作时，鼠标的位置 -
pageX,pageY页面坐标位置，发作事宜的页面坐标 -
screenX,screenY事宜发作时相对屏幕的坐标 - 修正键：
shift、ctrl、alt、win对应的修正键状况shiftKey、ctrlKey、altKey、metaKey，他们是布尔值，按下为true，松开为false。
触摸事宜
touchstart：手指点击触发，点击坐标在touches[0]内里，由于手机支撑多点触控touchend：手指脱离触发，同上touchmove：手指挪动触发，同上
键盘事宜：
keydown：键盘上按下恣意键触发，按住不放会反复触发，文本框变化之前触发keyup：键盘上开释恣意键触发keypress：键盘上按下恣意字符键触发，按住不放会反复触发，文本框变化之前触发
注：
-
textInput和keypress相似，书上说textInput只能在可编辑地区触发，只能按下有效字键才触发(enter键没法触发，ctrl+v能够触发)，keypress按下任何影响文本显现的键都邑触发(enter键能够触发，ctrl+v没法触发)，但我操纵下来，发明这两者并没有什么区分。 -
location属性4示意装备键盘
页面相干事宜：
load：加载完成时触发move：阅读器窗口被挪动时触发resize：阅读器的窗口大小被转变时触发scroll：转动条位置发作变化时触发
表单相干事宜
blur：元素落空核心时触发change：元素落空核心且元素内容发作转变时触发focus：元素取得核心时触发reset：表单中reset属性被激活时触发submit：表单被提交时触发input：在input元素内容修正后立即被触发
编辑事宜
beforecopy：当页面当前的被挑选内容将要复制到阅读者体系的剪贴板前触发此事宜beforecut：当页面中的一部分或许悉数的内容将被移离当前页面（剪贴）并挪动到阅读者的体系剪贴板时触发此事宜beforeeditfocus：当前元素将要进入编辑状况beforepaste：内容将要从阅读者的体系剪贴板传送（粘贴）到页面中时触发此事宜beforeupdate：当阅读者粘贴体系剪贴板中的内容时关照目的对象contextmenu：当阅读者按下鼠标右键涌现菜单时或许经由过程键盘的按键触发页面菜单时触发的事宜copy：当页面当前的被挑选内容被复制后触发此事宜cut：当页面当前的被挑选内容被剪切时触发此事宜losecapture：当元素落空鼠标挪动所构成的挑选核心时触发此事宜paste：当内容被粘贴时触发此事宜select：当文本内容被挑选时的事宜selectstart：当文本内容挑选将最先发作时触发的事宜
拖动事宜
drag：当某个对象被拖动时触发此事宜 （运动事宜）dragdrop：一个外部对象被鼠标拖进当前窗口时触发dragend：当鼠标拖动结束时触发此事宜dragenter：当对象被鼠标拖动的对象进入其容器范围内时触发此事宜dragleave：当对象被鼠标拖动的对象脱离其容器范围内时触发此事宜dragover：当某被拖动的对象在另一对象容器范围内拖动时触发此事宜dragstart：当某对象将被拖动时触发此事宜drop：在一个拖动过程当中，开释鼠标键时触发此事宜
