阅读量:0
文章目录
111 事件对象
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <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中来显示鼠标的坐标 */ // 获取两个div var 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; /* clientX可以获取鼠标指针的水平坐标 clientY可以获取鼠标指针的垂直坐标 */ var x = event.clientX; var y = event.clientY; // 在showMsg中显示鼠标的坐标 showMsg.innerHTML = "x = " + x + ",y = " + y; }; }; </script> </head> <body> <div id="areaDiv"></div> <div id="showMsg"></div> </body> </html> 112 div跟随鼠标移动
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; <!--开启绝对定位才能使用偏移量--> position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ /* 使div可以跟随鼠标移动 */ // 获取box1 var box1 = document.getElementById("box1"); // 绑定鼠标移动事件 document.onmousemove = function(event){ // 浏览器兼容问题 event = event || window.event // 获取滚动条滚动的距离 /* chrome认为浏览器滚动条是body的，可以通过body.scrollTop来获取 火狐等浏览器认为浏览器的滚动条是html的 */ //var st = document.body.scrollTop; //var st = document.documentElement.scrollTop; var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft; // 获取到鼠标的坐标 /* clientX和clientY 用于获取鼠标在当前可见窗口的坐标 div的偏移量，是相对于整个页面的 pageX和pageY可以获取鼠标相对于当前页面的坐标 但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用 */ var left = event.clientX; var top = event.clientY; //var left = event.pageX; //var top = event.pageY; // 设置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="height: 500px; width: 500px; background-color: #bfa;"></div> <div id="box1"></div> </body> </html> 113 冒泡
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #box1 { width: 200px; height: 200px; background-color: yellowgreen; } #s1 { background-color: yellow; } </style> <script type="text/javascript"> window.onload = function(){ /* 事件的冒泡（Bubble） 所谓的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。 在开发中大部分情况都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡 */ // 为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绑定一个单击响应函数 body.onclick = function(){ alert("我是body的单击响应函数"); }; }; </script> </head> <body> <div id="box1"> 我是box1 <span>我是span</span> </div> </body> </html> 114 事件的委派
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function(){ var ul = document.getElementById("ul"); // 点击按钮以后添加超链接 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ var li = document.createElement("li"); li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"; ul.appendChild(li); }; /* 为每一个超链接都绑定一个单击响应函数 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 */ // 获取所有的a var allA = document.getElementsByTagName("a"); for(var i = 0; i < allA.length; i++){ allA[i].onclick = function(){ alert("我是a的单击响应函数"); }; } /* 我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的， 我们可以尝试将其绑定给元素共同的祖先元素 事件的委派：将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时， 会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件， 时间委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 */ // 为ul绑定一个单击响应函数 ul.onclick = function(event){ 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> <li> <p>我是p元素</p> </li> </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> 115 事件的绑定
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function(){ /* 点击按钮以后弹出一个内容 */ // 获取按钮对象 var btn01 = document.getElementById("btn01"); /* 使用对象.事件 = 函数的形式绑定响应函数， 他只能同时为一个元素的一个事件绑定一个响应函数， 不能绑定多个，如果绑定了多个，则后面会覆盖掉前面的 */ btn01.onclick = function(){ alert(1); }; btn01.onclick = function(){ alert(2); }; /* addEventListener()：通过这个方法也可以为元素绑定响应函数 参数：1. 事件的字符串，不要on 2. 回调函数，当事件触发时，该函数会被调用 3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 这个方法不支持IE8及以下浏览器 */ btn01.addEventListener("click", function(){ alert(this); // btn01 alert(1); }, false); btn01.addEventListener("click", function(){ alert(2); }, false); /* attachEvent()：在IE8中可以使用attachEvent()来绑定事件 参数：1. 事件的字符串，要on 2. 回调函数 这个方法也可以同时为一个事件绑定多个处理函数， 不同的是它是后绑定先执行，执行顺序与.addEventListener()相反 */ btn01.attachEvent("onclick", function(){ alert(this); // window alert(1); }); btn01.attachEvent("onclick", function(){ alert(2); }); btn01.attachEvent("onclick", function(){ alert(3); }); // 定义一个函数，用来为指定元素绑定响应函数 /* addEventListener()中的this是绑定事件的对象 attachEvent()中的this是window 需要统一两个方法this */ /* 参数：1. obj：要绑定事件的对象 2. eventStr：事件的字符串（不要on） 3. callback：回调函数 */ function bind(obj, eventStr, callback){ if(obj.addEventListener){ // 大部分浏览器兼容方式 obj.addEventListener(eventStr, callback, false); }else{ /* this是谁由调用方式决定 callback.call(obj) */ // IE8及以下 //obj.attachEvent("on" + eventStr, callback); obj.attachEvent("on" + eventStr, function(){ // 在匿名函数调用回调函数 callback.call(obj); // button }); } } }; </script> </head> <body> <button id="btn01">点我一下</button> </body> </html> 