✍ 📁 🙈 🙉 🙊

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

Select option Sort

CSS overflow 控制捲軸

<b>Javascript to sort contents of select element</b><br><br>
<select id="Sel" >
    <option value="158.12 HK$">3 people</option>
    <option value="276.36 HK$">2 people</option>
    <option value="110.36 HK$">8 people</option>
    <option value="879.69 HK$">1 people</option>
    <option value="256.36 HK$">4 people</option>
</select>

select sort <br>
<input type="button" value="sort by HK$"  onclick="sortMe('value')">
<input type="button" value="sort by people" onclick="sortMe('text')">

<pre><ol><li> <<c>script> 
<li> function sortMe(x){
<li> var tmpAry = new Array();
<li>    for (var i=0; i<5 ;i++) {
<li>        tmpAry[i] = new Array();
<li>           if(x=='text' ){ tmpAry[i][0] = Sel[i].text;
<li>                        tmpAry[i][1] = Sel[i].value; }
<li>            if(x=='value' ){ tmpAry[i][0] = Sel[i].value;
<li>                        tmpAry[i][1] = Sel[i].text; }
<li>      }

<li> tmpAry = tmpAry.sort() ;
<li>   for (var ii=0; ii<5 ;ii++) {
<li>         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
<li>                         Sel[ii].value = tmpAry[ii][1] ;}
<li>         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
<li>                         Sel[ii].text  = tmpAry[ii][1] ;}
<li>        }
<li> }
<li> <<c>/script>

</pre>

Tt += '</pre>' ;
DP.innerHTML =Tt ;
}
DPhtml() ;
</script>

tmpAry = tmpAry.sort() ;
   for (var ii=0; ii<5 ;ii++) {
         if(x=='text' ){ Sel[ii].text  = tmpAry[ii][0] ;
                         Sel[ii].value = tmpAry[ii][1] ;}
         if(x=='value'){ Sel[ii].value = tmpAry[ii][0] ;
                         Sel[ii].text  = tmpAry[ii][1] ;}
 DPhtml() ; }
}
</script>

table {font-size:20px;
       width: 100%;
       border: 1px solid;}

</style>

Edit

#html #網頁格式 #script #style #div

市場由TradingView提供

Edit

CCS flex-flow column row

<pre><t1>CCS flex-flow 屬性介紹</t1>
   內容物會依照交錯軸線排列成一行。
<table border="1"><tbody>
<tr><td>column      </td><td> 縱行</td></tr>
<tr><td>row        </td><td>  列行</td></tr>
<tr><td>row nowrap  </td><td>列行換行</td></tr>
<tr><td>row-reverse nowrap </td><td>列行反向 不換行</td></tr>
<tr><td>column-reverse  nowrap </td><td>縱行反向 不換行</td></tr>
<tr><td>row wrap </td><td>  列行 換行</td></tr>
<tr><td>row-reverse wrap </td><td> 列行反向 換行</td></tr>
<tr><td>column wrap      </td><td>  縱行 換行</td></tr>
<tr><td>column-reverse wrap</td><td> 縱行反向 換行</td></tr>
<tr><td>row wrap-reverse  </td><td>  列行 反向換行</td></tr>
<tr><td>row-reverse wrap-reverse</td><td>  列行反向 反向換行</td></tr>
<tr><td>column wrap-reverse</td><td> 縱行 反向換行</td></tr>
<tr><td>column-reverse wrap-reverse</td><td> 縱行反向 反向換行</td></tr>
<tbody></table>
  flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性。
  flex-flow 屬性用於設置或檢索彈性盒模型對像的子元素排列方式。
  flex-direction 屬性規定靈活項目的方向。
  flex-wrap 屬性規定靈活項目是否拆行或拆列。
  flex-grow：伸展比
  flex-shrink：收縮比
  flex-basis：絕對值
</pre>
<style>
pre ,table  {font-size: 20px ;}
td {padding:0 10px 0 10px}
t1{font-size: 30px;color : blue;font-weight : bold;}
r {color : red}
</style>

div123 { height: 40%;
         margin: 0;
         padding: 0;
         display: flex;
         flex-flow: column;  }

header { display: block;
         margin: 4px;
         padding: 5px;
         height: 20%;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: #ffeebb;    }

footer { display: block;
         margin: 4px;
         padding: 5px;
         height: 100%;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: #ffeebb;    }

#div1{ width:98% ; margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: #dddd88;
        flex: 0 1 100%;
        order: 1;    }
 
 #div2{ width:98% ; margin: 4px;
        padding: 2px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 0 1 100%;
        order: 2;    }

#div3{ width:98%  ; margin: 4px;
         padding: 2px;
         border: 1px solid #8888bb;
         border-radius: 7pt;
         background: #DAA520 ;
         flex: 0 1 100%;
         order: 3;    }

#inChange{ position: fixed;
           top:45% ; left:150px}
</style>

<Mdiv id="Mdiv" >
    <header id="header">header</header>
        <div123 id="div123">
                  <div1 id="div1">div1</div1>
                  <div2 id="div2">div2</div2>
                  <div3 id="div3">div3</div3>
         </div123>
    <footer>footer <br>

Mdiv flex-flow :<label class="container"><input type="radio" name="MdivFlow"  checked="checked" onchange="Mdiv.style.flexFlow='column'" >column</label>
<label class="container">
<input type="radio" name="MdivFlow"  onchange="Mdiv.style.flexFlow='column-reverse'">column-reverse</label>
<br><br>

header display :
<label class="container">
<input type="radio" name="S1" 
onchange="header.style.display='block'" checked="checked">block</label>
<label class="container">
<input type="radio" name="S1" value="header display none" onchange="header.style.display='none'">none</label>
<br><br>

div1 display :
<label class="container">
<input type="radio" name="S2" checked="checked" onchange="div1.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="S2" value="div1 display none" onchange="div1.style.display='none'">none</label>
<br>

div2 display :
<label class="container">
<input type="radio" name="d2" checked="checked" onchange="div2.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="d2" value="div2 display none" onchange="div2.style.display='none'">none</label>
<br>

div3 display :
<label class="container">
<input type="radio" name="d3" checked="checked" onchange="div3.style.display='block'" >block</label>
<label class="container">
<input type="radio" name="d3" value="div3 display none" onchange="div3.style.display='none'">none</label>
<br><br>

div123 display :
<label class="container">
<input type="radio" name="d4" value="div123 display inherit" onchange="div123.style.display='inherit'" checked="checked">inherit</label>
<label class="container">
<input type="radio" name="d4" value="div123 display none" onchange="div123.style.display='none'">none</label>
<br>

div123 flex-flow :
<label class="container">
<input type="radio" name="d5" checked="checked" onchange="div123.style.flexFlow='column'" >column</label>
<label class="container">
<input type="radio" name="d5"  onchange="div123.style.flexFlow='column-reverse'">column-reverse</label>
<br>

div123 flex-flow :
<label class="container">
<input type="radio" name="d5" checked="checked" onchange="div123.style.flexFlow='row'" >row</label>
<label class="container">
<input type="radio" name="d5"  onchange="div123.style.flexFlow='row-reverse'">row-reverse</label>
<br>
</div>

</footer>

Edit

#html #style #script #javascript #CCS flex-flow #flex-flow column #flex-flow row #display #display flex #flex

CSS order

#div1 { width:300px; height:100px;
        background-color:coral;  
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: antiquewhite;
        order:1 }

#div2 { width:400px; height:150px;
        background-color:#8888bb;
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: pink;
        order:2 }
	
#div3 { width:600px; height:200px;
        background-color:coral; 
        font-size: 20px ;margin: 4px;
        padding: 2px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: wheat;
        order:3}
	
#main{  display:flex;
        flex-flow:row ; //column ;		
	align-items:flex-end ;
       	width:100%;
	height:300px;
	border:1px solid black;		}

#main div{flex: 1;}	
</style>

<div class="sel">			
CSS div { order :
<select onchange="Order(this)">
    <option value="1 2 3" > ▃ ▅ ▇ </option>
    <option value="2 1 3" > ▅ ▃ ▇</option>
    <option value="3 1 2" > ▇ ▃ ▅ </option>
    <option value="1 3 2" > ▃ ▇ ▅ </option>
    <option value="3 2 1" > ▇ ▅ ▃ </option>
</select> ; } <br>

CSS div { flex :
<select onchange="Order(this)">
    <option value="a" >   auto </option>
    <option value="n" >   none</option>
    <option value="i" >   initial </option>
    <option value="1" >   1  </option>
    <option value="3" >   0  30% </option>
    <option value="0" >   0  20%</option>

</select> ; } <br>

CSS main div {  flex-flow :
<select onchange="Order(this)">
    <option value="main row" > flex-flow : row </option>
    <option value="main column" > flex-flow : column </option>
</select> ; } <br>

</div><Br>

function Order(x) {
 if(x.value == "main row" )   { main.style.flexFlow = "row"; }
 if(x.value == "main column" ){ main.style.flexFlow = "column-reverse nowrap";}

if(x.value == "0" ){     div1.style.flex = "0 20%";
                         div2.style.flex = "0 20%";
                         div3.style.flex = "0 20%";  }

if(x.value == "3" ){     div1.style.flex = "0 30%";
                         div2.style.flex = "0 30%";
                         div3.style.flex = "0 30%";  }

if(x.value == "a" ){     div1.style.flex = "auto";
                         div2.style.flex = "auto";
                         div3.style.flex = "auto";  }

if(x.value == "i" ){     div1.style.flex = "initial";
                         div2.style.flex = "initial";
                         div3.style.flex = "initial";  }

if(x.value == "n" ){     div1.style.flex = "none";
                         div2.style.flex = "none";
                         div3.style.flex = "none";  }

if(x.value == "1" ){     div1.style.flex = "1 ";
                         div2.style.flex = "1 ";
                         div3.style.flex = "1 ";  }

if(x.value == "1 2 3" ){ div1.style.order = 1;
                         div2.style.order = 2;
                         div3.style.order = 3;  }

if(x.value == "2 1 3"){ div2.style.order = 1;
                         div1.style.order = 2;
                         div3.style.order = 3; }

if(x.value == "3 1 2" ){ div3.style.order = 1;
                         div1.style.order = 2;
                         div2.style.order = 3;  }

if(x.value == "1 3 2" ){ div1.style.order = 1;
                         div3.style.order = 2;
                         div2.style.order = 3;  }

if(x.value == "3 2 1" ){ div3.style.order = 1;
                         div2.style.order = 2;
                         div1.style.order = 3;  }

div1.innerHTML = "div1<br>order= "  + div1.style.order +
                  "<br>flex  = " + div1.style.flex;

div2.innerHTML = "div2<br>order= "  + div2.style.order +
                  "<br>flex  = " + div2.style.flex;

div3.innerHTML = "div3<br>order= "  + div3.style.order +
                  "<br>flex  = " + div3.style.flex;

//alert(x.value) 
}
Order("1 2 3");
</script>

Edit

#html #style #script #javascript #CSS #Order #CSS Order #display:flex order #元素的順序

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

addEventListener keyboard

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

Select option Sort

CSS overflow 控制捲軸

市場由TradingView提供

CCS flex-flow column row

CSS order

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

addEventListener keyboard

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

Select option Sort

CSS overflow 控制捲軸

市場由TradingView提供

CCS flex-flow column row

CSS order

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

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