文章目录
JavaScript 事件
事件
定义：事件是浏览器与用户交换的行为;
onmousemove
定义：鼠标元素移动时触发;
clientX
定义：获取鼠标的水平坐标;
clientY
定义：获取鼠标的垂直坐标;
createElement
定义：创建标签;
appendChild
定义：将创建的标签添加到指定的元素下;
案例
//将创建好的li标签添加到ul下 u1.appendChild(li);
target
定义：表示触发事件的对象;
addEventListener
定义：同时为一个元素的相同事件绑定多个响应函数,当事件被触发时,响应函数将会安装函数的绑定的顺序执行(可以同时为一个元素绑定多个事件)
事件对象
定义：当事件触发时,浏览器每次都传递一个实参进来;
案例
显示当前鼠标坐标位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #areaDiv{ width: 500px; height: 200px; border: 1px solid black; } #showMsg{ width: 500px; height: 100px; margin-top: 30px; border: 1px solid black; } </style> <script type="text/javascript"> window.onload = function(){ /** * 当属标在areaDiv移动时,在showMsg中显示鼠标的坐标 * **/ var areaDiv = document.getElementById("areaDiv"); var showMsg = document.getElementById("showMsg"); /** * onmousemove * 鼠标元素移动时触发 * * 事件对象 * 当事件触发时,浏览器每次都传递一个实参进来 * **/ areaDiv.onmousemove = function(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>
运行效果
事件冒泡
定义：当后代元素上的事件触发时,其祖先元素上的事件也会被触发;
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: red; } #s1{ background-color: green; } </style> <script type="text/javascript"> window.onload = function(){ /** * 事件冒泡: (Bubble) 吧bou * 当后代元素上的事件触发时,其祖先元素上的事件也会被触发 * * * * **/ //为是s1绑定单机响应函数 var s1 = document.getElementById("s1"); s1.onclick = function(event){ event = event || window.event; alert("s1"); //取消冒泡 event.cancelBubble = true; }; //为是box1绑定单机响应函数 var box1 = document.getElementById("box1"); box1.onclick = function(){ event = event || window.event; alert("box1"); //取消冒泡 cancelBubble 取消冒泡事件 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> <script type="text/javascript"> window.onload = function(){ //获取ul var u1 = document.getElementById("u1"); //点击按钮添加超链接 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ //创建一个li var li = document.createElement("li"); li.innerHTML = "<li><a href='javascript:;' class='link'>新建超链接</a></li>" u1.appendChild(li); }; /** * 获取所有a标签,绑定单机响应函数 * * **/ var allA = document.getElementsByTagName("a"); //遍历 // for(var i=0;i<allA.length;i++){ // allA[i].onclick = function(){ // alert("aaa"); // }; // } /** * 事件的委派 * 将事件统一绑定给祖先元素,当后代元素上触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件 * * 只绑定一次事件,即可应用到多个元素上,即使元素是后添加的 * **/ //为ul绑定单机响应函数 u1.onclick = function(event){ event = event || window.event; //如果触发事件对象是期望的元素执行,否则不执行 /** * target * event中的target表示触发事件的对象 * **/ if(event.target.className == "link"){ alert("1111"); } }; }; </script> </head> <body> <button id="btn01">添加超链接</button> <ul id="u1" style="background-color: greenyellow;"> <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> </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("1111"); // }; // //绑定第二个响应函数 // btn01.onclick = function(){ // alert("2222"); // }; /** * addEventListener() * 通过这个方法可以为元素绑定响应函数 * 参数: * 1.事件的字符串,不用on; * 2.回调函数,当事件触发时该函数会被调用 * 3.是否在捕获阶段触发事件,需要一个bool值,一般都传false * 使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数,当事件被触发时,响应函数将会安装函数的绑定的顺序执行 * 可以同时绑定多个事件 * * IE8一下不支持 * **/ btn01.addEventListener("click",function(){ alert("11"); },false); btn01.addEventListener("click",function(){ alert("22"); },false); // bind(btn01,"click",function(){ // alert("111"); // }); }; //定义一个函数 /** * 参数: * obj 要绑定事件的对象 * eventStr 事件的字符串 * callback 回调函数 * **/ // function bind(obj,eventStr,callback){ // if(obj.addEventListener){ // //大部分浏览器兼容 // obj.addEventListener(eventStr,callback,false); // }else{ // /** // * this是由调用方式调用的 // * **/ // //IE8及以下 // obj.attachEvent("on"+eventStr,callback); // } //} </script> </head> <body> <button id="btn01">点我一下</button> </body> </html>
