javascriptイベントkey、mouseの違い(個人理解＋参照w 3 school)
4756 ワード
keyの違い
1.キーレスはASCII値のあるキーを押すだけでトリガします.ctrlキーを押すとイベントが発生しませんが、アルファベットキーや数字キーを押すとトリガできます.テキストボックスに直接にものを打つことができるキーがイベントをトリガするということも分かります.注意すべきなのは中国語でこの事件を触発しないことです.event.keyCodeを通じて、aとAを押して得られるのは対応するASCII値です.
2.keydownは、keyCodeと似ていますが、同じようにキーボードを押してイベントを起こします.違うのはキーボードを押したら、どのキーでもそのキーのkeyCodeに戻ります.
3.keyup、キーボードのいずれかのボタンを離した時に触発され、得られたkeyCodeはkeydownイベントと同じです.
1.mousedownマウスをクリックしてイベントをトリガします.マウスの左ボタン、右ボタン、ホイールをクリックしてもトリガできます.ボタンを押すと、ほどかずにトリガします.2.mouseup、マウスをクリックしてからイベントを開始します.マウスの左ボタン、右ボタン、ホイールをクリックしてもトリガできます.ボタンを押すとトリガーされません.3.mouseoverは、マウスを要素やそのサブ要素に移動するとイベントをトリガします.サブ要素に移行すると、再び4.mouseenterをトリガします.mouseoverと似ていますが、マウスが要素に移動するとトリガされます.サブ要素に移動すると再起動しません.
6.mouseleaveマウスが要素を離れるとイベントが発生します.サブ要素を残してイベントを再起動しません.
1.キーレスはASCII値のあるキーを押すだけでトリガします.ctrlキーを押すとイベントが発生しませんが、アルファベットキーや数字キーを押すとトリガできます.テキストボックスに直接にものを打つことができるキーがイベントをトリガするということも分かります.注意すべきなのは中国語でこの事件を触発しないことです.event.keyCodeを通じて、aとAを押して得られるのは対応するASCII値です.
2.keydownは、keyCodeと似ていますが、同じようにキーボードを押してイベントを起こします.違うのはキーボードを押したら、どのキーでもそのキーのkeyCodeに戻ります.
3.keyup、キーボードのいずれかのボタンを離した時に触発され、得られたkeyCodeはkeydownイベントと同じです.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keypress(function(event){
$("#s1").text(event.keyCode);
});
$("input").keydown(function(event){
$("#s2").text(event.keyCode);
});
$("input").keyup(function(event){
$("#s3").text(event.keyCode);
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>KeyPress:<span id="s1">0</span></p>
<p>KeyDown:<span id="s2">0</span></p>
<p>KeyUp:<span id="s3">0</span></p>
</body>
</html>1.mousedownマウスをクリックしてイベントをトリガします.マウスの左ボタン、右ボタン、ホイールをクリックしてもトリガできます.ボタンを押すと、ほどかずにトリガします.2.mouseup、マウスをクリックしてからイベントを開始します.マウスの左ボタン、右ボタン、ホイールをクリックしてもトリガできます.ボタンを押すとトリガーされません.3.mouseoverは、マウスを要素やそのサブ要素に移動するとイベントをトリガします.サブ要素に移行すると、再び4.mouseenterをトリガします.mouseoverと似ていますが、マウスが要素に移動するとトリガされます.サブ要素に移動すると再起動しません.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$(".over").mouseover(function(){
$(".over span").text(x+=1);
});
$(".enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p> ， mouseover 。</p>
<p> ， mouseenter 。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;"> Mouseover ：<span style="border:1px red solid"></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;"> Mouseenter ：<span></span></h2>
</div>
</body>
</html>6.mouseleaveマウスが要素を離れるとイベントが発生します.サブ要素を残してイベントを再起動しません.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
</head>
<body>
<p> ， mouseout 。</p>
<p> ， mouseleave 。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;"> Mouseout ：<span style="border: 1px red solid"></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;"> Mouseleave ：<span></span></h2>
</div>
</body>
</html><html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
});
</script>
</head>
<body>
<p> ： <span></span>.</p>
</body>
</html>