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;
},