事件的委托
所謂的事件委托，通過監(jiān)聽一個(gè)父元素，來給不同的子元素綁定事件，減少監(jiān)聽次數(shù)，從而提升速度。
eg:
<body>
<ul id="isUl">
<li id="li01">1</li>
<li id="li02">2</li>
<li id="li03">3</li>
</ul>
<script>
function clickLi01() {
alert('你點(diǎn)擊了第1個(gè)li');
}
function clickLi02() {
alert('你點(diǎn)擊了第2個(gè)li');
}
function clickLi03() {
alert('你點(diǎn)擊了第3個(gè)li');
}
document.getElementById('isUl').addEventListener('click', function(event) {
var srcID = event.target.id;
if(srcID == 'li01'){
clickLi01();
}else if(srcID == 'li02') {
clickLi02();
}else if(srcID == 'li03') {
clickLi03();
}
});
</script>
</body>
new 做了什么操作
- 創(chuàng)建一個(gè)新對(duì)象，同時(shí)繼承對(duì)象類的原型，即xxx.prototype
- 執(zhí)行類的構(gòu)造函數(shù)，同時(shí)將改實(shí)例上的屬性和方法被this引用，即this指向新的構(gòu)造函數(shù)
- 如果構(gòu)造函數(shù)放回一個(gè)新對(duì)象，那么這個(gè)對(duì)象就會(huì)取代new出來的結(jié)果。如果構(gòu)造函數(shù)沒有return對(duì)象，即返回隱式的this
for of , for...in.. 的區(qū)別
http://www.itdecent.cn/p/c43f418d6bf0
事件冒泡和事件捕獲有什么區(qū)別
事件捕獲：當(dāng)觸發(fā)子元素身上的事件，會(huì)先觸發(fā)父元素，然后在傳遞給子元素
事件冒泡：當(dāng)給父子元素的同一事件綁定方法時(shí)，觸發(fā)子元素身上的事件，執(zhí)行完畢之后，也會(huì)觸發(fā)父級(jí)元素相同的事件。
事件委托
通過父節(jié)點(diǎn)事件來傳播到子節(jié)點(diǎn)（事件捕獲）
問：怎么判斷你點(diǎn)了是第幾個(gè)子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script>
window.onload = function() {
let $ul = document.getElementsByTagName('ul')[0];
let $lis = document.getElementsByTagName('li')
$ul.addEventListener('click', function(e) {
let target = e.target
for(let i = 0; i< $lis.length; i++) {
if (target === $lis[i]) {
console.log('你點(diǎn)擊了第', i + 1 , '個(gè)')
}
}
});
};
</script>
</html>
移動(dòng)端 click和touch事件的區(qū)別
