Java Script 之 addEventListener
Posted 还能做好什么
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java Script 之 addEventListener相关的知识，希望对你有一定的参考价值。
addEventListener ，字面上理解就是，给事件添加一个监听器，为什么这样做？就是想让这个事件发生时，我们能及时的知道，同时伴随着干一些其他的事。
先给个题目：我们再屏幕上给出一个按钮， 我们希望当用户移动鼠标，光标碰到按钮时，屏幕上自动显示，"鼠标经过!"，鼠标点击，屏幕接着显示"鼠标点击!"，光标离开时，屏幕上接着"鼠标离开!"。
仔细一想，这就是 事件监听器 (EventListener) 最佳发挥的地方。
直接给出代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction()
{
document.getElementById("demo").innerHTML += "鼠标经过!<br>"
}
function mySecondFunction()
{
document.getElementById("demo").innerHTML += "点击!<br>"
}
function myThirdFunction()
{
document.getElementById("demo").innerHTML += "鼠标离开!<br>"
}
</script>
</body>
</html>
分析:
基本语法是：
event: 事件，例如上面的 mouseout 就是鼠标移出，这是需要记住的.
function: 触发函数，就是这个事件发生后，我们做出什么响应。 (上面的响应是，在一个p标签中 不断添加提示语)
以上是关于Java Script 之 addEventListener的主要内容，如果未能解决你的问题，请参考以下文章