HTML鼠標鍵盤事件和對象
1.事件
.--
.--
.--
.----
.--
.--
.---
.----
.---
.---
. ----
.-----
.-------
.-------
.-----
.------
. ------
.----
.------
..--
..--
..---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件名稱</title>
<style type="text/css">
.redDiv{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="redDiv"></div>
<form action="redDiv" id="reg">
<input type="text" name="" id="uName">
<input type="submit" name="" id="submit">
<input type="reset" name="" id="reset">
</form>
</body>
<script type="text/javascript">
var redDiv = document.getElementsByClassName('redDiv')[0];
var reg = document.getElementById('reg');
var uName = document.getElementById('uName');
redDiv.onclick = function() {
console.log("單擊事件");
}
redDiv.ondblclick = function(){
console.log("雙擊事件");
}
redDiv.onmousedown = function(){
console.log("鼠標按下事件")
}
redDiv.onmouseup = function(){
console.log("鼠標擡起事件")
}
redDiv.onmousemove = function(){
console.log("鼠標移動的時候觸發");
}
redDiv.oncontextmenu = function(){
return false;
console.log("鼠標右擊事件");
}
redDiv.onmouseover = function(){
console.log("over鼠標移入");
}
redDiv.onmouseout = function(){
console.log("out鼠標移出");
}
redDiv.onmouseenter = function(){
console.log("鼠標移入");
}
redDiv.onmouseleave = function(){
console.log("鼠標移出");
}
document.onkeydown = function(){
console.log("down鍵盤按下");
}
document.onkeypress = function(){
console.log("press鍵盤按下");
}
document.onkeyup = function(){
console.log("鍵盤擡起事件");
}
uName.onchange = function(){
console.log("change內容選區位置發生改變之後觸發");
}
uName.oninput = function(){
console.log("input內容改變之後觸發");
}
uName.onfocus = function(){
console.log("聚焦");
}
uName.onblur = function(){
console.log("失焦");
}
reg.onsubmit = function(){
console.log("提交");
}
reg.onreset = function(){
console.log("重置");
}
window.onresize = function(){
console.log("窗口尺寸發生變化的時候觸發");
}
window.onscroll = function(){
console.log("窗口內容滾動的時候觸發");
}
window.onload = function(){
console.log("窗口加載完畢之後觸發");
}
</script>
</html>
2.對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件對象</title>
<style type="text/css">
.redDiv{
width: 200px;
height: 200px;
background-color: red;
}
p{
height: 100px;
margin-left: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="redDiv">
<p></p>
</div>
</body>
<script type="text/javascript">
var redDiv = document.getElementsByClassName('redDiv')[0];
redDiv.onclick = function (ev) {
var evObj = window.event || ev ;
console.log(evObj.target);
console.log(evObj.clientY);
console.log(evObj.pageY);
console.log(evObj.offsetY);
}
document.onkeypress = function(ev){
console.log("press" + ev.keyCode);
}
document.onkeydown = function(ev){
console.log(ev.keyCode);
if (ev.keyCode == 66 ) {
console.log("按了 B");
}
if (ev.keyCode == 66 && ev.metaKey ) {
console.log("按了 command + B");
}
}
</script>
</html>
