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 属性。
