微网站设计基本要求,手表官方网站,建筑官方网站,青岛网站设计公司推荐1 事件流
事件流分为两步#xff0c;一是捕获#xff0c;二是冒泡
1.1 捕获概念
捕获就是从最高层一层一层往下找到最内部的节点
1.2 冒泡概念
捕获到最小节点后#xff0c;一层一层往上返回#xff0c;像是气泡从最底部往上冒一样#xff0c;由于水深不同压强不同一是捕获二是冒泡
1.1 捕获概念
捕获就是从最高层一层一层往下找到最内部的节点
1.2 冒泡概念
捕获到最小节点后一层一层往上返回像是气泡从最底部往上冒一样由于水深不同压强不同同样多的气体越往上冒气泡越大就像在html里越往上走“辈分”越大一样所以比喻成冒泡
1.3 事件默认触发是在捕获阶段还是冒泡阶段
默认是冒泡阶段 考虑如下层级
div classgrandpadiv classfatherdiv classson/div/div
/div为这三个div添加事件
const grandpa document.querySelector(.grandpa);
const father document.querySelector(.father);
const son document.querySelector(.son);grandpa.onclick function() {console.log(grandpa);
}
father.onclick function() {console.log(father);
}
son.onclick function() {console.log(son);
}添加样式
*{margin: 0;padding: 0;
}
.grandpa {margin: 200px auto;
}.grandpa {width: 400px;height: 400px;background-color: blue;
}
.father {width: 300px;height: 300px;background-color: skyblue;
}
.son {width: 200px;height: 200px;background-color: pink;
}考虑点击粉色区域时 输出顺序是什么点此跳转查看上述案例
son
father
grandpa如果是捕获时触发事件则顺序应当相反
1.4 阻止冒泡
son.onclick function(event) {console.log(son);event.stopPropagation();
}如上代码, 事件会默认向函数里传入一个event事件, 调用event.stopPropagation();事件即可在当前位置阻止冒泡 这样点击son的显示区域时只会输出son 如果想要在点击son的区域时, 只将冒泡传递到father, 即触发father但是不触发grandpa的onclick事件, 可以如下操作:
const grandpa document.querySelector(.grandpa);
const father document.querySelector(.father);
const son document.querySelector(.son);grandpa.onclick function() {console.log(grandpa);
}
father.onclick function(event) {console.log(father);event.stopPropagation();
}
son.onclick function() {console.log(son);
}2 事件委托/事件代理
事件委托, 又称事件代理 顾名思义, 事件委托, 肯定是把事件委托到别处. 冒泡时触发事件, 那肯定是往上委托 也就是说, 将当前节点的事件交给该节点往上冒泡可达的先辈节点处理 这么说还是有点模糊, 准确来说, 就是son节点不绑定onclick事件, 而是等click事件冒泡到father身上, 在father身上绑定onclick事件, 在father的onclick事件中获取并处理被点击的son
事件冒泡时会将当前节点作为event事件的一个属性target传入, 也就是说相当于event.target document.getElementById(son)传入了father的onclick事件中
2.1 事件委托的好处
考虑下面例子
ul classfatherli classson1/lili classson2/lili classson3/lili classson4/li
/ul当点击不同li的时候, 想要触发不同的事件, 例如输出1/2/3/4 传统实现逻辑如下:
const sons document.querySelectorAll(.son);for(const i 0; i sons.length; i) {sons[i].onclick function() {console.log(i);}
}如果页面内容非常多, 例如这里有1000个li标签, 那么就需要添加1000次onclick函数, 十分麻烦 这种情况我们可以将事件委托给父元素. 这里需要用到 event.target 不妨试试对class为father的ul添加onclick事件, 输出event, 并点击li所在的区域, 查看event.target输出的是什么
const father document.querySelector(.father);
father.onclick function(event) {console.log(event.target);
}我们点击第四个li:
可见, 在父元素ul上添加onclick事件, 点击子元素时, 冒泡时会将该子元素传递给过来 据此我们可以对子元素进行处理, 这样我们只在ul上绑定了事件, 就可以处理该ul下所有的li 点击尝试
const father document.querySelector(.father);
father.onclick function(event) {console.log(event.target.innerText);// 或者一些对点击的li的其他操作
}
