原生js實(shí)現(xiàn)淘寶網(wǎng)頁(yè)的產(chǎn)品展示框效果
淘寶網(wǎng)頁(yè)產(chǎn)品展示模塊如下：
當(dāng)鼠標(biāo)移入小圖，在上方會(huì)相應(yīng)地展示大圖
實(shí)現(xiàn)效果
當(dāng)鼠標(biāo)移入小圖，在上方會(huì)相應(yīng)地展示大圖；且當(dāng)鼠標(biāo)移出，圖片停留在移入時(shí)顯示的圖片，不會(huì)改變。
本文實(shí)現(xiàn)效果如下（鼠標(biāo)移入即改變，不用點(diǎn)擊）：
實(shí)現(xiàn)思路
定義圖片列表，為列表添加鼠標(biāo)移入事件onmouseover（注意：此處不能使用onmouseenter，因?yàn)榇朔椒ú恢С置芭輽C(jī)制），當(dāng)鼠標(biāo)移入列表，判斷移入的是具體哪張圖，把這張圖渲染到大圖上。
此例子利用了事件委托，即批量添加事件監(jiān)聽(tīng)。
如果給每一張小圖都添加一個(gè)鼠標(biāo)移入事件，會(huì)造成代碼的重復(fù)冗余，因?yàn)槊恳粡垐D片的鼠標(biāo)移入事件都是一樣的，還會(huì)造成內(nèi)存浪費(fèi)。因此，我們給這些圖片的父元素添加一個(gè)鼠標(biāo)移入事件，通過(guò)
e.target獲取具體觸發(fā)事件的元素
批量添加事件監(jiān)聽(tīng)（事件委托原理）
當(dāng)需要給每個(gè)子元素添加事件監(jiān)聽(tīng)時(shí)，可以委托給父元素添加事件監(jiān)聽(tīng)，然后通過(guò)e.target( )獲取具體被點(diǎn)擊的子元素。
原理：事件傳播（冒泡）機(jī)制
什么是事件傳播
當(dāng)嵌套元素的最內(nèi)元素被點(diǎn)擊，實(shí)際上嵌套元素的最外層也被點(diǎn)擊了
事件的傳播是：先從外到內(nèi)（捕獲階段），然后再?gòu)膬?nèi)到外（冒泡階段）
舉例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#big{width: 300px;height: 300px;background-color: cornflowerblue;}
#small{width: 200px;height: 200px;background-color: coral;}
</style>
</head>
<body>
<div id="big">
<div id="small">這是小方塊</div>
這是大方塊
</div>
</body>
<script>
var small = document.getElementById("small");
var big = document.getElementById("big");
// 子元素點(diǎn)擊事件
small.onclick = function(){
console.log("您點(diǎn)擊了小方塊");
}
// 父元素點(diǎn)擊事件
big.onclick=function(){
console.log("您點(diǎn)擊了大方塊");
}
</script>
</html>
我們分別定義了大小方塊自己的點(diǎn)擊事件，然后點(diǎn)擊了小方塊，卻同時(shí)觸發(fā)了大方塊的點(diǎn)擊事件，這就是事件傳播，也叫冒泡（由內(nèi)到外觸發(fā)）。
e.target 事件源元素
e.target：最早觸發(fā)事件的元素，具體觸發(fā)的事件的元素
<ul>
<li>列表項(xiàng)一</li>
<li>列表項(xiàng)二</li>
</ul>
<script>
var ul = document.querySelector('ul');
//給父元素添加點(diǎn)擊事件
ul.onclick = function(e){
// 輸出被點(diǎn)擊的源元素，即如果點(diǎn)擊的是li,則會(huì)輸出li
console.log(e.target);
}
</script>
e.currentTarget 事件委托元素
e.currentTarget：添加了事件的父元素文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-725095.html
<ul>
<li>列表項(xiàng)一</li>
<li>列表項(xiàng)二</li>
</ul>
<script>
var ul = document.querySelector('ul');
//給ul添加點(diǎn)擊事件，則e.currentTarget == ul
ul.onclick = function(e){
// 若點(diǎn)擊的源元素不是ul
if(e.target !== e.currentTarget){
console.log(e.target); // 輸出被點(diǎn)擊的li列表項(xiàng)
}
}
</script>
使用事件委的注意事項(xiàng)：
1、不能委托不冒泡的事件給父元素
因?yàn)槭录欣昧嗣芭輽C(jī)制，不冒泡的事件不能用事件委托。
如：onmouseenter不冒泡，onmouseover冒泡。
2、只能有一層嵌套關(guān)系文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-725095.html
<!--下面的兩層嵌套，當(dāng)給ul添加點(diǎn)擊事件，若點(diǎn)擊的是span，則e.target只能獲取span，無(wú)法對(duì)li做處理-->
<ul>
<li>第<span>1</span>項(xiàng)</li>
<li>第<span>2</span>項(xiàng)</li>
</ul>
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘寶商品展示圖</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
body > img:nth-child(1) {
border-radius: 15px;
padding: 5px;
border: 5px solid orange;
}
#bigImg{
width: 500px;
}
.smallImg{
width: 100px;
}
ul {
list-style: none;
display: inline-block;
}
ul li {
float: left;
width: 100px;
height: 100px;
margin: 5px;
border: 1px solid rgb(121, 120, 120);
border-radius: 5px;
}
ul li.active {
border: 2px solid orange;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 大圖，默認(rèn)展示第一張 -->
<img src="徽章/1.webp" id="bigImg" />
<br />
<br />
<!-- 小圖列表 -->
<ul>
<li class="active">
<a href="">
<img src="徽章/1.webp" width="50" class="smallImg" />
</a>
</li>
<li >
<a href="">
<img src="徽章/2.webp" width="50" class="smallImg" />
</a>
</li>
<li>
<a href="">
<img src="徽章/3.webp" width="50" class="smallImg" />
</a>
</li>
<li>
<a href="">
<img src="徽章/4.webp" width="50" class="smallImg" />
</a>
</li>
<li>
<a href="">
<img src="徽章/5.webp" width="50" class="smallImg" />
</a>
</li>
</ul>
</body>
<script>
// 獲取列表元素
var ul = document.querySelector("ul");
// 獲取列表下的列表項(xiàng)數(shù)組
var liArr = document.querySelectorAll("ul>li");
// 獲取大圖的dom元素
var bigImg = document.getElementById("bigImg");
// 給列表，即父級(jí)元素添加鼠標(biāo)移入事件，onmouseover支持冒泡
ul.onmouseover = function(e){
// 如果鼠標(biāo)移入的元素不是父元素，而是具體的子元素
if(e.target != e.currentTarget){
// 遍歷所有l(wèi)i
for(var i = 0 ; i < liArr.length; i++){
// 如果e.target 等于 li或li的子節(jié)點(diǎn)，設(shè)li的class為active，并且更改圖片地址
if(e.target == liArr[i] || e.target == liArr[i].children[0] || e.target == liArr[i].children[0].children[0]){
liArr[i].className = "active";
// 更改對(duì)應(yīng)的圖片地址
bigImg.src = liArr[i].children[0].children[0].getAttribute("src");
}else{
// 不是移入的節(jié)點(diǎn)，去掉active效果
liArr[i].className = "";
}
}
}
}
</script>
</html>
到了這里，關(guān)于原生js實(shí)現(xiàn)網(wǎng)頁(yè)淘寶產(chǎn)品展示效果，鼠標(biāo)移入小圖展示對(duì)應(yīng)大圖（事件委托、事件傳播、冒泡機(jī)制）【含完整代碼】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
