<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>111-120章总结</title> </head> <body> <pre> 111. 事件对象 - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数, 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。 </pre> <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> <div id="areaDiv"></div> <div id="showMsg"></div> <script type="text/javascript"> console.log("第111"); //当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标 var areaDiv = document.getElementById("areaDiv") var showMsg = document.getElementById("showMsg") areaDiv.onmousemove = function(event){ event = event || window.event var x = event.clientX var y = event.clientY var result = "X coords: " + x + ", Y coords: " + y showMsg.innerHTML = result } </script> <pre> 112. div跟随鼠标移动 clientX和clientY 用于获取鼠标在当前的可见窗口的坐标 div的偏移量，是相对于整个页面的 pageX和pageY可以获取鼠标相对于当前页面的坐标 但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用 </pre> <style type="text/css"> #box1{ /*开启box1的绝对定位*/ position: absolute; width: 100px; height: 100px; background-color: red; } #box2{ width: 100px; height: 100px; background-color: green; } </style> <div id="yibox" style=" 2000px;height: 200px;position: relative;"> <div id="box1"></div> <div id="box2"></div> </div> <script type="text/javascript"> console.log("第112"); var yibox = document.getElementById("yibox") var box1 = document.getElementById("box1") var box2 = document.getElementById("box2") var boxWidth = box1.clientWidth / 2 var boxHeight = box1.clientHeight / 2 var yiboxHeight = yibox.offsetTop yibox.onmousemove = function(event){ event = event || window.event var left = event.clientX var top = event.clientY // 获取滚动条滚动的距离 // chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取 // 火狐等浏览器认为浏览器的滚动条是html的， var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft; // 鼠标光标位置在正中间 //box1.style.left = left + sl - boxWidth + "px" //box1.style.top = top + st - boxHeight - yiboxHeight + "px" box1.style.left = left + sl + "px" box1.style.top = top + st - yiboxHeight + "px" event.cancelBubble = true; } box2.onmousemove = function(event){ event = event || window.event; event.cancelBubble = true; }; </script> <pre> 113. 事件的冒泡 事件的冒泡（Bubble） - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 </pre> <style type="text/css"> #mbox1{ width: 200px; height: 200px; background-color: yellowgreen; } #ms1{ background-color: yellow; } </style> <div id="mbox1">我是box1 <span id="ms1">我是span</span> </div> <script type="text/javascript"> console.log("第113"); var mbox1 = document.getElementById("mbox1") var ms1 = document.getElementById("ms1") // 为ms1绑定一个单击响应函数 ms1.onclick = function(event){ event = event || window.event alert("我是span的单击响应函数") //可以将事件对象的cancelBubble设置为true，即可取消冒泡 event.cancelBubble = true } // 为mbox1绑定一个单击响应函数 mbox1.onclick = function(event){ event = event || window.event alert("我是div的单击响应函数") event.cancelBubble = true } //为body绑定一个单击响应函数 /*document.body.onclick = function(){ alert("我是body的单击响应函数"); };*/ </script> <pre> 114. 事件的委托 - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。 - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 </pre> <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> <script type="text/javascript"> console.log("第114"); var btn01 = document.getElementById("btn01") var u1 = document.getElementById("u1") var n=1 btn01.onclick = function(event){ event = event || window.event var newli = document.createElement("li") newli.innerHTML = "<a href='javascript:;' class='link'>新建的超链接" + n + "</a>" u1.appendChild(newli) n++ event.cancelBubble = true } /* * 为每一个超链接都绑定一个单击响应函数 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， * 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 */ var allA = document.getElementsByTagName("a") /*for( var i=0,l=allA.length; i<l; i++){ allA[i].onclick = function(){ alert(this.innerHTML) } }*/ // 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的 // 我们可以尝试将其绑定给元素的共同的祖先元素 u1.onclick = function(event){ event = event || window.event // event中的target表示的触发事件的对象 //alert(event.target) //如果触发事件的对象是我们期望的元素，则执行否则不执行 if(event.target.className == 'link'){ alert(event.target.innerHTML) } } </script> <pre> 115. 事件的绑定 使用 对象.事件 = 函数 的形式绑定响应函数， 它只能同时为一个元素的一个事件绑定一个响应函数， 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。 addEventListener() - 通过这个方法也可以为元素绑定响应函数 - 参数： 1.事件的字符串，不要on 2.回调函数，当事件触发时该函数会被调用 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 这个方法不支持IE8及以下的浏览器。 attachEvent() - 在IE8中可以使用attachEvent()来绑定事件 - 参数： 1.事件的字符串，要on 2.回调函数 - 这个方法也可以同时为一个事件绑定多个处理函数， 不同的是它是后绑定先执行，执行顺序和addEventListener()相反 </pre> <div class=""> <button id="bdBtn">绑定按钮</button> </div> <script type="text/javascript"> console.log("第115"); var bdBtn = document.getElementById("bdBtn") /*bdBtn.onclick = function(){ alert(1) } bdBtn.onclick = function(){ alert(2) }*/ bdBtn.addEventListener("click",function(){ alert(1) },false) bdBtn.addEventListener("click",function(){ alert(2) },false) /*bdBtn.attachEvent("onclick",function(){ alert(this) }) bdBtn.attachEvent("onclick",function(){ alert(this) })*/ </script> <pre> 116. 完成bind函数 </pre> <div class=""> <button id="bdBtn2">bind按钮</button> </div> <script type="text/javascript"> console.log("第116"); //定义一个函数，用来为指定元素绑定响应函数 /* * 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) */ obj.attachEvent( "on"+eventStr , function(){ //在匿名函数中调用回调函数 callback.call(obj) }) } } var bdBtn2 = document.getElementById("bdBtn2") bind(bdBtn2,"click",function(){ alert(1) }) bind(bdBtn2,"click",function(){ alert(2) }) bind(bdBtn2,"click",function(){ alert(this) }) </script> <pre> 117. 事件的传播 - 关于事件的传播网景公司和微软公司有不同的理解 - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， 然后在向内传播给后代元素 - W3C综合了两个公司的方案，将事件传播分成了三个阶段 1.捕获阶段 - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 2.目标阶段 - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 3.冒泡阶段 - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false - IE8及以下的浏览器中没有捕获阶段 </pre> <style type="text/css"> #cbbox1{ width: 300px; height: 300px; background-color: yellowgreen; } #cbbox2{ width: 200px; height: 200px; background-color: yellow; } #cbbox3{ width: 150px; height: 150px; background-color: skyblue; } </style> <div id="cbbox1">cbbox1 <div id="cbbox2">cbbox2 <div id="cbbox3">cbbox3</div> </div> </div> <script type="text/javascript"> console.log("第117"); var cbbox1 = document.getElementById("cbbox1") var cbbox2 = document.getElementById("cbbox2") var cbbox3 = document.getElementById("cbbox3") function bind(obj,eventStr,callback){ if( obj.addEventListener ){ // 大部分浏览器兼容的方式 obj.addEventListener( eventStr,callback,true) // 捕获阶段 }else{ /* * this是谁由调用方式决定 * callback.call(obj) */ obj.attachEvent( "on"+eventStr , function(){ //在匿名函数中调用回调函数 callback.call(obj) }) } } bind(cbbox1,"click",function(){ alert("我是cbbox1的响应函数") }) bind(cbbox2,"click",function(){ alert("我是cbbox2的响应函数") }) bind(cbbox3,"click",function(){ alert("我是cbbox3的响应函数") }) </script> <pre> 118. 拖拽1 - 拖拽的流程 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup </pre> <style type="text/css"> #tuozhuai_box { position: relative; width: 1000px; height: 500px; } #tzbox1{ width: 100px; height: 100px; background-color: red; position: absolute; } #tzbox2{ width: 100px; height: 100px; background-color: yellow; position: absolute; left: 200px; top: 200px; } </style> <div id="tuozhuai_box"> <div id="tzbox1"></div> <div id="tzbox2"></div> </div> <script type="text/javascript"> console.log("第118"); var tzBox = document.getElementById("tuozhuai_box") var tzbox1 = document.getElementById("tzbox1") tzbox1.onmousedown = function(event){ event = event || window.event var ol = event.clientX - tzbox1.offsetLeft var ot = event.clientY - tzbox1.offsetTop tzBox.onmousemove = function(event){ event = event || window.event var left = event.clientX - ol var top = event.clientY - ot tzbox1.style.left = left + "px" tzbox1.style.top = top + "px" } tzBox.onmouseup = function(){ tzBox.onmousemove = null tzBox.onmouseup = null } } </script> <pre> 119. 拖拽2 </pre> <style type="text/css"> #tuozhuai_box2 { position: relative; width: 1000px; height: 500px; } #tzbox21{ width: 100px; height: 100px; background-color: red; position: absolute; } #tzbox22{ width: 100px; height: 100px; background-color: yellow; position: absolute; left: 200px; top: 200px; } </style> <div id="tuozhuai_box2"> <div id="tzbox21"></div> <div id="tzbox22"></div> </div> <script type="text/javascript"> console.log("第119"); var tzBox2 = document.getElementById("tuozhuai_box2") var tzbox21 = document.getElementById("tzbox21") tzbox21.onmousedown = function(event){ //设置tzbox21捕获所有鼠标按下的事件 /* * setCapture() * - 只有IE支持，但是在火狐中调用时不会报错， * 而如果使用chrome调用，会报错 */ /*if(tzbox21.setCapture){ tzbox21.setCapture(); }*/ tzbox21.setCapture && tzbox21.setCapture(); event = event || window.event var ol = event.clientX - tzbox21.offsetLeft var ot = event.clientY - tzbox21.offsetTop tzBox2.onmousemove = function(event){ event = event || window.event var left = event.clientX - ol var top = event.clientY - ot tzbox21.style.left = left + "px" tzbox21.style.top = top + "px" } tzBox2.onmouseup = function(){ tzBox2.onmousemove = null tzBox2.onmouseup = null tzbox21.releaseCapture && tzbox21.releaseCapture(); } /* * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容， * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， * 如果不希望发生这个行为，则可以通过return false来取消默认行为 * 但是这招对IE8不起作用 */ return false } </script> <pre> 120. 拖拽3 完成drag函数 </pre> <script type="text/javascript"> console.log("第120"); function drag(obj){ obj.onmousedown = function(event){ obj.setCapture && obj.setCapture(); event = event || window.event var ol = event.clientX - obj.offsetLeft var ot = event.clientY - obj.offsetTop document.onmousemove = function(event){ event = event || window.event var left = event.clientX - ol var top = event.clientY - ot obj.style.left = left + "px" obj.style.top = top + "px" } document.onmouseup = function(){ document.onmousemove = null document.onmouseup = null obj.releaseCapture && obj.releaseCapture(); } return false } } var tzbox22 = document.getElementById("tzbox22") drag(tzbox22) </script> </body> </html>
所有基础课程链接：
1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）
5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）
9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）
13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）
另外，欢迎关注我的新浪微博