事件分類:
滑鼠事件:
click ,mousedown,mousemove,mouseup,contextmenu,mouseover,mouseup,mouseenter,mouseleave
click = mousedown + mouseup
移動小方塊簡單
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:200px;height:200px;background-color: red;position:absolute;left:0px;top:0px"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function drag(elemt) {
elemt.onmousedown = function (e)
{
console.log(e)
var disX = e.pageX - parseInt(elemt.style.left);
var disY = e.pageY - parseInt(elemt.style.top);
document.onmousemove = function (e) {
var event = e || window.event;
console.log(e.pageX,e.pageY);
elemt.style.left = e.pageX -disX + 'px';
elemt.style.top = e.pageY -disY + 'px';
}
document.onmouseup = function (e)
{
document.onmousemove = null
}
}
}
drag(div);
</script>
</body>
</html>
想了解關于js的event對象,可以參考 http://www.cnblogs.com/zxktxj/archive/2012/02/26/2369176.html
鍵盤事件
keydown ,keyup,keypress
keydown>keypress>keyup
keydown和keypress的差別
keydown可以響應任意鍵盤按鍵,keypress隻可以響應字元類的按鍵
keypress 傳回ASCll碼,可以轉換成相應的字元
文本操作事件
input ,focus ,blur,change
窗體操作事件
scroll load
![js原生實作城市關聯[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)