✍ 📁 🙈 🙉 🙊 : addEventListener keyboard

Target.addEventListener( )
添加事件監聽器

<t1>addEventListener 監視 keydown 的事件 </t1>
<pre style="font-size: 20px ">監視按鍵盤事件
window.addEventListener( "keydown",  function(event) {...} )
window.addEventListener( "keyup   ",  function(event) {...} )
window.addEventListener( "keypress",  function(event) {...} )

Event.preventDefault() : 如果事件可以被取消，就取消事件行為，
                         但不會影響事件的傳遞，事件仍會繼續傳遞。

keydown  ：按下鍵盤時觸發。
keyup     :鬆開鍵盤時觸發。
keypress ：按下有值的鍵時觸發，Ctrl、Alt、Shift、Meta 這樣無值的鍵。

event.key       返回按下的鍵。
event.ctrlKey   是否按下ctrl    鍵 true/false。
event.shiftKey  是否按下shiftKey鍵 true/false。 
event.altKey    是否按下altKey  鍵 true/false。
event.charCode  ASCII character的數字。
event.keyCode   鍵盤中存在的數字。
</pre>

<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>

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>

<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)
    event. MouseEvent 監聽事件 : 
    mouseenter 移動進入 <B>父元素</B> 的時候會觸發。 
    mouseleave 移動離開 <B>父元素</B> 的時候會觸發。
    mouseover  移動進入到元素上時就會觸發。
    mouseout   移動離開到元素上時就會觸發。
    mouseup    放開滑鼠按鍵時發生。
    mousedown  按一下滑鼠按鍵時發生, 屬性返回,
                    e.detail 0:無按鍵  1:按鍵
                    e.button 0:左鍵    1:中間鍵   2:加鍵
    mousemove  鼠標移動位置, 屬性返回,
                    e.pageX  與文檔左側邊緣的距離（單位像素）
                    e.pageY  與文檔上側邊緣的距離（單位像素）
    mousewheel 滾輪事件。
</pre>

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>

<t1>addEventListener click 點擊事件</t1>

<div id="mainID" style="color:black">
<pre><o><<o>div id="<r>mainID</r>">
      <nobr>click me 1</nobr >
           <nobr>click me 2</nobr >
                <nobr>click me 3</nobr >
           <nobr>click me 4</nobr >
       <nobr>click me 5</nobr >
<o><<o>/div></pre>
</div>

<pre>
<r>mainID</r>.addEventListener('click', function(e){
   e.target.style.color=rgb ; })

e.target : mainID 內的物件。
</pre>

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>

t1{font-size: 30px;color : blue;font-weight : bold;}
B {font-weight : bold;color : blue;}
r {color:red}
</style>

<pre><t1>addEventListener click move 點擊 移動 事件</t1>
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" ;}  })
 
</pre>

<div id="DIV">click me move</div>

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>

t1{font-size: 30px;color : blue;font-weight : bold;}
B {font-weight : bold;color : blue;}
r {color:red}
</style>

<pre><b>  addEventListener() to class</b>
<<c>input <r>class="round"</r> type="text" value="111">
<<c>input <r>class="round"</r> type="text" value="222">
<<c>input <r>class="round"</r> type="text" value="333">
<<c>input <r>class="round"</r> type="text" value="444">

<<c>script>
var Class= document.querySelectorAll(<r>".round"</r>) ;

Class.forEach((round) => {
  round.addEventListener("mouseover", function() {
    round.style.backgroundColor = "bisque";
    round.focus() ;
    round.select() ;
  }) })

Class.forEach((round) => {
  round.addEventListener("mouseout", function() {
    round.style.backgroundColor = "ivory";
    round.blur() ;
  }) })
  
<<c>/script>
</pre>

Class.forEach((round) => {
  round.addEventListener("mouseover", function() {
    round.style.backgroundColor = "bisque";
    round.focus() ;
    round.select() ;
  }) })

Class.forEach((round) => {
  round.addEventListener("mouseout", function() {
    round.style.backgroundColor = "ivory";
    round.blur() ;
  }) })
</script>

<pre><b>  addEventListener() to Tag</b> 
<<c><r>input</r> type="button" value="1"> 
<<c><r>input</r> type="button" value="2"> 
<<c><r>input</r> type="button" value="3"> 
<<c><r>input</r> type="button" value="4"> 
<<c>div id="dp"><<c>/div>

<<c>script>
var Tag= document.querySelectorAll(<r>"input"</r>) ;

Tag.forEach((round) => {
  round.addEventListener("click", function() {
dp.innerHTML = round.value ;
  }) })
<<c>/script>
</pre>

Tag.forEach((round) => {
  round.addEventListener("click", function() {
dp.innerHTML = round.value ;
  }) })

</script>

Edit

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單