addEventListener keyboard

<pre><t1>Target.addEventListener( ) 監聽物件</t1><br /> Target.addEventListener(event,function,Capture)<br /> Target : 監聽物件,表示觸發事件的元素 Document、Window、id.....<br /><br /> event : mousedown、mouseenter、mouseleave、mousemove、<br /> 監聽事件 mouseout、mouseover、mouseup、mousewheel 、<br /> click、dblclick keydown、keypress、keyup <br /> blur、focus、abort、beforeinput、<br /> compositionstart、compositionupdate、compositionend、<br /> error、focusin、focusout、input、load、resize、<br /> scroll、select、unload、wheel<br /><br /><br /><t1>Target.removeEventListener() 刪除監聽</t1><br /> removeEventListener()方法用於刪除與addEventListener(),<br /> 方法關聯的事件處理程序。<br /> <br /></pre><style>pre {font-size: 20px} t1{font-size: 30px;color : blue;font-weight : bold;} </stylr>

00

<t1>addEventListener 鼠标事件 按我 click me </t1><pre style="font-size: 20px ">監視按鍵盤事件<br />window.addEventListener( "keydown", function(event) {...} )<br />window.addEventListener( "keyup ", function(event) {...} )<br />window.addEventListener( "keypress", function(event) {...} )<br /><br />Event.preventDefault() : 如果事件可以被取消，就取消事件行為，<br /> 但不會影響事件的傳遞，事件仍會繼續傳遞。<br /><br />keydown ：按下鍵盤時觸發。<br />keyup :鬆開鍵盤時觸發。<br />keypress ：按下有值的鍵時觸發，Ctrl、Alt、Shift、Meta 這樣無值的鍵。<br /><br />event.key 返回按下的鍵。<br />event.ctrlKey 是否按下ctrl 鍵 true/false。<br />event.shiftKey 是否按下shiftKey鍵 true/false。 <br />event.altKey 是否按下altKey 鍵 true/false。<br />event.charCode ASCII character的數字。<br />event.keyCode 鍵盤中存在的數字。<br /></pre> <style>table { font-size: 20px} table td {width:150px} t1{font-size: 30px;color : blue;font-weight : bold;} </style> <table border="1"><tbody><tr><td> </td><td>keydown </td><td>keyup </td><td>keypress </td></tr> <tr><td>event.key </td><td id="A1"></td><td id="A2"></td><td id="A3"></td></tr> <tr><td>event.ctrlKey </td><td id="B1"></td><td id="B2"></td><td id="B3"></td></tr> <tr><td>event.shiftKey </td><td id="C1"></td><td id="C2"></td><td id="C3"></td></tr> <tr><td>event.altKey </td><td id="altKey1"></td><td id="altKey2"></td><td id="altKey3"></td></tr> <tr><td>event.charCode </td><td id="D1"></td><td id="D2"></td><td id="D3"></td></tr> <tr><td>event.keyCode </td><td id="E1"></td><td id="E2"></td><td id="E3"></td></tr> </tbody></table></td><td id="F1"></td><td id="F2"></td><td id="F3"></td></tr> <div id="inkey" style="font-size: 20px "></div> <script>window.addEventListener( "keydown", function(event) { A1.innerHTML = event.key; B1.innerHTML = event.ctrlKey; C1.innerHTML = event.shiftKey; altKey1.innerHTML = event.altKey; D1.innerHTML = event.charCode; E1.innerHTML = event.keyCode; if (event.ctrlKey || event.altKey ){event.preventDefault() } }) window.addEventListener( "keyup", function(event) { A2.innerHTML = event.key; B2.innerHTML = event.ctrlKey; C2.innerHTML = event.shiftKey; altKey2.innerHTML = event.altKey; D2.innerHTML = event.charCode; E2.innerHTML = event.keyCode; }) window.addEventListener( "keypress", function(event) { A3.innerHTML = event.key; B3.innerHTML = event.ctrlKey; C3.innerHTML = event.shiftKey; altKey3.innerHTML = event.altKey; D3.innerHTML = event.charCode; E3.innerHTML = event.keyCode; }) //alert(event.key) ; </script>

00

<style>table , pre {font-size: 20px; } table tr {height:30px} t1{font-size: 30px;color : blue;font-weight : bold;} B {font-weight : bold;color : blue;} </style> <t1>addEventListener mouse 鼠标事件</t1><table border="1" id="Mdiv"><tbody><tr><td id="msout" width="100px">mouseover</td><td width="200px"><nobr id="Move"></nobr> </td><td width="200px"> </td> <tr><td id="msout" width="100px">mouseout</td><td><nobr id="Mout">mouse out</nobr></td><td width="200px"> </td> <tr><td id="msout" width="100px">mouseenter</td><td width="200px"><nobr id="Mter"></nobr> </td><td width="200px"> </td> <tr><td id="msout" width="100px">mouseleave</td><td><nobr id="Mave">mouse out</nobr></td><td width="200px"> </td> <tr><td id="msout" width="100px">mouseup</td><td><nobr id="Mup">0</nobr></td><td width="200px"> </td> <tr><td width="100px" >mousemove</td><td>e.pageX=<nobr id="mXXX" >0</nobr></td><td>e.pageY=<nobr id="mYYY" >0</nobr></td> <tr><td width="100px" >mousedown</td><td>e.detail=<nobr id="mdet" >0</nobr></td><td>e.button=<nobr id="mbut" >0</nobr></td> <tr><td width="100px" >mousewheel</td><td>e.deltaY=<nobr id="delY" >0</nobr></td><td>e.deltaX=<nobr id="delX" >0</nobr></td> </tr></tbody></table><pre> Target.addEventListener(event ,function(e){} ,false)<br /> event. MouseEvent 監聽事件 : <br /> mouseenter 移動進入 <B>父元素</B> 的時候會觸發。 <br /> mouseleave 移動離開 <B>父元素</B> 的時候會觸發。<br /> mouseover 移動進入到元素上時就會觸發。<br /> mouseout 移動離開到元素上時就會觸發。<br /> mouseup 放開滑鼠按鍵時發生。<br /> mousedown 按一下滑鼠按鍵時發生, 屬性返回,<br /> e.detail 0:無按鍵 1:按鍵<br /> e.button 0:左鍵 1:中間鍵 2:加鍵<br /> mousemove 鼠標移動位置, 屬性返回,<br /> e.pageX 與文檔左側邊緣的距離（單位像素）<br /> e.pageY 與文檔上側邊緣的距離（單位像素）<br /> mousewheel 滾輪事件。<br /></pre> <script>window.addEventListener('mouseover',function(e){ Move.innerHTML ="mouse over"; Mout.innerHTML =""}); window.addEventListener('mouseout',function(e){ Mout.innerHTML ="mouse out" Move.innerHTML ="" }); Mdiv.addEventListener('mouseenter',function(e){ Mter.innerHTML ="mouse over"; Mave.innerHTML =""}); Mdiv.addEventListener('mouseleave',function(e){ Mave.innerHTML ="mouse out" Mter.innerHTML ="" }); window.addEventListener('mouseup',function(e){ Mup.innerHTML ="1" }); window.addEventListener('mousemove', function (e) { mYYY.innerHTML=e.pageY ; mXXX.innerHTML =e.pageX;FMxy() }); window.addEventListener('mousedown', function (e) { mdet.innerHTML=e.detail ; mbut.innerHTML=e.button ; Mup.innerHTML ="0" }); window.addEventListener('mouseup', function (e) { mdet.innerHTML=0 ; mbut.innerHTML=0 ; e.preventDefault() },false); window.addEventListener('contextmenu', function (e) { e.preventDefault(); }, false); window.addEventListener('mousewheel', function (e) { delY.innerHTML=e.deltaY;delX.innerHTML=e.deltaX; }, false); </script>

00

<t1>addEventListener click 點擊事件</t1> <div id="mainID" style="color:black"><pre><o><<o>div id="<r>mainID</r>"><br /> <nobr>click me 1</nobr ><br /> <nobr>click me 2</nobr ><br /> <nobr>click me 3</nobr ><br /> <nobr>click me 4</nobr ><br /> <nobr>click me 5</nobr ><br /><o><<o>/div></pre></div> <pre><br /><r>mainID</r>.addEventListener('click', function(e){<br /> e.target.style.color=rgb ; })<br /><br /> e.target : mainID 內的物件。<br /></pre> <script>mainID.addEventListener('mousedown', function(e){ e.preventDefault() }) mainID.addEventListener('click', function(e){ // rgb 颜色随机 var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var rgb = 'rgb('+r+','+g+','+b+')'; e.target.style.color=rgb ; e.preventDefault(); }) </script> <style>nobr { cursor:pointer} #mainID {font-size: 20px;border: 3px solid black ;width:300px } pre {font-size: 20px; } t1{font-size: 30px;color : blue;font-weight : bold;} B {font-weight : bold;color : blue;} r {color:red} </style>

00

<pre><t1>addEventListener click move 點擊 移動 事件</t1><br />window.addEventListener('mouseup', function(e){ Dw=0 })<br /><br />DIV.addEventListener('mousedown',function(e){ Dw=1 })<br /><br />window.addEventListener('mousemove', function(e){<br /> if(Dw==1 ) { DIV.style.top =e.pageY-30+"px" ;<br /> DIV.style.left=e.pageX-30+"px" ;} })<br /> <br /></pre> <div id="DIV">click me move</div> <script>var Dw=0 ; window.addEventListener('mouseup', function(e){ Dw=0 }) DIV.addEventListener('mousedown', function(e) { Dw=1 }) window.addEventListener('mousemove', function(e){ if(Dw==1 ){ DIV.style.top =e.pageY-30+"px" ; DIV.style.left=e.pageX-30+"px" ;} }) DIV.addEventListener('touchstart', function(e){ var touchobj = e.changedTouches[0] ; var XXX= parseInt(touchobj.clientX) ; var YYY= parseInt(touchobj.clientY) ; DIV.style.top =YYY-30+"px" ; DIV.style.left=XXX-30+"px" ; }) window.addEventListener('mousedown', function(e){ e.preventDefault() }) window.addEventListener('mouseout', function(e){ Dw=0 }) </script> <style>#DIV { width:50px ; height:65px;border: 3px solid black ; cursor:pointer; position: fixed;top:50px;left:650px} pre ,#DIV {font-size: 20px; } t1{font-size: 30px;color : blue;font-weight : bold;} B {font-weight : bold;color : blue;} r {color:red} </style>

00

Edit