码迷,mamicode.com
首页 > Web开发 > 详细

js中常用的事件

时间:2016-08-01 15:35:45      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//点击事件
function testClick(){
console.log("Clicked");
}
//双击事件
function testDblClick(){
console.log("dblClick");
}
//当鼠标移动到某一个(DOM)对象上方的时候
function testMouseOver(){
console.log("over");
//console.log(this.style.backgroundColor="green")
document.getElementById("div").style.backgroundColor="green";
}
//表示鼠标在某一个(DOM)对象的上面移动的时候
function testMouseMove(){
console.log("move");
}
//从一个对象上面离开的时候
function testMouseLeave(){
console.log("leave")
document.getElementById("div").style.backgroundColor="#fff";
}
//鼠标从一个对象上面离开的时候 Leave和out已经合并 可以直接使用out
function testMouseOut(){
console.log("out")
}
/**
* onload与自执行函数:
* onload在文档加载完成以后执行
* 自执行函数只要解析到 就会执行
*/
onload = function () {
console.log("onload");
}
</script>

<style type="text/css">
div{
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid red;
}
</style>

</head>
<body>
<input type="button" onclick="testClick()" value="Click">
<input type="button" ondblclick="testDblClick()" value="dblclick">
<div onmouseover="testMouseOver()" id="div" onmouseleave="testMouseLeave()">
Over
</div>
<div onmousemove="testMouseMove()" onmouseout="testMouseOut()">
Move
</div>
</body>
</html>

js中常用的事件

标签:

原文地址:http://www.cnblogs.com/hwgok/p/5725624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!