document.onkeydown=function (){ if(event.ctrlKey==1){ alert('Ctrl键被按了'); } else if(event.shiftKey==1){ alert('Shift键被按了'); } else if(event.altKey==true){ alert('Alt键被按了'); } else{ alert('都没被按下'); } };
实例：按键提交消息
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>JavaScript示例</title> 6 <script> 7 window.onload=function (){ 8 var oTxt1=document.getElementById('txt1'); 9 var oTxt2=document.getElementById('txt2'); 10 var oBtn=document.getElementById('btn1'); oBtn.onclick=function (){ oTxt2.value += oTxt1.value+'\n'; oTxt1.value=''; 18 }; oTxt1.onkeydown=function (){ (event.keyCode===13 || event.keyCode===13 && event.ctrlKey){ 25 oTxt2.value += oTxt1.value+'\n'; 26 oTxt1.value=''; 27 } 28 }; 29 } 30 </script> 31 </head> 32 <body> 33 <input type="text" > 34 <input type="button" value="提交"><br> 35 <textarea rows="10" cols="50" ></textarea> 36 </body> 37 </html>
(4)、事件流
事件的传递有两种方式：冒泡与捕获。事件传递定义了元素触发事件的顺序。
事件冒泡：当一个元素发生事件后，事件会顺着层级（父级 – 父级的父级 –）关系依次向上传递直到document。
事件捕获：事件捕获与事件冒泡正好相反，外部元素的事件会先被触发，然后才会触发内部元素的事件，即从祖先到后代。
事件流同时支持两种事件方式，冒泡型事件和捕获型事件，但是捕获型事件先发生。
两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。
语法：addEventListener(‘事件名称’，函数，冒泡/捕获)
addEventListener()方法用于向指定元素添加事件，该方法不会覆盖已存在的事件，可同时向一个元素添加多个事件。该方法有三个参数，第一个参数定义事件的类型，
第二个参数规定事件触发后调用的函数，第三个参数是布尔值，用于定义该事件是冒泡还是捕获，若为false，则表示冒泡事件，若是ture，则表示捕获事件。
这里需要注意是的该方法的事件类型，不需要加”on“，比如平时写点击事件：“onclick”，该方法中则使用“click”即可。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>JavaScript示例</title> 6 <style> 7 div{padding:50px;} 8 </style> 9 <script> 10 window.onload = function (){ 11 var x=document.getElementById("div1"); 12 var y=document.getElementById("div2"); 13 var z=document.getElementById("div3"); o=document.getElementById("bod"); 16 var n=document.getElementById("htm"); 17 18 x.addEventListener("click", function() { 19 alert("1冒泡"); 20 }, false); 21 22 y.addEventListener("click", function() { 23 alert("2冒泡"); 24 }, false); 25 26 z.addEventListener("click", function() { 27 alert("3冒泡"); 28 }, false); 29 30 o.addEventListener("click", function() { 31 alert("body捕获"); 32 }, true); 33 34 n.addEventListener("click", function() { 35 alert("html冒泡"); 36 }, false); 37 }; 38 </script> 39 </head> 40 <body> 41 <div>我是body元素，我捕获。祖先html也会冒泡。</div> 42 <div>我是div3，我冒泡 43 <div>我是div2,我冒泡 44 <div>我是div1,我冒泡</div> 45 </div> 46 </div> 47 </body> 48 </html>
removeEventListener()方法用于移除由addEventListener()方法添加的事件监听。这里需要注意在绑定函数时不能使用匿名函数，否则无法删除。
相关文章
精彩导读
热门资讯
关注我们
