Javascript 事件_html img document.getelementbyid backgroundcolor-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38362146/article/details/76943986

本文深入讲解了事件处理机制，包括事件源、事件名、事件注册和事件处理的概念，并通过实例详细解析了各种常见鼠标和键盘事件，如单击、双击、键盘按下等。此外还介绍了事件的注册方法及捕获与冒泡过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件

事件源
事件名
事件注册
事件处理

以火灾为例

粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。

事件源：粤商大酒店201房间

事件名：火灾

事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责

事件处理：喷水

常用事件

鼠标常用事件：

（1）单击事件

<body>
<p id="p1" onclick="fun()">单击事件测试</p>
</body>

<script>
function fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerText = "我被单击了！";
p1.style.fontSize ="60px";
}
</script>

在这个案例中，事件源就是id为“p1”的元素，事件名是单击，事件注册是onclick="fun()"，也就是说当单击id为“p1”的元素时，就交由fun函数来处理。

（2）双击事件

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:skyblue;
}
</style>
</head>
<body>
<div id="div1" onclick="zoomout()" ondblclick="zoomin()">
</div>
</body>
<script>
function zoomout(){
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin(){
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
</html>
（3）鼠标按下/弹起（onmousedown onmouseup）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:skyblue;
}
</style>
</head>
<body>
<div id="div1" onmousedown="zoomout()" onmouseup="zoomin()">
</div>
</body>
<script>
function zoomout(){
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin(){
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>

（4）鼠标移入/离开 onmouseenter onmouseleave

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:skyblue;
}
</style>
</head>
<body>
<div id="div1" onmouseenter="red()" onmouseleave="blue()">
</div>
</body>
<script>
function red(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor ="red";
}
function blue(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor ="skyblue";
}
</script>
</html>

（5）onmouseover onmouseout
与onmouseenter、onmouseleave很类似。
（6）鼠标移动 onmousemove

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color:skyblue;
}
#img1{
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div id="div1" onmousemove="move(event)">
</div>
<img id="img1" src="man.png">
鼠标的坐标<p id="p1"></p>
</body>
<script>
functionmove(e){
var p1 = document.getElementById("p1");
var img1 = document.getElementById("img1");
p1.innerText = e.clientX+","+ e.clientY;
img1.style.top = e.clientY+"px";
img1.style.left = e.clientX+"px";
}
</script>
</html>

（7）onmousewheel

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:skyblue;
}
</style>
</head>
<body>
<div id="div1" onmousewheel="wheel(event)">
</div>
</body>
<script>
var width = 100;
var height = 100;
functionwheel(e){
if(e.wheelDelta > 0){
width += 5;
height += 5;
}else{
width -= 5;
height -= 5;
}
var div1 = document.getElementById("div1");
div1.style.width = width+"px";
div1.style.height = height+"px";
}
</script>
</html>

键盘事件
（1）keypress

function search(e){
if(e.keyCode == 13){
var what = document.getElementById("what");
alert("开始搜索："+what.value);
}
}

keyCode属性记录了按下的键的编码。
keypress事件只能捕获可打印字符的按键，不能捕获诸如shift、ctrl、alt等不可打印字符的按键。
但是可以通过shiftkey、ctrlkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键。
（2）keydown、keyup

<body>
<input id="what" type="text" onkeydown="keydown(event)">
</body>
<script>
function keydown(e){
alert(e.keyCode);
}
</script>
keydown、keyup可以捕获键盘上所有的键（个别除外）。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#img1{
position:absolute;
top:0px;
left:0px;
}
</style>
</head>
<body onkeydown="move(event)">
<img id="img1" src="man.png">
</body>
<script>
var top1 = 0;
var left = 0;
functionmove(e){
switch(e.keyCode){
case37:left -=5; break;
case38:top1 -=5; break;
case39:left +=5; break;
case40:top1 +=5; break;
}
var img1 = document.getElementById("img1");
img1.style.top = top1+"px";
img1.style.left = left+"px";
}
</script>
</html>

总结：
（1）使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变量名就好了。
（2）如果把变量top1和left移入函数中，发现只能移动5像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不会保留上一次的值。如果需要保留，就只能用全局变量了。

其它事件：
onload:页面加载事件
onfocus:获得焦点的事件
onblur:失去焦点事件
onchange:值改变事件
事件的注册
三种方法：
（1）使用onXXX属性，比如onclick="fun()"
（2）通过js去设置元素的onXXX属性
（3）通过addEventListener注册

<body>
<input type="text" id="txt1" onfocus="focus1()">
</body>
<script>
var txt1 = document.getElementById("txt1");
//注册事件的第二种方法
txt1
txt1
txt1.onblur = blur2;
//注册事件的第三种方法
txt1
txt1
txt1.addEventListener("change",function (){
alert("值改变了");
});
function focus1(){
txt1.style.backgroundColor= "blue";
}
function blur2(){
var txt1 = document.getElementById("txt1");
txt1.style.backgroundColor= "gray";
}
</script>

后两种方法有何好处？将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（实际上就是JS的内容）往往是程序员的事。分离后利于分工合作。
第三种方式addEventListener的第一个参数事件名，第二个参数是事件处理函数。可以添加事件监听，当然也就可以移除，用的是removeEventListener，参数与addEventListener参数是一样的。
而且通过addEventListener和removeEventListener甚至我们可以去动态地去注册不同的事件处理程序。
捕获与冒泡