Javascript添加事件的三种方式
程序员文章站
2022-03-09 08:14:30
...
1.Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，常用事件如下：
HTML添加事件的方式：
1.第一种方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>使用JavaScript给HTML元素分配事件</title>
</head>
<body>
<input type="button" value="按钮" style="background:red;" οnmοuseοver="over()" οnmοuseοut="out()"/>
//onmouseover表示鼠标被移到某元素之上
//onmouseout表示鼠标从某元素移开
<script>
var inputElement = document.getElementsByTagName("input")[0]; //详见注释1
function over(){
inputElement.style.backgroundColor='yellow';
};
function out(){
inputElement.style.backgroundColor='red';
};
</script>
</body>
</html>
代码2：
注释1
var inputElement = document.getElementsByTagName("input")[0];
document表示代表整个HTML对象，是上面的所有代码。因为input是标签名字，所以用getElementsByTagName(“input”) ；得到的是整个代码中所有input标签中的的内容。如果整个代码中含有多个input标签，那就得到的是一个数组 ，所以在最后添加[0],表示得到的是第一个input标签的内容
第二种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>使用JavaScript给HTML元素分配事件</title>
</head>
<body>
<input type="button" value="按钮" style="background:red;"/> //在按钮类型上显示值“按钮”
<script>
var inputElement = document.getElementsByTagName("input")[0];
inputElement.onmouseover = function(){ //onmouseover表示鼠标被移到某元素之上，颜色就会变成黄色
this.style.backgroundColor='yellow';
};
inputElement.onmouseout = function(){
this.style.backgroundColor='red'; //onmouseout表示鼠标从某元素移开，颜色就是红色
};
</script>
</body>
</html>
第三种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>使用JavaScript给HTML元素分配事件</title>
</head>
<body>
<input type="button" value="按钮" style="background:red;" />
<script>
var inputElement = document.getElementsByTagName("input")[0];
inputElement.addEventListener("mouseover", function() {
this.style.backgroundColor = 'yellow';
})
inputElement.addEventListener("mouseout", function() {
this.style.backgroundColor = 'red';
})
</script>
</body>
</html>
运行结果
鼠标不在按钮上
鼠标在按钮上
上一篇： 使用Python实现管理系统附源码
下一篇： pygame实现贪吃蛇游戏