一、事件的冒泡
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{ width: 300px; height: 300px; background-color: gold; } #s1{ background-color: yellow; } </style> <script type="text/javascript"> // 事件的冒泡 // 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发 // 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 window.onload = function(){ // 为s1绑定一个单击响应函数 var s1 = document.getElementById("s1"); s1.onclick = function(){ event = event || window.event; alert("span666"); // 取消事件冒泡 // 可以将事件对象的cancelBubble设置为true,即可取消冒泡 event.cancelBubble = true; }; // 为box1绑定一个单击响应函数 var box1 = document.getElementById("box1"); box1.onclick = function(){ alert("div666"); }; // 为body绑定一个单击响应函数 document.body.onclick = function(){ alert("body666"); }; }; </script> </head> <body> <div id="box1"> 我是span1标签 <span id="s1"> 我是span2标签 </span> </div> </body> </html>
二、事件的委派
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var ul1 = document.getElementById("ul1"); // 点击按钮后添加超链接 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 创建一个li var li = document.createElement("li"); li.innerHTML = "<a href=‘javascript:;‘ class=‘link‘>新建的超链接</a>"; // 将li添加到ul中 ul1.appendChild(li); }; // 为每一个超链接都绑定一个单击响应函数 // 这里我们为每一个超链接都绑定一个单击响应函数,这种操作比较麻烦 // // 获取所有的a var Alla = document.getElementsByTagName("a"); // 遍历 // for(var i= 0 ; i < Alla.length ; i++){ // Alla[i].onclick = function(){ // alert("我是a的单击响应函数"); // }; // } // 我们希望只绑定一次事件,即可应用到多个元素上,即使元素是后添加的 // 我们可以尝试将其绑定给元素的共同祖先元素 // 事件的委派: // 指将事件统一绑定给元素的共同的祖先元素 // 这样当后代元素上的事件触发时,会一直冒泡到祖先元素 // 从而通过祖先元素的响应函数来处理事件 // 事件委派就是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能 // 为ul绑定一个单击响应函数 ul1.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="ul1"> <li><a href="javascript:;" class="link">超链接1</a></li> <li><a href="javascript:;" class="link">超链接2</a></li> <li><a href="javascript:;" class="link">超链接3</a></li> </ul> </body> </html>
三、事件的绑定
<!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(){ // alert(1); // addEventListener() 里面的this是绑定事件的对象 // 通过这个方法也可以为元素绑定响应函数,这个方法不支持IE8及以下的浏览器 // 参数 // 1.事件的字符串,不要on // 2.回调函数,当事件触发时该函数会被调用 // 3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false // 使用这种方式可以同时为一个元素的相同事件同时绑定多个响应函数 btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); bind(btn01 , "click",function(){ alert(1); }); // attachEvent() 里面的this是window // 在IE8中可以使用attachEvent()来绑定事件 // 参数 // 1.事件的字符串,要on // 2.回调函数 // 这个方法也可以同时为一个事件绑定多个处理函数 // 不同的是它是后绑定的先执行,执行顺序和addEventListener()相反 // btn01.attachEvent("onclick",function(){ // alert(1); // }); // bind()函数 // 参数 // 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)(){ // 在匿名函数中调用回调函数 callback.call(obj); }); } } }; </script> </head> <body> <button id="btn01">点我一下</button> </body> </html>
四、事件的传播
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{ width: 300px; height: 300px; background-color: yellowgreen; } #box2{ width: 200px; height: 200px; background-color: yellow; } #box3{ width: 100px; height: 100px; background-color: cyan; } </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(很少使用) 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 , callback)(){ // 在匿名函数中调用回调函数 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> #box1{ width: 100px; height: 100px; background-color: cyan; position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ // 拖拽box1元素流程 // 1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown // 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove // 3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup // 获取box1 var box1 = document.getElementById("box1"); // 为box1绑定一个鼠标按下事件 // 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown box1.onmousedown = function(event){ event = event || window.event; // div的偏移量 鼠标.clientX - 元素.offsetLeft(水平) // div的偏移量 鼠标.clientY - 元素.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绑定一个鼠标松开事件 document.onmouseup = function(){ // 当鼠标松开时,被拖拽元素固定在当前位置 onmouseup // 取消document的onmousemove事件 document.onmousemove = null; // 取消document的onmouseup事件 document.onmouseup = null; }; }; }; </script> </head> <body> <div id="box1"></div> </body> </html>
JavaScript 事件的冒泡、委派、绑定、传播和拖拽练习
原文：https://www.cnblogs.com/hapuluosi/p/14715162.html