JS-项目实战-编辑单价单元格，可以点击单价单元格并且出现文本框，并自动选中输入框内部的文本

1、鼠标悬浮和离开事件.js

//当页面加载完成后执行后面的匿名函数
window.onload = function () {//get:获取     Element:元素    By:通过...方式//getElementById()根据id值获取某元素let fruitTbl = document.getElementById("fruit_tbl");//table.rows:获取这个表格的所有的行，返回数组let rows = fruitTbl.rows;//从 1 开始，因为 第 0 行是表头，不需要绑定事件for (let i = 1; i < rows.length; i++) {let tr = rows[i];//事件动态绑定tr.onmouseover = showBGColor;tr.onmouseout = clearBGColor;//cell:单元格、细胞//获取这一行的所有的单元格let tds = tr.cells;let priceTD = tds[2];priceTD.onmouseover = showHand;priceTD.onclick=editPrice}
};
editPrice = function () {let priceTD = event.srcElement;//inner:在...内部let oldPrice = priceTD.innerText;//innerHTML:在节点内部填充一段HTML代码//priceTD.innerHTML = "<input type='text' size='2' value='"+oldPrice+"'/>";priceTD.innerHTML = "<input type='text' size='2'/>";/*** <td><input type="text" size="2"/></td>* first:第一个 child:孩子* firstChild:第一个子节点* @type {ActiveX.IXMLDOMNode | ChildNode | (() => (Node | null))}*/let priceInput = priceTD.firstChild;priceInput.value = oldPrice;priceInput.select();};
function showHand() {let priceTD = event.srcElement;//cursor光标priceTD.style.cursor = "pointer";
}
function showBGColor() {//window.event表示当前发生的事件 ”window.“可以省略// console.log(window.event);// alert(window.event);let obj = window.event.srcElement;//alert(obj);//console.log(obj);   //发现obj是td，而不是tr。事件传递现象let td=obj;//parentElement:父元素   td的父元素是tr。tr有很多td子元素let tr = td.parentElement;tr.style.backgroundColor = "purple";
}function clearBGColor() {let td = window.event.srcElement;let tr = td.parentElement;tr.style.backgroundColor = "transparent";
}

2、fruit.html

<!DOCTYPE html>
<html lang="zh_CN">
<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>js-DOM/BOM实战</title><link href="style/fruit.css" rel="stylesheet"></link><script src="js/鼠标悬浮和离开事件.js"></script>
</head>
<body><div id="div0"><div id="div_title">欢迎使用水果库存系统</div><div id="div2"><table id="fruit_tbl"><tr><th class="w10"><input type="checkbox" /></th><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th class="w10">操作</th></tr><!-- on:当...时候  mouse:鼠标  over:在...上--><!--当鼠标悬浮在这个tr上时,调用showBGColor()这个方法--><tr><td><input type="checkbox" /></td><td>苹果</td><td>5</td><td>2</td><td>10</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>菠萝</td><td>3</td><td>5</td><td>15</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>哈密瓜</td><td>4</td><td>5</td><td>20</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>葡萄</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>青梅</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>人参果</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>菠萝蜜</td></td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" /></td><td>西红柿</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr></table></div></div>
</body>
</html>

3、fruit.css

*{color:rgb(3, 31, 2);font-weight: lighter;
}
body{padding:0;margin:0;background-color: rgb(3, 31, 2);
}
#div0{width:80%;border:0px solid red;background-color: rgb(209, 230, 235);margin-left:10%;padding-top:48px;padding-bottom:48px;margin-top:8px;
}
#div_title{width:80%;margin-left:10%;text-align: center;font-size:24px;letter-spacing: 4px;margin-bottom:16px;
}
#div2{margin-left:10%;border:0px solid red;width:80%;
}
.delBtn{width:16px;height:16px;
}
#fruit_tbl , #fruit_tbl td, #fruit_tbl th {border:1px solid lightgray;text-align: center;
}
#fruit_tbl{width:100%;line-height: 32px;border-collapse: collapse;
}
.w10{width:10%;
}
.w15{width:15%;
}
.w20{width:20%;
}

在JS中，使用 event.srcElement 属性可以获取触发事件的元素（即事件的源）。这个属性对于在事件处理函数中对元素进行操作非常有用。例如，可以使用 event.srcElement 来修改元素的样式，添加或删除元素的类等等。

下面是一个使用 event.srcElement 的例子，当用户单击页面上的任意元素时，会在控制台中输出该元素的 id 属性：
document.addEventListener('click', function(event) {console.log(event.srcElement.id);
});
此外，在老版本的 Internet Explorer 中，event.srcElement 是获取事件目标元素（即触发事件的元素）的首选属性，因为 event.target 不被支持。但在现代浏览器中，建议使用 event.target 来获取目标元素。

event.srcElement 可以用在JS中来获取触发事件的元素。在早期的IE浏览器版本中，该属性被广泛使用来获取事件源元素。在现代浏览器中，推荐使用 event.target 属性来代替 event.srcElement 属性，因为 event.srcElement 在所有主流浏览器中并不总是支持。

通过使用 event.srcElement，您可以轻松地确定哪个元素触发了某个事件，并进一步针对该元素执行相应的操作。例如，您可以通过 event.srcElement 修改某个元素的样式或属性，或者为触发该事件的元素添加其他事件监听器来实现更多的功能。

在 JavaScript 中，event.srcElement 属性通常用于以下目的：

获取触发事件的元素：event.srcElement 可以返回触发事件的元素对象，也就是事件的目标元素。

判断事件来自哪个元素：通过检查 event.srcElement 属性，可以判断事件来自哪个元素，进而根据需要进行相应的操作。

兼容性考虑：event.srcElement 属性在早期的 IE 浏览器中得到了广泛支持，很多旧的网站和代码仍在使用该属性，如果需要兼容旧版 IE 浏览器，就需要使用 event.srcElement 属性。

需要注意的是，event.srcElement 属性已经被更加标准的 event.target 属性所取代，而且 event.target 属性在现代浏览器中得到了广泛支持，因此建议在编写新代码时使用 event.target 属性，而在兼容旧版 IE 浏览器时再考虑使用 event.srcElement 属性。