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可以获取鼠标指针的水平坐标 * cilentY可以获取鼠标指针的垂直坐标 */ var x = event.clientX; var y = event.clientY; //alert("x = "+x + " , y = "+y); //在showMsg中显示鼠标的坐标 showMsg.innerHTML = "x = "+x + " , y = "+y; }; };
<style type="text/css"> #box1{ 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 || 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; 2000px;"> <div id="box1"></div> </body>
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的单击响应函数"); }; }; <body> <div id="box1"> 我是box1 <span id="s1">我是span</span> </div> </body>
事件的委派：
window.onload = function(){ var u1 = document.getElementById("u1"); //点击按钮以后添加超链接 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ //创建一个li var li = document.createElement("li"); li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"; //将li添加到ul中 u1.appendChild(li); }; /* * 为每一个超链接都绑定一个单击响应函数 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， * 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 */ //获取所有的a var allA = document.getElementsByTagName("a"); //遍历 /*for(var i=0 ; i<allA.length ; i++){ allA[i].onclick = function(){ alert("我是a的单击响应函数！！！"); }; }*/ /* * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的 * 我们可以尝试将其绑定给元素的共同的祖先元素 * * 事件的委派 * - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素 * 从而通过祖先元素的响应函数来处理事件。 * - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 */ //为ul绑定一个单击响应函数 u1.onclick = function(event){ event = event || window.event; /* * target * - event中的target表示的触发事件的对象 */ //alert(event.target); //如果触发事件的对象是我们期望的元素，则执行否则不执行 if(event.target.className == "link"){ alert("我是ul的单击响应函数"); } }; }; </script> <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>
事件的绑定：
/* * 使用 对象.事件 = 函数 的形式绑定响应函数， * 它只能同时为一个元素的一个事件绑定一个响应函数， * 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的 */ /* * 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); }); //定义一个函数，用来为指定元素绑定响应函数 /* * 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); }); } } bind(btn01 , "click" , function(){ alert(this); });
事件的传播：
/* * 事件的传播 * - 关于事件的传播网景公司和微软公司有不同的理解 * - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， * 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 * - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， * 然后在向内传播给后代元素 * - W3C综合了两个公司的方案，将事件传播分成了三个阶段 * 1.捕获阶段 * - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 * 2.目标阶段 * - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 * 3.冒泡阶段 * - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 * * - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true * 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false * * - IE8及以下的浏览器中没有捕获阶段 */