码迷,mamicode.com
首页 > 编程语言 > 详细

Java Script 之 addEventListener

时间:2018-08-28 17:59:27      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:php   line   rip   demo   实例   tar   语法   基本   btn   

 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>


点击这里运行!

分析:

 基本语法是:

element.addEventListener(eventfunctionuseCapture)

 event: 事件,例如上面的 mouseout  就是鼠标移出,这是需要记住的.

function: 触发函数,就是这个事件发生后,我们做出什么响应。 (上面的响应是,在一个p标签中 不断添加提示语)

Java Script 之 addEventListener

标签:php   line   rip   demo   实例   tar   语法   基本   btn   

原文地址:https://www.cnblogs.com/3532gll/p/9549617.html

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