1.事件监听器
如果要为一个元素添加多个相同的事件，该如何实现呢？这就需要用到另外一种添加事件的方式了，那就是——事件监听器
所谓的“事件监听器”，指的是使用addEventListener()方法为一个元素添加事件，我们又称之为“绑定事件”
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TEXT</title> <script src="js/index.js"></script> </head> <body> <input type="button" id="btn" value="按钮"/> </body> </html>
window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.addEventListener("click",alertMes,false); function alertMes() { alert("jsjsjs!"); }
使用“事件监听器”这种方式来为同一个元素添加多个相同的事件：
window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.addEventListener("click",function(){ alert("第一次"); },false); oBtn.addEventListener("click",function(){ alert("第二次"); },false); oBtn.addEventListener("click",function(){ alert("第三次"); },false); }
当我们点击按钮后，浏览器会依次弹出3个对话框
2.解绑事件
在JavaScript中，我们可以使用removeEventListener()方法为元素解绑某个事件。解绑事件与绑定事件是功能相反的操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function() { var oP=document.getElementById("content"); var oBtn=document.getElementById("btn"); // 为p添加事件 oP.addEventListener("click",changeColor,false); // 点击按钮后，为p解除事件 oBtn.addEventListener("click",function(){ oP.removeEventListener("click",changeColor,false); },false); function changeColor() { this.style.color="hotpink"; } } </script> </head> <body> <p id="content">javascript</p> <input id="btn" type="button" value="解除" /> </body> </html>
removeEventListener()只可以解除“事件监听器”添加的事件，不可以解除“事件处理器”添加的事件。如果要解除“事件处理器”添加的事件，我们可以使用“obj.事件名 = null;”来实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function() { var oDiv=document.getElementById("content"); var oBtn=document.getElementById("btn"); // 为p添加事件 oDiv.onclick=changeColor; // 点击按钮后，为p解除事件 oBtn.addEventListener("click",function(){ oP.onclick=null; },false); function changeColor() { this.style.color="hotpink"; } } </script> </head> <body> <p id="content">javascript</p> <input id="btn" type="button" value="解除" /> </body> </html>
3.event对象
当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象。给大家打个比喻，我们都知道飞机都有黑匣子，飞机若失事，我们可以从黑匣子中获取详细的信息。这里，飞机失事可以看作一个事件，而黑匣子，就是我们所说的event对象
type
在JavaScript中，我们可以使用event对象的type属性来获取事件的类型
window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function(e) { alert(e.type); }; }
keyCode
在JavaScript中，如果我们想要获取键盘中的键对应的键码，可以使用event对象的keyCode属性
event.keyCode返回的是一个数值，常用的按键及对应的键码如表
如果是【Shift】键、【Ctrl】键和【Alt】键，我们不需要通过keyCode属性来获取，而可以通过shiftKey、ctrlKey和altKey属性来获取
e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值🧨
案例：禁止shift，ctrl，alt键：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function(){ document.onkeydown=function(e){ if(e.shiftKey || e.altKey || e.ctrlKey){ alert("禁止使用shift、alt、ctrl键！") } } } </script> </head> <body> <p>heihei</p> </body> </html>
4.this
在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function() { var oDiv=document.getElementsByTagName("div")[0]; oDiv.onclick=function() { this.style.color="hotpink"; } } </script> </head> <body> <div>hello</div> </body> </html>
this所在的函数是一个匿名函数，这个匿名函数被oDiv调用了，因此this指向的就是oDiv
