学习地址：
谷粒学院——尚硅谷哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)
JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】
目 录
P104104.尚硅谷_JS基础_添加删除记录-添加23:00
P105105.尚硅谷_JS基础_添加删除记录-修改07:58
P106106.尚硅谷_JS基础_a的索引问题06:49
P107107.尚硅谷_JS基础_操作内联样式16:42
CSS 背景属性（Background）
通过JS修改元素的样式【语法：元素.style.样式名 = 样式值】
读取标签的样式【语法：元素.style.样式名;】
P108108.尚硅谷_JS基础_获取元素的样式24:56
background-color 属性
获取元素的当前显示的样式【语法：元素.currentStyle.样式名】IE浏览器
getComputedStyle()：获取元素当前的样式
P109109.尚硅谷_JS基础_getStyle()方法10:05
同时兼容IE8与其它浏览器
实验代码
P110110.尚硅谷_JS基础_其他样式相关的属性48:04
DOM Element 对象
① element.clientWidth、element.clientHeight
②offsetWidth、offsetHeight
③offsetParent：获取当前元素的定位父元素
④offsetLeft、offsetTop
⑤scrollWidth、scrollHeight
⑥ scrollLeft、scrollTop
①~⑥ 练习代码
滚动条练习【用户将滚动条滚到底，可进行注册】
checkbox 对象：disabled属性
用户阅读协议，且滚动条滚到底，才可以进行注册——代码and运行截图
P111111.尚硅谷_JS基础_事件对象18:02
移动鼠标，以px显示距离
P112112.尚硅谷_JS基础_div跟随鼠标移动23:33
P113113.尚硅谷_JS基础_事件的冒泡15:52
事件的冒泡（Bubble）
事件冒泡-案例1
事件冒泡-案例2
P104104.尚硅谷_JS基础_添加删除记录-添加23:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/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@</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr>需要将获取到的信息保存到tr中*///创建一个trvar tr = document.createElement("tr");//创建四个tdvar nameTd = document.createElement("td");var emailTd = document.createElement("td");var salaryTd = document.createElement("td");var aTd = document.createElement("td");//创建一个a元素var a = document.createElement("a");//创建文本节点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@</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@</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>
P105105.尚硅谷_JS基础_添加删除记录-修改07:58
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/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@</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr>需要将获取到的信息保存到tr中*///创建一个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@</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@</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>
P106106.尚硅谷_JS基础_a的索引问题06:49
P107107.尚硅谷_JS基础_操作内联样式16:42
CSS 背景属性（Background）
通过JS修改元素的样式【语法：元素.style.样式名 = 样式值】
通过JS修改元素的样式：语法：元素.style.样式名 = 样式值注意：如果CSS的样式名中含有-(减法操作)，这种名称在JS中是不合法的,比如background-color，需要将这种样式名修改为驼峰命名法，去掉“-”，然后将-后的字母大写。我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。但是如果在样式中写了“!important”，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important。
读取标签的样式【语法：元素.style.样式名;】
//读取box1的样式 语法：元素.style.样式名;通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">window.onload = function() {/** 点击按钮以后，修改box1的大小*///获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function() {//修改box1的宽度/** 通过JS修改元素的样式：* 语法：元素.style.样式名 = 样式值* * 注意：如果CSS的样式名中含有-， // 减法操作* 这种名称在JS中是不合法的,比如background-color* 需要将这种样式名修改为驼峰命名法，* 去掉-，然后将-后的字母大写* * 我们通过style属性设置的样式都是内联样式，* 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示* * 但是如果在样式中写了!important，则此时样式会有最高的优先级，* 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效* 所以尽量不要为样式添加!important*/box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";};//点击按钮2以后，读取元素的样式var btn02 = document.getElementById("btn02");btn02.onclick = function() {//读取box1的样式/** 语法：元素.style.样式名;* * 通过style属性设置和读取的都是内联样式* 无法读取样式表中的样式*///alert(box1.style.height);alert(box1.style.width);};};</script></head><body><button id="btn01">点我一下</button><button id="btn02">点我一下2</button><br /><br /><div id="box1"></div></body></html>
P108108.尚硅谷_JS基础_获取元素的样式24:56
background-color 属性
获取元素的当前显示的样式【语法：元素.currentStyle.样式名】IE浏览器
获取元素的当前显示的样式语法：元素.currentStyle.样式名它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值。currentStyle只有IE浏览器支持，其他的浏览器都不支持。
getComputedStyle()：获取元素当前的样式
在其他浏览器中可以使用，getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。
需要两个参数
第1个：要获取样式的元素第2个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式。
如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。
但是该方法不支持IE8及以下的浏览器，通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性。
P109109.尚硅谷_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>
P110110.尚硅谷_JS基础_其他样式相关的属性48:04
DOM Element 对象
① element.clientWidth、element.clientHeight
clientWidth、clientHeight
这两个属性可以获取元素的可见宽度和高度。这些属性都是不带px的，返回都是一个数字，可以直接进行计算。会获取元素宽度和高度，包括内容区和内边距。这些属性都是只读的，不能修改。
②offsetWidth、offsetHeight
offsetWidth、offsetHeight：获取元素的整个的宽度和高度，包括内容区、内边距和边框。
③offsetParent：获取当前元素的定位父元素
offsetParent
可以用来获取当前元素的定位父元素。会获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则返回body。
static、absolute、 relative、fixed
④offsetLeft、offsetTop
offsetLeft：当前元素相对于其定位父元素的水平偏移量offsetTop：当前元素相对于其定位父元素的垂直偏移量
⑤scrollWidth、scrollHeight
scrollWidth、scrollHeight：可以获取元素整个滚动区域的宽度和高度
⑥ 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的，返回都是一个数字，可以直接进行计算* - 会获取元素宽度和高度，包括内容区和内边距* - 这些属性都是只读的，不能修改*/// alert(box1.clientWidth);// alert(box1.clientHeight);// box1.clientHeight = 300;/** offsetWidth* offsetHeight* - 获取元素的整个的宽度和高度，包括内容区、内边距和边框*/// alert(box1.offsetWidth);/** offsetParent* - 可以用来获取当前元素的定位父元素* - 会获取到离当前元素最近的开启了定位的祖先元素* 如果所有的祖先元素都没有开启定位，则返回body*/// var op = box1.offsetParent;// alert(op.id);/** offsetLeft* - 当前元素相对于其定位父元素的水平偏移量* offsetTop* - 当前元素相对于其定位父元素的垂直偏移量*/// alert(box1.offsetLeft);/** scrollWidth* scrollHeight* - 可以获取元素整个滚动区域的宽度和高度*/// 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属性
用户阅读协议，且滚动条滚到底，才可以进行注册——代码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* - 该事件会在元素的滚动条滚动时触发*///获取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">亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。亲爱的用户，请仔细阅读以下协议！如果你不仔细阅读，你就别注册。</p><!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 --><input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守！<input type="submit" value="注册" disabled="disabled" /></body></html>
P111111.尚硅谷_JS基础_事件对象18:02
移动鼠标，以px显示距离
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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* - 该事件将会在鼠标在元素中移动时被触发* * 事件对象* - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,* 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向。*/areaDiv.onmousemove = function(event) {/** 在IE8中，响应函数被触发时，浏览器不会传递事件对象，* 在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>
P112112.尚硅谷_JS基础_div跟随鼠标移动23:33
事件绑定给box1，只有鼠标在box1中 才会触发。
<!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";};};</script></head><body style="height: 1000px;width: 2000px;"><div id="box1"></div></body></html>
P113113.尚硅谷_JS基础_事件的冒泡15:52
事件的冒泡（Bubble）
事件的冒泡（Bubble）
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的。如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
事件冒泡-案例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跟随鼠标移动 事件冒泡】
