学习地址：

谷粒学院——尚硅谷

哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)

JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】

目录

P114 114.尚硅谷_JS基础_事件的委派 19:49

IE 属性 / 标准 Event 属性

事件的委派——案例

P115 115.尚硅谷_JS基础_事件的绑定 18:06

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

addEventListener()：为元素绑定响应函数

attachEvent()：绑定事件【IE8】

定义一个函数，用来为指定元素绑定响应函数

P116 116.尚硅谷_JS基础_完成bind函数 08:58

P117 117.尚硅谷_JS基础_事件的传播 14:46

P118 118.尚硅谷_JS基础_拖拽（一） 19:15

P119 119.尚硅谷_JS基础_拖拽（二） 09:42

P120 120.尚硅谷_JS基础_拖拽（三） 24:27

测试IE8

拖拽2 代码

拖拽3 代码——拖拽图片

P121 121.尚硅谷_JS基础_滚轮的事件 22:27

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

event.wheelDelta：获取鼠标滚轮滚动的方向

在火狐中使用event.detail来获取滚动的方向

处理“滚动条”

滚轮事件-代码

P122 122.尚硅谷_JS基础_键盘事件 24:02

事件句柄（Event Handlers）

鼠标 / 键盘属性

IE 属性

通过keyCode来获取按键的编码

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

使文本框中不能输入数字

P123 123.尚硅谷_JS基础_键盘移动div 08:59

使div可以根据不同的方向键向不同的方向移动

P114 114.尚硅谷_JS基础_事件的委派 19:49

IE 属性 / 标准 Event 属性

事件的委派——案例

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素

事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">window.onload = function() {var u1 = document.getElementById("u1");//点击按钮以后添加超链接var btn01 = document.getElementById("btn01");btn01.onclick = function() {var li = document.createElement("li"); // 创建一个lili.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";u1.appendChild(li); // 将li添加到ul中};/** 为每一个超链接都绑定一个单击响应函数* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，*     而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定*/var allA = document.getElementsByTagName("a"); // 获取所有的a/* for (var i = 0; i < allA.length; i++) { // 遍历allA[i].onclick = function() {alert("我是a的单击响应函数！！！");};} *//** 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的* 我们可以尝试将其绑定给元素的共同的祖先元素* * 事件的委派*     - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素*      从而通过祖先元素的响应函数来处理事件。*  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能*/u1.onclick = function(event) { // 为ul绑定一个单击响应函数event = event || window.event;/** target*    - event中的target表示的触发事件的对象*/// alert(event.target);//如果触发事件的对象是我们期望的元素，则执行否则不执行if (event.target.className == "link") {alert("我是ul的单击响应函数");}};};</script></head><body><button id="btn01">添加超链接</button><ul id="u1" style="background-color: #bfa;"><li><p>我是p元素</p></li><li><a href="javascript:;" class="link">超链接一</a></li><li><a href="javascript:;" class="link">超链接二</a></li><li><a href="javascript:;" class="link">超链接三</a></li></ul></body>
</html>

P115 115.尚硅谷_JS基础_事件的绑定 18:06

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

addEventListener()：为元素绑定响应函数

addEventListener()：通过这个方法也可以为元素绑定响应函数。
参数：

事件的字符串，click不要on。

回调函数，当事件触发时该函数会被调用。

是否在捕获阶段触发事件，需要一个布尔值，一般都传false。

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，这个方法不支持IE8及以下的浏览器。

attachEvent()：绑定事件【IE8】

attachEvent()：在IE8中可以使用attachEvent()来绑定事件
参数：

事件的字符串，onclick要on。

回调函数。

这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

定义一个函数，用来为指定元素绑定响应函数

addEventListener()中的this，是绑定事件的对象；attachEvent()中的this，是window。需要统一两个方法this。

P116 116.尚硅谷_JS基础_完成bind函数 08:58

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function() {// 点击按钮以后弹出一个内容var btn01 = document.getElementById("btn01"); // 获取按钮对象/** 使用 对象.事件 = 函数 的形式绑定响应函数，*   它只能同时为一个元素的一个事件绑定一个响应函数，*    不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的*//* btn01.onclick = function() { // 为btn01绑定第1个单击响应函数alert(1);};btn01.onclick = function() { // 为btn01绑定第2个响应函数alert(2);}; *//** addEventListener()*  - 通过这个方法也可以为元素绑定响应函数*  - 参数：*        1.事件的字符串，click不要on*      2.回调函数，当事件触发时 该函数会被调用*       3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false* * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，*  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行* * 这个方法不支持IE8及以下的浏览器*//* btn01.addEventListener("click", function() {alert(1);}, false);btn01.addEventListener("click", function() {alert(2);}, false);btn01.addEventListener("click", function() {alert(3);}, false); *//** attachEvent()*    - 在IE8中可以使用attachEvent()来绑定事件*  - 参数：*       1.事件的字符串，要on*        2.回调函数* *  - 这个方法也可以同时为一个事件绑定多个处理函数，*        不同的是它是后绑定先执行，执行顺序和addEventListener()相反*//* btn01.attachEvent("onclick", function() {alert(1);});btn01.attachEvent("onclick", function() {alert(2);});btn01.attachEvent("onclick", function() {alert(3);}); *//* btn01.addEventListener("click", function() {alert(this);}, false);btn01.attachEvent("onclick", function() {alert(this);}); */bind(btn01, "click", function() {alert(this);});};//定义一个函数，用来为指定元素绑定响应函数/** addEventListener()中的this，是绑定事件的对象* attachEvent()中的this，是window*  需要统一两个方法this*//** 参数：*     obj 要绑定事件的对象*   eventStr 事件的字符串(不要on)*  callback 回调函数*/function bind(obj, eventStr, callback) {if (obj.addEventListener) {//大部分浏览器兼容的方式obj.addEventListener(eventStr, callback, false);} else {/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on" + eventStr, function() {//在匿名函数中调用回调函数callback.call(obj);});}}</script></head><body><button id="btn01">点我一下</button></body>
</html>

P117 117.尚硅谷_JS基础_事件的传播 14:46

事件的传播

关于事件的传播网景公司和微软公司有不同的理解

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。

W3C综合了两个公司的方案，将事件传播分成了三个阶段：

捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。

目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。

冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false，IE8及以下的浏览器中没有捕获阶段。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 300px;height: 300px;background-color: yellowgreen;}#box2 {width: 200px;height: 200px;background-color: yellow;}#box3 {width: 150px;height: 150px;background-color: skyblue;}</style><script type="text/javascript">window.onload = function() {// 分别为三个div绑定单击响应函数var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var box3 = document.getElementById("box3");bind(box1, "click", function() {alert("我是box1的响应函数")});bind(box2, "click", function() {alert("我是box2的响应函数")});bind(box3, "click", function() {alert("我是box3的响应函数")});};function bind(obj, eventStr, callback) {if (obj.addEventListener) {//大部分浏览器兼容的方式obj.addEventListener(eventStr, callback, true);} else {/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on" + eventStr, function() {//在匿名函数中调用回调函数callback.call(obj);});}}</script></head><body><div id="box1"><div id="box2"><div id="box3"></div></div></div></body>
</html>

P118 118.尚硅谷_JS基础_拖拽（一） 19:15

拖拽的流程：

当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown。

当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove。

当鼠标松开时，被拖拽元素固定在当前位置：onmouseup。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() {  // 拖拽box1元素  //获取box1var box1 = document.getElementById("box1");//为box1绑定一个鼠标按下事件//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownbox1.onmousedown = function(event) {event = event || window.event;//为document绑定一个onmousemove事件document.onmousemove = function(event) {event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX;var top = event.clientY;//修改box1的位置box1.style.left = left + "px";box1.style.top = top + "px";};//为document绑定一个鼠标松开事件document.onmouseup = function() {//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;};};};</script></head><body><div id="box1"></div><div id="box2"></div></body>
</html>

P119 119.尚硅谷_JS基础_拖拽（二） 09:42

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() { // 拖拽box1元素  //获取box1var box1 = document.getElementById("box1");//为box1绑定一个鼠标按下事件//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownbox1.onmousedown = function(event) {event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event) {event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置box1.style.left = left + "px";box1.style.top = top + "px";};//为document绑定一个鼠标松开事件document.onmouseup = function() {//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;};};};</script></head><body><div id="box1"></div><div id="box2"></div></body>
</html>

P120 120.尚硅谷_JS基础_拖拽（三） 24:27

测试IE8

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function() {//分别为两个按钮绑定单击响应函数var btn01 = document.getElementById("btn01");var btn02 = document.getElementById("btn02");btn01.onclick = function() {alert(1);};btn02.onclick = function() {alert(2);};//设置btn01对鼠标按下相关的事件进行捕获//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上btn01.setCapture();};</script></head><body><button id="btn01">按钮01</button><button id="btn02">按钮02</button></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;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() {/** 拖拽box1元素*  - 拖拽的流程*      1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown*       2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove*        3.当鼠标松开时，被拖拽元素固定在当前位置    onmouseup*///获取box1var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");//为box1绑定一个鼠标按下事件//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownbox1.onmousedown = function(event) {//设置box1捕获所有鼠标按下的事件/** setCapture()*   - 只有IE支持，但是在火狐中调用时不会报错，*      而如果使用chrome调用，会报错*//* if (box1.setCapture) {box1.setCapture();} */box1.setCapture && box1.setCapture();event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event) {event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置box1.style.left = left + "px";box1.style.top = top + "px";};//为document绑定一个鼠标松开事件document.onmouseup = function() {//当鼠标松开时，被拖拽元素固定在当前位置    onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//当鼠标松开时，取消对事件的捕获box1.releaseCapture && box1.releaseCapture();};/** 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，*   此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，*  如果不希望发生这个行为，则可以通过return false来取消默认行为* * 但是这招对IE8不起作用*/return false;};};</script></head><body>我是一段文字<div id="box1"></div><div id="box2"></div></body>
</html>

拖拽3 代码——拖拽图片

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() {/** 拖拽box1元素*  - 拖拽的流程*      1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown*       2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove*        3.当鼠标松开时，被拖拽元素固定在当前位置    onmouseup*///获取box1var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var img1 = document.getElementById("img1");drag(box1); // 开启box1的拖拽drag(box2); // 开启box2的拖拽drag(img1);};/** 提取一个专门用来设置拖拽的函数* 参数：开启拖拽的元素*/function drag(obj) {//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedownobj.onmousedown = function(event) {//设置box1捕获所有鼠标按下的事件/** setCapture()*  - 只有IE支持，但是在火狐中调用时不会报错，*      而如果使用chrome调用，会报错*//*if(box1.setCapture){box1.setCapture();}*/obj.setCapture && obj.setCapture();event = event || window.event;//div的偏移量 鼠标.clentX - 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;//为document绑定一个onmousemove事件document.onmousemove = function(event) {event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置obj.style.left = left + "px";obj.style.top = top + "px";};//为document绑定一个鼠标松开事件document.onmouseup = function() {//当鼠标松开时，被拖拽元素固定在当前位置  onmouseup//取消document的onmousemove事件document.onmousemove = null;//取消document的onmouseup事件document.onmouseup = null;//当鼠标松开时，取消对事件的捕获obj.releaseCapture && obj.releaseCapture();};/** 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，*     此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，*  如果不希望发生这个行为，则可以通过return false来取消默认行为* * 但是这招对IE8不起作用*/return false;};}</script></head><body>我是一段文字！<div id="box1"></div><div id="box2"></div><img src="img/an.jpg" id="img1" style="position: absolute;" /></body>
</html>

P121 121.尚硅谷_JS基础_滚轮的事件 22:27

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

event.wheelDelta：获取鼠标滚轮滚动的方向

在火狐中使用event.detail来获取滚动的方向

wheelDelta 这个值，我们不看大小、只看正负。

处理“滚动条”

滚轮事件-代码

<!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() {//获取id为box1的divvar box1 = document.getElementById("box1");//为box1绑定一个鼠标滚轮滚动的事件/** onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，*  但是火狐不支持该属性* * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件*  注意该事件需要通过addEventListener()函数来绑定*/box1.onmousewheel = function(event) {event = event || window.event;//event.wheelDelta 可以获取鼠标滚轮滚动的方向//向上滚 120   向下滚 -120//wheelDelta这个值我们不看大小，只看正负//alert(event.wheelDelta);//wheelDelta这个属性火狐中不支持//在火狐中使用event.detail来获取滚动的方向//向上滚 -3  向下滚 3//alert(event.detail);/** 当鼠标滚轮向下滚动时，box1变长*  当滚轮向上滚动时，box1变短*///判断鼠标滚轮滚动的方向if (event.wheelDelta > 0 || event.detail < 0) {//向上滚，box1变短box1.style.height = box1.clientHeight - 10 + "px";} else {//向下滚，box1变长box1.style.height = box1.clientHeight + 10 + "px";}/** 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false* 需要使用event来取消默认行为event.preventDefault();* 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错*/event.preventDefault && event.preventDefault();/** 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为*/return false;};//为火狐绑定滚轮事件bind(box1, "DOMMouseScroll", box1.onmousewheel);};function bind(obj, eventStr, callback) {if (obj.addEventListener) {//大部分浏览器兼容的方式obj.addEventListener(eventStr, callback, false);} else {/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on" + eventStr, function() {//在匿名函数中调用回调函数callback.call(obj);});}}</script></head><body style="height: 2000px;"><div id="box1"></div></body>
</html>

P122 122.尚硅谷_JS基础_键盘事件 24:02

事件句柄（Event Handlers）

鼠标 / 键盘属性

IE 属性

键盘事件

onkeydown

按键被按下。

对于onkeydown来说：如果一直按着某个按键不松手，则事件会一直触发。

当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。

onkeyup

按键被松开。

键盘事件，一般都会绑定给一些可以获取到焦点的对象或者是document。

通过keyCode来获取按键的编码

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

使文本框中不能输入数字

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function() {document.onkeydown = function(event) {event = event || window.event;/** 可以通过keyCode来获取按键的编码*   通过它可以判断哪个按键被按下* 除了keyCode，事件对象中还提供了几个属性*     altKey*     ctrlKey*    shiftKey*       - 这个三个用来判断alt ctrl 和 shift是否被按下*            如果按下则返回true，否则返回false*///console.log(event.keyCode);//判断一个y是否被按下//判断y和ctrl是否同时被按下if (event.keyCode === 89 && event.ctrlKey === 17) {console.log("ctrl和y都被按下了");}};/* document.onkeyup = function() {console.log("按键松开了");}; */var input = document.getElementsByTagName("input")[0]; // 获取inputinput.onkeydown = function(event) {event = event || window.event;//console.log(event.keyCode);//数字 48 - 57//使文本框中不能输入数字if (event.keyCode >= 48 && event.keyCode <= 57) {//在文本框中输入内容，属于onkeydown的默认行为//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中return false;}};};</script></head><body><input type="text" /></body>
</html>

P123 123.尚硅谷_JS基础_键盘移动div 08:59

使div可以根据不同的方向键向不同的方向移动

按方向键的同时，按“Ctrl”键会加速。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}</style><script type="text/javascript">//使div可以根据不同的方向键向不同的方向移动/** 按左键，div向左移* 按右键，div向右移...*/window.onload = function() {//为document绑定一个按键按下的事件document.onkeydown = function(event) {event = event || window.event;//定义一个变量，来表示移动的速度var speed = 10;//当用户按了ctrl以后，速度加快if (event.ctrlKey) {speed = 50;}/** 37 左* 38 上* 39 右* 40 下*/switch (event.keyCode) {case 37://alert("向左"); left值减小box1.style.left = box1.offsetLeft - speed + "px";break;case 39://alert("向右");box1.style.left = box1.offsetLeft + speed + "px";break;case 38://alert("向上");box1.style.top = box1.offsetTop - speed + "px";break;case 40://alert("向下");box1.style.top = box1.offsetTop + speed + "px";break;}};};</script></head><body><div id="box1"></div></body>
</html>

理论上，明天能看完~ 冲冲冲~

JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】相关推荐

JavaScript基础 -- DOM
JavaScript基础 -- DOM DOM 1.什么是DOM? 2.事件 3.文档的加载 3.DOM查询 4.DOM查询的其他方法 5.DOM增删改 6.使用DOM操作CSS 7.读取元素的样式 ...
JavaScript 基础笔记，不会翻一番，值得收藏
文章目录 JavaScript 基础 1.`javascript` 简介 2.第一个`javascript`程序 3.`js`代码编写的位置 4.`js`基本语法 5.字面量和变量 6.标识符 7.数 ...
js--鼠标点击移动松开事件、滚轮事件、键盘事件
目录 1.推拽 2.滚轮事件 3.键盘事件 1.推拽 <!DOCTYPE html> <html><head><meta charset="UTF- ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
JavaScript绑定键盘事件的多种写法
使用JavaScript来绑定键盘事件时,有多种写法,而他们的实现效果实际上是等价的,下面一一来列举. 方式一: function keyboard() {document.onkeydown = f ...
一步步学习javascript基础篇（8）：细说事件
终于学到事件了,不知道为何听到"事件"就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有 ...
原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...

JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】

P114 114.尚硅谷_JS基础_事件的委派 19:49

IE 属性 / 标准 Event 属性

事件的委派——案例

P115 115.尚硅谷_JS基础_事件的绑定 18:06

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

addEventListener()：为元素绑定响应函数

attachEvent()：绑定事件【IE8】

定义一个函数，用来为指定元素绑定响应函数

P116 116.尚硅谷_JS基础_完成bind函数 08:58

P117 117.尚硅谷_JS基础_事件的传播 14:46

P118 118.尚硅谷_JS基础_拖拽（一） 19:15

P119 119.尚硅谷_JS基础_拖拽（二） 09:42

P120 120.尚硅谷_JS基础_拖拽（三） 24:27

测试IE8

拖拽2 代码

拖拽3 代码——拖拽图片

P121 121.尚硅谷_JS基础_滚轮的事件 22:27

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

event.wheelDelta：获取鼠标滚轮滚动的方向

在火狐中使用event.detail来获取滚动的方向

处理“滚动条”

滚轮事件-代码

P122 122.尚硅谷_JS基础_键盘事件 24:02

事件句柄（Event Handlers）

鼠标 / 键盘属性

IE 属性

通过keyCode来获取按键的编码

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

使文本框中不能输入数字

P123 123.尚硅谷_JS基础_键盘移动div 08:59

使div可以根据不同的方向键向不同的方向移动

JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】相关推荐

最新文章

热门文章

JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】

P114 114.尚硅谷_JS基础_事件的委派 19:49

IE 属性 / 标准 Event 属性

事件的委派——案例

P115 115.尚硅谷_JS基础_事件的绑定 18:06

“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个

addEventListener()：为元素绑定响应函数

attachEvent()：绑定事件【IE8】

定义一个函数，用来为指定元素绑定响应函数

P116 116.尚硅谷_JS基础_完成bind函数 08:58

P117 117.尚硅谷_JS基础_事件的传播 14:46

P118 118.尚硅谷_JS基础_拖拽（一） 19:15

P119 119.尚硅谷_JS基础_拖拽（二） 09:42

P120 120.尚硅谷_JS基础_拖拽（三） 24:27

测试IE8

拖拽2 代码

拖拽3 代码——拖拽图片

P121 121.尚硅谷_JS基础_滚轮的事件 22:27

onmousewheel()：鼠标滚轮滚动的事件，会在滚轮滚动时触发

event.wheelDelta：获取鼠标滚轮滚动的方向

在火狐中使用event.detail来获取滚动的方向

处理“滚动条”

滚轮事件-代码

P122 122.尚硅谷_JS基础_键盘事件 24:02

事件句柄（Event Handlers）

鼠标 / 键盘 属性

IE 属性

通过keyCode来获取按键的编码

在onkeydown中取消默认行为：输入的内容，不会出现在文本框中

使文本框中不能输入数字

P123 123.尚硅谷_JS基础_键盘移动div 08:59

使div可以根据不同的方向键向不同的方向移动

JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】相关推荐

最新文章

热门文章

鼠标 / 键盘属性