事件的委托
所谓的事件委托，通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。
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('你点击了第1个li');
}
function clickLi02() {
alert('你点击了第2个li');
}
function clickLi03() {
alert('你点击了第3个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 做了什么操作
- 创建一个新对象，同时继承对象类的原型，即xxx.prototype
- 执行类的构造函数，同时将改实例上的属性和方法被this引用，即this指向新的构造函数
- 如果构造函数放回一个新对象，那么这个对象就会取代new出来的结果。如果构造函数没有return对象，即返回隐式的this
for of , for...in.. 的区别
https://www.jianshu.com/p/c43f418d6bf0
事件冒泡和事件捕获有什么区别
事件捕获：当触发子元素身上的事件，会先触发父元素，然后在传递给子元素
事件冒泡：当给父子元素的同一事件绑定方法时，触发子元素身上的事件，执行完毕之后，也会触发父级元素相同的事件。
事件委托
通过父节点事件来传播到子节点（事件捕获）
问：怎么判断你点了是第几个子节点
<!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('你点击了第', i + 1 , '个')
}
}
});
};
</script>
</html>
移动端 click和touch事件的区别
网友评论