脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS事件监听器

JavaScript事件监听器详细介绍

 更新时间：2022年09月21日 17:01:23   作者：斯文～  
这篇文章主要介绍了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 计算误差的解决

    JavaScript 计算误差的解决

    本文主要介绍了JavaScript 计算误差的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • JavaScript ES6中class定义类实例方法

    JavaScript ES6中class定义类实例方法

    ES6提供了更接近面向对象(注意:javascript本质上是基于对象的语言)语言的写法,引入了Class(类)这个概念,作为对象的模板,下面这篇文章主要给大家介绍了关于JavaScript ES6中class定义类的相关资料,需要的朋友可以参考下
    2022-07-07
  • JS实现二叉查找树的建立以及一些遍历方法实现

    JS实现二叉查找树的建立以及一些遍历方法实现

    本篇文章主要介绍了JS实现二叉查找树的建立以及一些遍历方法实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • FF IE兼容性的修改小结

    FF IE兼容性的修改小结

    FF IE兼容性的修改小结，大家以后在javascript的编写过程中需要注意下。
    2009-09-09
  • Javascript将string类型转换int类型

    Javascript将string类型转换int类型

    今天网站有个小功能要判断用户购买商品数量是否大于库存数据，如果大于库存数量，就给予提示。
    2010-12-12
  • 微信小程序实现上传图片功能

    微信小程序实现上传图片功能

    这篇文章主要为大家详细介绍了微信小程序实现上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-05-05
  • js时间戳与日期格式之间相互转换

    js时间戳与日期格式之间相互转换

    这篇文章主要为大家详细介绍了js时间戳与日期格式之间相互转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • js加减乘除精确运算方法实例代码

    js加减乘除精确运算方法实例代码

    这篇文章主要给大家介绍了关于js加减乘除精确运算方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Layui tree 下拉菜单树的实例代码

    Layui tree 下拉菜单树的实例代码

    今天小编就为大家分享一篇Layui tree 下拉菜单树的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解JavaScript创建数组的三种方式

    详解JavaScript创建数组的三种方式

    这篇文章主要介绍了JavaScript创建数组的三种方式：直接声明, 以对象方式创建数组和使用 Array.from() 方法创建,并通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-06-06

最新评论