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>
转载请注明原文地址: https://www.6miu.com/read-2633038.html
