事件对象
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #areaDiv { width: 300px; height: 100px; border: 1px solid black; margin-bottom: 10px; } #showMsg { width: 300px; height: 30px; border: 1px solid black; } </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) { // alert(event); /* 在IE8中，响应函数被触发时，浏览器不会传递事件对象， 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的 */ // if (!event) { // event = window.event; // } //解决事件对象兼容性问题 event = event || window.event; /* clientX可以获取鼠标指针的水平坐标 clientY可以获取鼠标指针的垂直坐标 */ var x = window.event.clientX; var y = window.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>
div随鼠标事件移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1 { width: 100px; height: 100px; background-color: red; /* 开启box1的绝对定位 */ 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; // 设置div的偏移量 box1.style.left = left + sl + "px"; box1.style.top = top + st + "px"; } } </script> </head> <body style="height: 1000px; 2000px;"> <div id="box1"></div> </body> </html>
事件的冒泡
<!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 () { /* 事件的冒泡(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绑定一个单击响应函数 document.body.onclick = function () { alert("我是body的单击响应函数"); }; } </script> </head> <body> <div id="box1"> 我是box1 <span id="s1">我是一个span</span> </div> </body> </html>
事件的委派
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <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 () { //创建一个li var li = document.createElement("li"); li.innerHTML = "<a href='javascrigt:;' class= 'link' >新建的超链接</a>"; //将li添加到ul中 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; // alert("我是ul的单击响应函数"); /* target event中的target表示触发事件的对象 */ // 如果触发的事件是我们期望的元素就执行，否则不执行 if (event.target.className == "link") { alert("我是ul的单击响应函数"); } } } </script> </head> <body> <button id="btn01">添加超链接</button> <ul id="ul" style="background-color: #bfa;"> <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>
事件的绑定
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function () { /* 点击按钮以后弹出一个内容 */ //获取按钮对象 var btn01 = document.getElementById("btn01"); /* 使用对象.事件 = 函数 的形式绑定响应函数 它只能同时为一个元素的一个事件绑定一个响应元素 不能绑定多个，如果绑定了多个，则后边会覆盖掉前面的 */ // //为btn01绑定一个单击响应函数 // btn01.onclick = function () { // alert(1); // }; // //为btn01绑定第二个响应函数 // btn01.onclick = function () { // alert(2); // }; /* addEventListener() 通过这个方法也可以为元素绑定响应函数 参数: 1.事件的字符串，不要on 2.回调函数，当事件触发时该函数会被调用 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 这个方法不支持IE8及以下的浏览器 */ // btn01.addEventListener("click", function () { // alert(1); // }, false); // btn01.addEventListener("click", function () { // alert(2); // }, false); /* attachEvent() 在IE8中可以使用attachEvent()来绑定事件 参数: 1.事件的字符串，要on 2.回调函数 这个方法也可以同时为一个事件绑定多个处理函数， 不同的是它是后绑定先执行，执行顺序和addEventListener()相反 */ // btn01.attachEvent("onclick", function () { // alert(1); // }); // btn01.attachEvent("onclick", function () { // alert(2); // }); bind(btn01, "click", function () { alert(1); }); bind(btn01, "click", function () { alert(2); }); /* 定义一个函数，用来为指定元素绑定响应函数 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>
事件的传播
<!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"); /* 事件的传播 关于事件的传播网景公司和微软公司有不同的理解 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， 然后在向内传播给后代元素 W3C综合了两个公司的方案，将事件传播分成了三个阶段 1.捕获阶段 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 2.目标阶段 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 3.冒泡阶段 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false IE8及以下的浏览器中没有捕获阶段 */ 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, false); } 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>
拖拽
<!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 () { //分别为两个按钮绑定单击响应函数 var btn01 = document.getElementById("btn01"); var btn02 = document.getElementById("btn02"); btn01.onclick = function () { alert(1); } btn02.onclick = function () { alert(2); } //设置btn01对鼠标按下相关的事件进行捕获 //当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上 if (btn01.setCapture) { btn01.setCapture(); } /* 拖拽box1元素 拖拽的流程 1.当鼠标在被拖拽元素上按下时，开始拖拽 2.当鼠标移动时被拖拽元素跟随鼠标移动 3.当鼠标松开时，被拖拽元素固定在当前位置 */ // 获取box1 var box1 = document.getElementById("box1"); // 获取box2 var box2 = document.getElementById("box2"); drag(box1); drag(box2); // 为box1绑定一个鼠标按下事件 // 当鼠标在被拖拽元素上按下时，开始拖拽 // box1.onmousedown = function (event) { // // alert("鼠标按下，开始拖拽~~"); // // 设置box1捕获所有鼠标按下的事件 // /* // setCapture( ) // 只有IE支持，但是在火狐中调用时不会报错， // 而如果使用chrome调用，会报错 // */ // // if (box1.setCapture) { // // box1.setCapture(); // // } // // box1.setCapture && box1.setCapture(); // // event = event || window.event; // // //div的偏移量 鼠标.clentX - 元素.offsetLeft // // //div的偏移量 鼠标.clentY - 元素.offsetTop // // var 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.onmouseup = function () { // // //当鼠标松开时，被拖拽元素固定在当前位置onmouseup // // //取消document的onmousemove事件 // // document.onmousemove = null; // // //取消document的onmouseup事件 // // document.onmouseup = null; // // //当鼠标松开时，取消对事件的捕获 // // // if(box1.releaseCapture){ // // // box1.releaseCapture(); // // // } // // box1.releaseCapture && box1.releaseCapture(); // // }; // // /* // // 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容， // // 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， // // 如果不希望发生这个行为，则可以通过return false来取消默认行为 // // 但是这招对IE8不起作用 // // */ // // return false; // }; /* 提取一个专门用来设置拖拽的函数 参数：开启拖拽的元素 */ function drag(obj) { event = event || window.event; //div的偏移量 鼠标.clentX - 元素.offsetLeft //div的偏移量 鼠标.clentY - 元素.offsetTop var ol = event.clientX - obj.offsetLeft; var ot = event.clientY - obj.offsetTop; obj.onmousedown = function (event) { // alert("鼠标按下，开始拖拽~~"); // 设置box1捕获所有鼠标按下的事件 /* setCapture( ) 只有IE支持，但是在火狐中调用时不会报错， 而如果使用chrome调用，会报错 */ if (obj.setCapture) { obj.setCapture(); } // obj.setCapture && obj.setCapture(); event = event || window.event; //div的偏移量 鼠标.clentX - 元素.offsetLeft //div的偏移量 鼠标.clentY - 元素.offsetTop var 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.onmouseup = function () { //当鼠标松开时，被拖拽元素固定在当前位置onmouseup //取消document的onmousemove事件 document.onmousemove = null; //取消document的onmouseup事件 document.onmouseup = null; //当鼠标松开时，取消对事件的捕获 if (obj.releaseCapture) { obj.releaseCapture(); } // obj.releaseCapture && obj.releaseCapture(); }; /* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容， 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， 如果不希望发生这个行为，则可以通过return false来取消默认行为 但是这招对IE8不起作用 */ return false; }; } } </script> </head> <body> 我是一段文字 <div id="box1"></div> <div id="box2"></div> <button id="btn01">按钮01</button> <button id="btn02">按钮02</button> </body> </html>
滚轮事件
<!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的div var box1 = document.getElementById("box1"); //为box1绑定一个鼠标滚轮滚动的事件 /* onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发， 但是火狐不支持该属性 在火狐中需要使用DOMMouseScroll来绑定滚动事件 注意该事件需要通过addEventListener()函数来绑定 */ // function fun() { // alert("滚了~~"); // } // box1.onmousewheel = fun; // bind(box1, "DOMMouseScroll", fun); box1.onmousewheel = function (event) { /* 当鼠标滚轮向下滚动时，box1变长 当滚轮向，上滚动时，box1变短 */ // alert("滚了~~"); event = event || window.event; //判断鼠标滚轮滚动的方向 /* event.wheelDelta 可以获取鼠标滚轮滚动的方向 向上滚120向下滚-120 wheelDelta这个值我们不看大小，只看正负 wheelDelta这个属性火狐中不支持 在火狐中使用event.detail来获取滚动的方向 向上滚-3向下滚3 */ // alert(event.wheelDelta); // alert(event.detail); //判断鼠标滚轮滚动的方向 if (event.wheelDelta > 0 || event.detal < 0) { // alert("向上滚"); box1.style.height = box1.clientHeight - 100 + "px"; } else { // alert("向下滚"); box1.style.height = box1.clientHeight + 100 + "px"; } }; bind(box1, "DOMMouseScroll", box1.onmousewheel); /* 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动， 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为 使用addEventListener( )方法绑定响应函数，取消默认行为时不能使用return false 需要使用event来取消默认行为event.preventDefault() 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错 */ event.preventDefault && event.preventDefault(); return false; } </script> </head> <body style="height: 2000px;"> <div id="box1"></div> </body> </html>
键盘事件
<!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 () { /* 键盘事件: onkeydown 按键被按下 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快 这种设计是为了防止误操作的发生。 onkeyup 按键被松开 键盘事件一般都会绑定给一些可以获取到焦点的对象 */ document.onkeydown = function (event) { event = event || window.event; /* 可以通过keyCode来获取按键的编码 通过它可以判断哪个按键被按下 除了keyCode,事件对象中还提供了几个属性 altKey ctrlKey shiftKey 这个三个用来判断alt、ctrl和shift是否被按下 如果按下则返回true，否则返回false */ // console.log(event.keyCode); // 判断y是否被按下 // if (event.keyCode == 89) { // console.log("y被按下了"); // } //判断y和ctr1是否同时被按下 if (event.keyCode === 89 && event.ctrlKey) { console.log("ctrl和y都被按下了"); } }; // document.onkeyup = function () { // console.log("按键松开了"); // }; //获取input var input = document.getElementsByTagName("input")[0]; input.onkeydown = function (event) { event = event || window.event; // console.log("按键被按下了"); // 数字48 - 57 // 使文本框中不能输入数字 if (event.keyCode >= 48 && event.keyCode <= 57) { //在文本框中输入内容，属于onkeydown的默认行为 //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中 return false; } } } </script> </head> <body> <!-- <div style=" 100px; height: 100px; background-color: red;"></div> --> <input type="text" /> </body> </html>
键盘移动div
<!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"> window.onload = function () { //使div可以根据不同的方向键向不同的方向移动 /* 按左键，div向左移 按右键，div向右移 */ //为document绑定一个按键按下的事件 document.onkeydown = function (event) { event = event || window.event; /* 37左 38上 39右 40下 */ // console.log(event.keyCode); // 定义一个变量，来表示移动的速度 var speed = 10; //当用户按了ctrl以后，速度加快 if (event.ctrlKey) { speed = 50; } 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>