JavaScript事件监听器详细介绍
什么是事件
HTML 事件是发生在 HTML 元素上的“行为 ”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。
事件监听就是JavaScript 可以在某一事件被触发时，执行一段预设的逻辑代码。如我们点击开灯、关灯时页面做出的相应反应其实就是通过事件监听来更换图片。
1. 事件绑定
JavaScript 提供了两种事件绑定方式：
方式一：通过 HTML标签中的事件属性进行绑定;
如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数。
<input type="button" onclick='on()'>
下面是点击事件绑定的 on() 函数
function on(){
alert("我被点了");
}方式二：通过 DOM 元素属性绑定
如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现。
<input type="button" id="btn">
下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行。
document.getElementById("btn").onclick = function (){
alert("我被点了");
}代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">
<script>
function on(){
alert("我被点了");
}
//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
</script>
</body>
</html>2. 常见事件
| 事件属性名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| 键盘事件 | 可阅读官方文档了解 |
onfocus 获得焦点事件。
如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。
onblur 失去焦点事件
如下图，当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。下图示例是将输入的文本转换为大写。
onmouseout鼠标移出事件onmouseover鼠标移入事件onsubmit表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="register" action="#" >
<input type="text" name="username" />
<input type="submit" value="提交">
</form>
<script>
</script>
</body>
</html>如上代码的表单，当我们点击 提交 按钮后，表单就会提交，此处默认使用的是 GET 提交方式，会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能，js 代码实现如下：
- 获取
form表单元素对象。 - 给
form表单元素对象绑定onsubmit事件，并绑定匿名函数。 - 该匿名函数如果返回的是true，提交表单；如果返回的是false，阻止表单提交。
document.getElementById("register").onsubmit = function (){
//onsubmit 返回true，则表单会被提交，返回false，则表单不提交
return true;
}到此这篇关于JavaScript事件监听器详细介绍的文章就介绍到这了,更多相关JS事件监听器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇JavaScript继承学习笔记。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
django admin 使用SimpleUI自定义按钮弹窗框示例
Django 后台admin有大量的属性和方法,拥有强大的功能和自定义能力，这篇文章主要介绍了django admin 使用SimpleUI自定义按钮弹窗框示例,需要的朋友可以参考下2023-04-04
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
在使用bootstrap制作响应式导航条时，dropdown组件用的比较多，dropdown默认鼠标左键单击才展开，如果使用鼠标放上去（hover）就展开则会省去点击时间，这样能提高效率，下面小编给大家解答下实现思路2016-08-08
这篇文章主要介绍了鼠标滑在标题上显示图片的JS代码，有需要的朋友可以参考一下2013-11-11
本文主要分享了canvas红包照片的实例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
一种Javascript解释ajax返回的json的好方法(推荐)
下面小编就为大家带来一篇一种Javascript解释ajax返回的json的好方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了原生JS实现悬停下拉菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了js实现图片预加载的方法，内容很详细，带领大家全面认识js图片预加载模块，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了js+css实现三级导航菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
ajax提交并返回xml的实现代码2008-11-11
最新评论