Event

28542 ワード
JavaScript テキストリンク

onkeypress,onkeyup,onkeydown

onkeypress(値keyCode):キーボードを押すときonkeyup(値keyCode):キーボードを押すとonkeydown(値ASCII):キーボードを押すとき
例)
문자열 입력 <input type="text" id="txtMsg" onkeyup="showText(event)">
<div id="result"></div>
<div id="pos"></div>
<script>
function(e){
  console.log(e.keyCode);
}
</script>
押したキー価格がxonsoleに表示されます.

onmouseover,onmouseout,onmousemove

onmouseoverの画像にマウスを置き、バックグラウンドのプロパティを与えます.
マウスがonmouseout画像から離れると、バックグラウンドのプロパティソースの位置にあります.onmousemoveマウスの移動位置が表示されます.onmousemove例)
<div id="pos"></div>
<div id="box"
     style="width:400px;
            height:300px;
            border:2px solid green"
     onmousemove="showXY(event)">
</div>
<script>
function showXY(e) {
	var x=e.clientX;
	var y=e.clientY; 
	document.getElementById("pos").innerHTML="x:"+x+",y"+y;
}
</script>


x値とy値が表示されます.onmouseover、例onmouseout)
<div id="imgbox">
  <img src="경로/이름.png"
       onmouseover="addBorder(event)"
       onmouseout="removeBorder(event)">
  <img src="경로/이름.png"
       onmouseover="addBorder(event)"
       onmouseout="removeBorder(event)">
  <img src="경로/이름.png"
       onmouseover="addBorder(event)"
       onmouseout="removeBorder(event)">
</div>
<script>
function addBorder(e) {
	var img=e.target;//이벤트 발생된 객체
	img.style.background="orange";
}
  
  function removeBorder(e) {
	e.target.style.background="none";
}
  
  function border() {
	var imgbox=document.getElementById("imgbox");
	imgbox.style.border="3px solid red";
}
</script>
マウスを離すと背景がオレンジ色に変わり、マウスが写真から離れると元の色に戻ります.

onclick


ユーザーがクリックするとjavaスクリプトが実行されます.
例)
<style type="text/css">
  *{
  margin: 0px;
  padding: 0px
  }
  
  #box{
  top: 200px;
  left: 200px;
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: absolute;
  border: 2px solid green;
  }
  
  #img1{
  left: 100px;
  top: 100px;
  position: absolute;
  }
</style>
<body onload="setXY()">
<div id="box" onclick="imgXY(event)">
  <img src="images/1.png" id="img1">
</div>
</body>
<script type="text/javascript">
  function setXY() {
	  var img1=document.getElementById("img1");
	  img1.style.width="100px";
	  img1.style.height="100px";
}

  function imgXY(e) {
	var x=e.clientX;
	var y=e.clientY;
	var img1=document.getElementById("img1");
	var w=parseInt(img1.style.width)/2;
	var h=parseInt(img1.style.height)/2;
	var box=document.getElementById("box");
	var offsetX=box.offsetLeft; 
	var offsetY=box.offsetTop; 
	console.log(offsetX+","+offsetY)
	img1.style.left=(x-w-200)+"px";
	img1.style.top=(y-h-200)+"px";
}
</script>


1.緑の格子内をクリックし、クリックした位置に画像を移動させます.
2 .e.clientXおよびe.clientYイベントが発生した水平および垂直座標値を取得する
3.画像の値が変わる可能性があるので、parseIntを使用して正に変換
4.箱左上角距離200 pxなのでoffsetX=box.offsetLeft、offsetY=box.offsetTop、スクリーン上のx、y軸から位置を取得
5.画像左上隅のpxを取得する
=このようにクリックすると、画像が真ん中になります.

addEventListener


書式→addEventListener('이벤트명',호출될함수명)例)
<body>
<input type="button" value="클릭1" id="btn1">
<input type="button" value="클릭2" id="btn2">
</body>
<script type="text/javascript">
  var btn2=document.getElementById("btn2");
  btn2.onclick=showMsg;

  var btn1=document.getElementById("btn1");
  btn1.addEventListener('click',showMsg);
  btn1.addEventListener('click',func1);
 
  function showMsg() {
	alert("버튼클릭");
}
  
  function func1() {
	alert("button click!!");
  	btn1.removeEventListener('click',func1);
}
</script>
var btn2=document.getElementById("btn2"); btn2.onclick=showMsg;上記のコードは1つのイベントにのみ接続されていますが、addEventListenerは複数のイベントを入力して削除することができます.
なお、addEventListenerの呼び出す関数名に()を付け、()を使用できない場合、イベントが発生する前に関数が最初に実行されます.
『ゼロから学ぶSwift』学習ノート(Day 54)——間違いを投げ出す
Quiz)カスタムクラス