當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
生活随笔
收集整理的這篇文章主要介紹了
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習地址：
JavaScript基礎、高級學習筆記匯總表【尚硅谷最新版JavaScript基礎全套教程完整版(140集實戰(zhàn)教學,JS從入門到精通)】
目? ?錄
P104?104.尚硅谷_JS基礎_添加刪除記錄-添加?23:00
P105?105.尚硅谷_JS基礎_添加刪除記錄-修改?07:58
P106?106.尚硅谷_JS基礎_a的索引問題?06:49
P107?107.尚硅谷_JS基礎_操作內聯樣式?16:42
CSS 背景屬性（Background）
通過JS修改元素的樣式【語法：元素.style.樣式名 = 樣式值】
讀取標簽的樣式【語法：元素.style.樣式名;】
P108?108.尚硅谷_JS基礎_獲取元素的樣式?24:56
background-color 屬性
獲取元素的當前顯示的樣式【語法：元素.currentStyle.樣式名】IE瀏覽器
getComputedStyle()：獲取元素當前的樣式
P109?109.尚硅谷_JS基礎_getStyle()方法?10:05
同時兼容IE8與其它瀏覽器
實驗代碼
P110?110.尚硅谷_JS基礎_其他樣式相關的屬性?48:04
DOM Element 對象
① element.clientWidth、element.clientHeight
②?offsetWidth、offsetHeight
③?offsetParent：獲取當前元素的定位父元素
④?offsetLeft、offsetTop
⑤?scrollWidth、scrollHeight
⑥ scrollLeft、scrollTop
①~⑥ 練習代碼
滾動條練習【用戶將滾動條滾到底，可進行注冊】
checkbox 對象：disabled屬性
用戶閱讀協(xié)議，且滾動條滾到底，才可以進行注冊——代碼and運行截圖
P111?111.尚硅谷_JS基礎_事件對象?18:02
移動鼠標，以px顯示距離
P112?112.尚硅谷_JS基礎_div跟隨鼠標移動?23:33
P113?113.尚硅谷_JS基礎_事件的冒泡?15:52
事件的冒泡（Bubble）
事件冒泡-案例1
事件冒泡-案例2
P104?104.尚硅谷_JS基礎_添加刪除記錄-添加?23:00
??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加刪除記錄練習</title><!-- <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> --><style type="text/css">@CHARSET "UTF-8";#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;}th, td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}</style><script type="text/javascript">/** 刪除tr的響應函數*/function delA() {//點擊超鏈接以后需要刪除超鏈接所在的那行//這里我們點擊那個超鏈接this就是誰//獲取當前trvar tr = this.parentNode.parentNode;//獲取要刪除的員工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//刪除之前彈出一個提示框/** confirm()用于彈出一個帶有確認和取消按鈕的提示框* 需要一個字符串作為參數，該字符串將會作為提示文字顯示出來* 如果用戶點擊確認則會返回true，如果點擊取消則返回false*/var flag = confirm("確認刪除" + name + "嗎?");//如果用戶點擊確認if (flag) {//刪除trtr.parentNode.removeChild(tr);}/** 點擊超鏈接以后，超鏈接會跳轉頁面，這個是超鏈接的默認行為，* 但是此時我們不希望出現默認行為，可以通過在響應函數的最后return false來取消默認行為*/return false;};window.onload = function() {/** 點擊超鏈接以后，刪除一個員工的信息*///獲取所有額超鏈接var allA = document.getElementsByTagName("a");//為每個超鏈接都綁定一個單擊響應函數for (var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}/** 添加員工的功能* - 點擊按鈕以后，將員工的信息添加到表格中*///為提交按鈕綁定一個單擊響應函數var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function() {//獲取用戶添加的員工信息//獲取員工的名字var name = document.getElementById("empName").value;//獲取員工的email和salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//alert(name+","+email+","+salary);/** <tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr>需要將獲取到的信息保存到tr中*///創(chuàng)建一個trvar tr = document.createElement("tr");//創(chuàng)建四個tdvar nameTd = document.createElement("td");var emailTd = document.createElement("td");var salaryTd = document.createElement("td");var aTd = document.createElement("td");//創(chuàng)建一個a元素var a = document.createElement("a");//創(chuàng)建文本節(jié)點var nameText = document.createTextNode(name);var emailText = document.createTextNode(email);var salaryText = document.createTextNode(salary);var delText = document.createTextNode("Delete");//將文本添加到td中nameTd.appendChild(nameText);emailTd.appendChild(emailText);salaryTd.appendChild(salaryText);a.appendChild(delText); // 向a中添加文本//將a添加到td中aTd.appendChild(a);//將td添加到tr中tr.appendChild(nameTd);tr.appendChild(emailTd);tr.appendChild(salaryTd);tr.appendChild(aTd);//向a中添加href屬性a.href = "javascript:;";//為新添加的a再綁定一次單擊響應函數a.onclick = delA;//獲取tablevar employeeTable = document.getElementById("employeeTable");//獲取employeeTable中的tbodyvar tbody = employeeTable.getElementsByTagName("tbody")[0];//將tr添加到tbodye中tbody.appendChild(tr);};};</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新員工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton">Submit</button></td></tr></table></div></body> </html>P105?105.尚硅谷_JS基礎_添加刪除記錄-修改?07:58
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加刪除記錄練習</title><!-- <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> --><style type="text/css">@CHARSET "UTF-8";#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;}th, td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}</style><script type="text/javascript">/** 刪除tr的響應函數*/function delA() {//點擊超鏈接以后需要刪除超鏈接所在的那行//這里我們點擊那個超鏈接this就是誰//獲取當前trvar tr = this.parentNode.parentNode;//獲取要刪除的員工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//刪除之前彈出一個提示框/** confirm()用于彈出一個帶有確認和取消按鈕的提示框* 需要一個字符串作為參數，該字符串將會作為提示文字顯示出來* 如果用戶點擊確認則會返回true，如果點擊取消則返回false*/var flag = confirm("確認刪除" + name + "嗎?");//如果用戶點擊確認if (flag) {//刪除trtr.parentNode.removeChild(tr);}/** 點擊超鏈接以后，超鏈接會跳轉頁面，這個是超鏈接的默認行為，* 但是此時我們不希望出現默認行為，可以通過在響應函數的最后return false來取消默認行為*/return false;};window.onload = function() {/** 點擊超鏈接以后，刪除一個員工的信息*///獲取所有額超鏈接var allA = document.getElementsByTagName("a");//為每個超鏈接都綁定一個單擊響應函數for (var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}/** 添加員工的功能* - 點擊按鈕以后，將員工的信息添加到表格中*///為提交按鈕綁定一個單擊響應函數var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function() {//獲取用戶添加的員工信息//獲取員工的名字var name = document.getElementById("empName").value;//獲取員工的email和salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//alert(name+","+email+","+salary);/** <tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr>需要將獲取到的信息保存到tr中*///創(chuàng)建一個trvar tr = document.createElement("tr");//設置tr中的內容tr.innerHTML = "<td>" + name + "</td>" +"<td>" + email + "</td>" +"<td>" + salary + "</td>" +"<td><a href='javascript:;'>Delete</a></td>";//獲取剛剛添加的a元素，并為其綁定單擊響應函數 var a = tr.getElementsByTagName("a")[0];a.onclick = delA;//獲取tablevar employeeTable = document.getElementById("employeeTable");//獲取employeeTable中的tbodyvar tbody = employeeTable.getElementsByTagName("tbody")[0];//將tr添加到tbodye中tbody.appendChild(tr);/* tbody.innerHTML += "<tr>" +"<td>" + name + "</td>" +"<td>" + email + "</td>" +"<td>" + salary + "</td>" +"<td><a href='javascript:;'>Delete</a></td>"+"</tr>"; */};};</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新員工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton">Submit</button></td></tr></table></div></body> </html>P106?106.尚硅谷_JS基礎_a的索引問題?06:49
P107?107.尚硅谷_JS基礎_操作內聯樣式?16:42
CSS 背景屬性（Background）
通過JS修改元素的樣式【語法：元素.style.樣式名 = 樣式值】
??
讀取標簽的樣式【語法：元素.style.樣式名;】
P108?108.尚硅谷_JS基礎_獲取元素的樣式?24:56
background-color 屬性
獲取元素的當前顯示的樣式【語法：元素.currentStyle.樣式名】IE瀏覽器
- 獲取元素的當前顯示的樣式
- 語法：元素.currentStyle.樣式名
- 它可以用來讀取當前元素正在顯示的樣式，如果當前元素沒有設置該樣式，則獲取它的默認值。
- currentStyle只有IE瀏覽器支持，其他的瀏覽器都不支持。
getComputedStyle()：獲取元素當前的樣式
在其他瀏覽器中可以使用，getComputedStyle()這個方法來獲取元素當前的樣式，這個方法是window的方法，可以直接使用。
需要兩個參數
該方法會返回一個對象，對象中封裝了當前元素對應的樣式，可以通過對象.樣式名來讀取樣式。
如果獲取的樣式沒有設置，則會獲取到真實的值，而不是默認值。比如：沒有設置width，它不會獲取到auto，而是一個長度。
但是該方法不支持IE8及以下的瀏覽器，通過currentStyle和getComputedStyle()讀取到的樣式都是只讀的，不能修改，如果要修改必須通過style屬性。
P109?109.尚硅谷_JS基礎_getStyle()方法?10:05
同時兼容IE8與其它瀏覽器
不需要判斷瀏覽器版本，只需要判斷當前瀏覽器有沒有getComputedStyle()方法即可。
- getComputedStyle 不加 window：是變量，需要去作用域尋找。變量沒找到，會報錯。
- getComputedStyle? ? ?加 window，成為window對象的屬性。屬性沒找到，返回undefined。
實驗代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {height: 100px;background-color: yellow;}</style><script type="text/javascript">window.onload = function() {//點擊按鈕以后讀取box1的樣式var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function() {//讀取box1的寬度//alert(box1.style.width);// alert(box1.currentStyle.width);//box1.currentStyle.width = "200px";//alert(box1.currentStyle.backgroundColor);//var obj = getComputedStyle(box1, null);// alert(getComputedStyle(box1, null).width);//正常瀏覽器的方式//alert(getComputedStyle(box1, null).backgroundColor);//IE8的方式//alert(box1.currentStyle.backgroundColor);// alert(getStyle(box1, "width"));var w = getStyle(box1, "width");alert(w);};};/** 定義一個函數，用來獲取指定元素的當前的樣式* 參數：* obj 要獲取樣式的元素* name 要獲取的樣式名*/function getStyle(obj, name) {if (window.getComputedStyle) {//正常瀏覽器的方式，具有getComputedStyle()方法return getComputedStyle(obj, null)[name];} else {//IE8的方式，沒有getComputedStyle()方法return obj.currentStyle[name];}//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];}</script></head><body><button id="btn01">點我一下</button><br /><br /><div id="box1"></div></body> </html>P110?110.尚硅谷_JS基礎_其他樣式相關的屬性?48:04
DOM Element 對象
??
① element.clientWidth、element.clientHeight
clientWidth、clientHeight
②?offsetWidth、offsetHeight
offsetWidth、offsetHeight：獲取元素的整個的寬度和高度，包括內容區(qū)、內邊距和邊框。
③?offsetParent：獲取當前元素的定位父元素
offsetParent
? static、absolute、 relative、fixed
④?offsetLeft、offsetTop
- offsetLeft：當前元素相對于其定位父元素的水平偏移量
- offsetTop：當前元素相對于其定位父元素的垂直偏移量
⑤?scrollWidth、scrollHeight
scrollWidth、scrollHeight：可以獲取元素整個滾動區(qū)域的寬度和高度
⑥ scrollLeft、scrollTop
- scrollLeft：可以獲取水平滾動條滾動的距離。
- scrollTop：可以獲取垂直滾動條滾動的距離。
①~⑥ 練習代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}#box2 {padding: 100px;background-color: #bfa;}#box4 {width: 200px;height: 300px;background-color: #bfa;overflow: auto;}#box5 {width: 450px;height: 600px;background-color: yellow;}</style><script type="text/javascript">window.onload = function() {var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function() {/** clientWidth* clientHeight* - 這兩個屬性可以獲取元素的可見寬度和高度* - 這些屬性都是不帶px的，返回都是一個數字，可以直接進行計算* - 會獲取元素寬度和高度，包括內容區(qū)和內邊距* - 這些屬性都是只讀的，不能修改*/// alert(box1.clientWidth);// alert(box1.clientHeight);// box1.clientHeight = 300;/** offsetWidth* offsetHeight* - 獲取元素的整個的寬度和高度，包括內容區(qū)、內邊距和邊框*/// alert(box1.offsetWidth);/** offsetParent* - 可以用來獲取當前元素的定位父元素* - 會獲取到離當前元素最近的開啟了定位的祖先元素* 如果所有的祖先元素都沒有開啟定位，則返回body*/// var op = box1.offsetParent;// alert(op.id);/** offsetLeft* - 當前元素相對于其定位父元素的水平偏移量* offsetTop* - 當前元素相對于其定位父元素的垂直偏移量*/// alert(box1.offsetLeft);/** scrollWidth* scrollHeight* - 可以獲取元素整個滾動區(qū)域的寬度和高度*/// alert(box4.clientHeight);// alert(box4.scrollWidth);/** scrollLeft* - 可以獲取水平滾動條滾動的距離* scrollTop* - 可以獲取垂直滾動條滾動的距離*/// alert(box4.scrollLeft);// alert(box4.scrollTop);// alert(box4.clientHeight); // 283//當滿足scrollHeight - scrollTop == clientHeight//說明垂直滾動條滾動到底了//當滿足scrollWidth - scrollLeft == clientWidth//說明水平滾動條滾動到底// alert(box4.scrollHeight - box4.scrollTop); // 600};};</script></head><body id="body"><button id="btn01">點我一下</button><br /><br /><div id="box4"><div id="box5"></div></div><br /><br /><div id="box3"><div id="box2" style="position: relative;"><div id="box1"></div></div></div></body> </html>滾動條練習【用戶將滾動條滾到底，可進行注冊】
checkbox 對象：disabled屬性
用戶閱讀協(xié)議，且滾動條滾到底，才可以進行注冊——代碼and運行截圖
????
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#info {width: 300px;height: 500px;background-color: #bfa;overflow: auto;}</style><script type="text/javascript">window.onload = function() {/** 當垂直滾動條滾動到底時使表單項可用* onscroll* - 該事件會在元素的滾動條滾動時觸發(fā)*///獲取id為info的p元素var info = document.getElementById("info");//獲取兩個表單項var inputs = document.getElementsByTagName("input");//為info綁定一個滾動條滾動的事件info.onscroll = function() {//檢查垂直滾動條是否滾動到底if (info.scrollHeight - info.scrollTop == info.clientHeight) {//滾動條滾動到底，使表單項可用/** disabled屬性可以設置一個元素是否禁用，* 如果設置為true，則元素禁用* 如果設置為false，則元素可用*/inputs[0].disabled = false;inputs[1].disabled = false;}};};</script></head><body><h3>歡迎親愛的用戶注冊</h3><p id="info">親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。親愛的用戶，請仔細閱讀以下協(xié)議！如果你不仔細閱讀，你就別注冊。</p><!-- 如果為表單項添加disabled="disabled" 則表單項將變成不可用的狀態(tài) --><input type="checkbox" disabled="disabled" />我已仔細閱讀協(xié)議，一定遵守！<input type="submit" value="注冊" disabled="disabled" /></body> </html>P111?111.尚硅谷_JS基礎_事件對象?18:02
移動鼠標，以px顯示距離
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style><script type="text/javascript">window.onload = function() {// 當鼠標在areaDiv中移動時，在showMsg中來顯示鼠標的坐標//獲取兩個divvar areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");/** onmousemove* - 該事件將會在鼠標在元素中移動時被觸發(fā)* * 事件對象* - 當事件的響應函數被觸發(fā)時，瀏覽器每次都會將一個事件對象作為實參傳遞進響應函數,* 在事件對象中封裝了當前事件相關的一切信息，比如：鼠標的坐標、鍵盤哪個按鍵被按下、鼠標滾輪滾動的方向。*/areaDiv.onmousemove = function(event) {/** 在IE8中，響應函數被觸發(fā)時，瀏覽器不會傳遞事件對象，* 在IE8及以下的瀏覽器中，是將事件對象作為window對象的屬性保存的*//*if(!event){event = window.event;}*///解決事件對象的兼容性問題event = event || window.event;// 第1個為true，不看第2個；第1個為false，返回第2個/** clientX可以獲取鼠標指針的水平坐標* cilentY可以獲取鼠標指針的垂直坐標*/var x = event.clientX;var y = event.clientY;// alert("x = " + x + " , y = " + y);//在showMsg中顯示鼠標的坐標showMsg.innerHTML = "x = " + x + " , y = " + y;};};</script></head><body><div id="areaDiv"></div><div id="showMsg"></div></body> </html>P112?112.尚硅谷_JS基礎_div跟隨鼠標移動?23:33
- 事件綁定給box1，只有鼠標在box1中 才會觸發(fā)。
P113?113.尚硅谷_JS基礎_事件的冒泡?15:52
事件的冒泡（Bubble）
事件的冒泡（Bubble）
- 所謂的冒泡指的就是事件的向上傳導，當后代元素上的事件被觸發(fā)時，其祖先元素的相同事件也會被觸發(fā)。
- 在開發(fā)中大部分情況冒泡都是有用的。如果不希望發(fā)生事件冒泡可以通過事件對象來取消冒泡。
事件冒泡-案例1
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 200px;height: 200px;background-color: yellowgreen;}#s1 {background-color: yellow;}</style><script type="text/javascript">window.onload = function() {//為s1綁定一個單擊響應函數var s1 = document.getElementById("s1");s1.onclick = function(event) {event = event || window.event;alert("我是span的單擊響應函數");//取消冒泡//可以將事件對象的cancelBubble設置為true，即可取消冒泡event.cancelBubble = true;};//為box1綁定一個單擊響應函數var box1 = document.getElementById("box1");box1.onclick = function(event) {event = event || window.event;alert("我是div的單擊響應函數");event.cancelBubble = true;};//為body綁定一個單擊響應函數document.body.onclick = function() {alert("我是body的單擊響應函數");};};</script></head><body><div id="box1">我是box1！<span id="s1">我是span！</span></div></body> </html>事件冒泡-案例2
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute; /* 開啟box1的絕對定位 */}</style><script type="text/javascript">window.onload = function() {/** 使div可以跟隨鼠標移動*///獲取box1var box1 = document.getElementById("box1");//綁定鼠標移動事件document.onmousemove = function(event) {//解決兼容問題event = event || window.event;//獲取滾動條滾動的距離/** chrome認為瀏覽器的滾動條是body的，可以通過body.scrollTop來獲取* 火狐等瀏覽器認為瀏覽器的滾動條是html的，*/var st = document.body.scrollTop || document.documentElement.scrollTop;var sl = document.body.scrollLeft || document.documentElement.scrollLeft;//var st = document.documentElement.scrollTop;//獲取到鼠標的坐標/** clientX和clientY* 用于獲取鼠標在當前的可見窗口的坐標* div的偏移量，是相對于整個頁面的* * pageX和pageY可以獲取鼠標相對于當前頁面的坐標* 但是這個兩個屬性在IE8中不支持，所以如果需要兼容IE8，則不要使用*/var left = event.clientX;var top = event.clientY;//設置div的偏移量box1.style.left = left + sl + "px";box1.style.top = top + st + "px";};var box2 = document.getElementById("box2");box2.onmousemove = function(event) {event = event || window.event;event.cancelBubble = true;};};</script></head><body style="height: 1000px;width: 2000px;"><div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div><div id="box1"></div></body> </html>今天，5:14 就醒了。躺倒5:55，起床，學習。中午11:48 [103~113] ，看完。
總結
以上是生活随笔為你收集整理的JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript基础12-day14
- 下一篇： JavaScript基础14-day16