事件源
事件名
事件注册
事件处理
点击事件
(1)单击事件
在这个案例中，事件源是id为“p1”的元素，事件名是单击事件注册οnclick=“fun()”,
也就是说，当单击id为“p1”的元素时，交给fun函数来处理。
(2)双击事件
(3)鼠标按下/抬起。(on mouse down / on mouse up)
(4)鼠标移入移出（on mouse enter / on mouse leave）
(5)事件综合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div id="div1" onmouseenter="zoomout()" onmouseleave="zoomin()" onmousedown="zoomon()" onmouseup="zoomat()" onclick="zoomclick()" ondblclick="zoomdbl()"></div>
</body>
<script type="text/javascript">
function zoomout() {
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
div1.style.backgroundColor ="yellow";
}
function zoomin() {
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.backgroundColor = "blue";
}
function zoomon() {
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
div1.style.backgroundColor = "red";
}
function zoomat() {
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
div1.style.backgroundColor ="green";
}
function zoomclick() {
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
div1.style.backgroundColor ="purple";
}
function zoodbl() {
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
div1.style.backgroundColor ="pink";
}
</script>
</html>
以上便是关于点击事件的各种情况。
按钮事件
按钮事件需要定义一个按钮，点击按钮后会完成事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="zoomon()">点击</button>
<p id="demo"></p>
</body>
<script type="text/javascript">
function zoomon() {
var p1 = document.getElementById("demo");
p1.style.fontSize = "2em";
p1.innerHTML= "666666";
}
</script>
</html>
点击后会显示给事件定义的显示666666的效果。
版权声明：本文为weixin_45617334原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。