js 鼠标 mousedown,mouseup，按键keydown,keyup 事件

keydown,keyup：属于你的键盘按键

mousedown,mouseup：属于你的鼠标按键

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<script src="jquery1.9.1.js" type="text/javascript"></script>  
<script>  
window.onload = function()  
{  
    //$("#weibo").keydown(function(){  
        //$("#weibo").css("background-image","url(weibobutton3.png)");  
        //});//这个是按键，说白点就是你的键盘上的键，这个是按下的效果  
    //$("#weibo").keyup(function(){  
        //$("#weibo").css("background-image","url(weibobutton.png)");  
        //});//这个是按键，说白点就是你的键盘上的键，这个是放开的效果  
    $("#weibo").mousedown(function(){  
        $("#weibo").css("background-image","url(weibobutton3.png)");  
        });//这个是鼠标键，是你鼠标左击按下的的效果  
    $("#weibo").mouseup(function(){  
        $("#weibo").css("background-image","url(weibobutton.png)");  
        })//这个是鼠标键，是你鼠标左击放开后的效果  
}  
</script>  
</head>  
<body>  
<div>  
<input id="weibo" type="button" style="background-color:transparent; border:0; width:239px; 
height:48px; background-image:url(weibobutton.png)" />  
</div>  
</body>  
</html>

对于keydown事件的进一步解释，w3cschool上很详细，下面的例子就是w3cschool上的例子，可以监听到你按的是你键盘上的具体哪一个键的示例：(主要用了.which这个属性)

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("input").keydown(function(event){   
    $("div").html("Key: " + event.which);  
  });  
});  
</script>  
</head>  
<body>  

请随意键入一些字符：<input type="text" />  
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>  
<div />  

</body>  
</html>

event.preventDefault()：阻止事件的默认动作

event.target：触发该事件的 DOM 元素。

// 获取光标位置,(常用于插值之类的操作）
 getSelection(ev) {
     let selectionStart = ev.target.selectionStart;
     let selectionEnd = ev.target.selectionEnd;
  },

js 鼠标 mousedown,mouseup，按键keydown,keyup 事件

keydown,keyup：属于你的键盘按键

mousedown,mouseup：属于你的鼠标按键

对于keydown事件的进一步解释，w3cschool上很详细，下面的例子就是w3cschool上的例子，可以监听到你按的是你键盘上的具体哪一个键的示例：(主要用了.which这个属性)

event.preventDefault()： 阻止事件的默认动作

event.target： 触发该事件的 DOM 元素。

猜你喜欢

event.preventDefault()：阻止事件的默认动作

event.target：触发该事件的 DOM 元素。