一、事件
<!DOCTYPE html>
<html lang="en">
<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="" id="red">
<input type="text" id="uName" />
<input type="submit" id="submit"/>
<input type="reset" id="reset"/>
</form>
</body>
<script type="text/javascript">
var redDiv =document.getElementsByClassName("redDiv")[0];
var reg = document.getElementById("red");
var uName = document.getElementById("uName");
redDiv.onmousemove = function(){
console.log("鼠标在移动的时候触发");
}
redDiv.onclick = function(){
console.log("单击事件");
}
redDiv.οndblclick= function(){
console.log("双击事件");
}
redDiv.onmousedown = function(){
console.log("鼠标按下事件")
}
redDiv.onmouseup = function(){
console.log("鼠标擡起事件");
}
redDiv.oncontextmenu = function(){
console.log("鼠标右击事件");
return false;
}
redDiv.onmouseover = function(){
console.log("over鼠标移入");
}
redDiv.onmouseout = function(){
console.log("out鼠标移除");
}
redDiv.onmouseenter = function(){
console.log("enter鼠标移入");
}
redDiv.onmouseleave = function(){
console.log("leave鼠标移除");
}
document.onkeydown = function(){
console.log("down键盘按下");
}
document.onkeypress = function(){
console.log("press键盘按下");
}
document.onkeyup = function(){
console.log("键盘擡起事件");
}
uName.onchange = function(){
console.log("内容发生改变之后触发");
}
uName.oninput = function(){
console.log("内容发生变化之后触发");
}
uName.onfocus = function(){
console.log("聚焦")
}
uName.onblur = function(){
console.log("失焦");
}
reg.onsumbmit = function(){
console.log("提交");
return false;
}
reg.onreset = function(){
console.log("重置");
return false;
}
window.onresize = function(){
console.log("窗口尺寸发生变化的时候触发");
}
window.onscroll = function(){
console.log("窗口内容滚动的时候触发");
}
img.onload = function(){
console.log("图片加载完毕之后触发");
}
window.onload = function(){
console.log("窗口加载完毕之后触发");
}
</script>
</html>
二、事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style type="text/css">
.redDiv{
width: 200px;
height: 200px;
background-color: red;
}
p{
margin: 0px;
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 = ev || window.event;
console.log(evObj.target);
console.log(evObj.clientY);
console.log(evObj.pageY);
console.log(evObj.offsetX);
}
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 == 91){
console.log("按了command + B");
}
}
</script>
</html>
