JavaScript事件

最新推荐文章于 2024-05-21 14:15:14 发布
最新推荐文章于 2024-05-21 14:15:14 发布
阅读量314 收藏 2
点赞数 3
分类专栏： 前端 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51892736/article/details/126645009
版权

JavaScript事件

事件绑定

js事件绑定有两种方式：

  1. 通过 HTML标签中的事件属性进行绑定：
    如下代码，有个按钮元素，我们在该标签上定义一个事件属性，在事件属性中绑定函数。onclick就是一个事件属性。οnclick=“run1()” 表示该点击事件绑定了一个名为run1()的函数。
<input type="button" value="点我啊" onclick="run1()"/>

下面是绑定的run1()函数：

	<script>
        function run1(){
          alert("点了");
        }
    </script>

效果如下：
在这里插入图片描述
点了按钮以后：

在这里插入图片描述

  1. 通过 DOM 元素属性绑定：
    如以下代码是按钮标签，此时并没有使用事件属性，绑定的事件操作需要在js代码中完成。
<input type="button" id="btn">

下面 js 代码是获取了 id=‘btn’ 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行

document.getElementById("btn").onclick = function (){ alert("我被点了"); }

常见事件

属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload时间被加载完成
onsubmit当表单提交时触发该事件
onmouseover鼠标移入某元素上
onmouseout鼠标从某元素移开

点击事件

  • οnclick=“函数名()”:当点击文本框，就弹出框。
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
          alert("弹出框");
        }
    </script>
</head>
<body>
    <input type="text"  onclick="run1()"/>
</body>
</html>

效果如下：
在这里插入图片描述

焦点事件

获取焦点

  • οnfοcus=“函数名()”:文本框获取焦点时 弹出一个对话框

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
          alert("获取焦点了");
        }
    </script>
</head>
<body>
    <input type="text"  onfocus="run1()"/>
</body>
</html>

效果如下：
在这里插入图片描述

失去焦点

  • οnblur=“函数名()”:文本框失去焦点时 弹出一个对话框
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
          alert("失去焦点了");
        }
    </script>
</head>
<body>
    <input type="text"  onblur="run1()"/>
</body>
</html>

效果如下：
先点击文本框，再点击文本框以外的地方，就弹出来。
在这里插入图片描述

域内容改变事件

  • οnchange=“函数名()”:当选择框中的值发生改变时，弹出一个对话框

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
            alert("值改变了");
        }
    </script>
</head>
<body>
    <!--
        当选择框 值发生改变时，弹出一个对话框
     -->
    <select onchange="run1()">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
    </select>
</body>
</html>

效果如下：
切换框里的选项：
在这里插入图片描述

加载完毕事件

  • οnlοad=“函数名()”:当内容加载完毕，就弹出窗口，点击确定后看到内容

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
            alert("加载完毕了");
        }
    </script>
</head>
<body  onload="run1()">
    你好
    今天天气好晴朗

</body>
</html>

效果如下：
在这里插入图片描述

表单提交事件

  • οnsubmit=“函数名()”: 表单提交按钮被点击 执行run1，onsubmit 用于表单的校验，该事件也可以控制表单的提交。true允许提交 ，false阻止提交。
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
            alert("表单的提交按钮被点击了");
            return false;
        }
    </script>
</head>
<body>
    <form onsubmit=" return run1()">
      <input type="submit" value="提交"/>
    </form>
</body>
</html>

效果如下：
在这里插入图片描述

键位弹起事件

  • οnkeyup=“函数名()”:
    代码如下：

效果如下：

鼠标移动事件

鼠标移入

  • οnmοuseοver=“函数名()”:鼠标移入文本框 弹出对话框
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
            alert("鼠标移入");
        }
    </script>
</head>
<body>
    <input type="text" onmouseover="run1()"/>
</body>
</html>

效果如下：
在这里插入图片描述

鼠标移出

  • οnmοuseοut=“函数名()”:鼠标移出文本框 弹出对话框
    代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
            alert("鼠标移出");
        }
    </script>
</head>
<body>
    <input type="text" onmouseout="run1()"/>
</body>
</html>

效果如下：
在这里插入图片描述

元素事件句柄绑定

绑定一个函数

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
          alert("run1");
        }
        function run2(str){
            alert(str);
        }
        function run3(obj){
            alert(obj.valuej);
        }
    </script>
</head>
<body>
    <!--绑定一个无参函数-->
    <input type="text" value="1111" onclick="run1()"/><br />

    <!--绑定一个有参函数，函数就是一个字符串-->
    <input type="text" value="2222" onclick="run2('你好啊')"/><br />

    <!--绑定一个有参函数，函数就是一个元素对象-->
    <input type="text" value="3333" onclick="run3(this)"/><br />

</body>
</html>

效果如下：
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

绑定多个函数

触发事件时，会根据绑定顺序，按顺序执行这三个函数：
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(str){
          alert(str);
        }
        function run2(){
            alert("run2");
        }
        function run3(){
            alert("run3");
        }
    </script>
</head>
<body>
    <!--绑定多个函数-->
    <input type="text" value="1111" onclick="run1('我爱你'),run2(),run3()"/><br />
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

DOM绑定事件

绑定方式

优点： 使得HTML与JS代码完全分离

缺点： 1.不能传递函数（解决：匿名函数可以）2.一个事件只能绑定一个函数（解决：匿名函数可以绑定多个函数）

  • DOM绑定一个函数： 对象，时间属性 一次只能绑定一个函数，不能传递参数
window.onload=run1;
  • DOM绑定多个函数： 匿名函数 可以绑定多个函数，可传递参数
window.onload=function (){
          run1();
          run2();
          run3();
      };

DOM绑定方式-练习

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
            alert("run1");
        }
        function run2(){
            alert("run2");
        }

        window.onload=function (){
           var t1=document.getElementById("t1");
           t1.onclick=function (){
               run1();
               run2();
           }
        }

    </script>
</head>
<body>
    <!--为文本框 onclick事件绑定上两个函数，run1和run2-->
    <input type="text" id="t1"/>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

鬼鬼不同路
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
javascript事件绑定学习要点
10-22
主要介绍了javascript事件绑定学习要点,主要包含下面四个方面1.传统事件绑定的问题，2.W3C事件处理函数，3.IE事件处理函数，4.事件对象的其他补充，有需要的小伙伴可以参考下
javascript事件问题
10-29
咱们都知道，在DOM事件模型中，有捕获和冒泡两个阶段，而在IE事件模型中，只有冒泡阶段。写在html里的事件响应函数只有在冒泡阶段才会被执行
JavaScript 事件
weixin_57766805的博客
04-28 1391
JavaScript 事件简介 事件就是文档或浏览器窗口(用户与浏览器)中发生的一些特定的交互行为，JavaScript与HTML之间的交互是通过事件实现的 onclick 鼠标点击某个对象 JavaScript 事件对象 事件对象：当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递响应函数 在事件对象中封装了当前事件相关的一切信息(在IE8中响应函数被触发 浏览器不会传递事件对象在IE8以下会将事件对象作为window对象的属性保存的) Onmousemove 该..
JavaScript事件基础
热门推荐
JiuMeilove的博客
04-28 2万+
JavaScript事件概述 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测道德行为 简单的理解为:触发—响应机制 网页中国每个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某个按钮时产生一个事件然后去执行某些操作 JavaScript事件的三要素 JavaScript事件又三分部组成 事件源 被触发的对象 事件类型__如何触发/什么事件 事件处理器__通过一个函数赋值的方式完成 <body> <butto
JavaScript事件监听
CSPsy的博客
03-06 3281
JavaScript事件监听 常用的事件监听 DOM0级事件监听 DOM2级事件监听 onclick addEventListener
JavaScript事件处理
lesileqin的博客
01-05 4359
文章目录一、事件与事件处理概述（一）JavaScript常用事件（二）事件的调用1、在HTML中调用2、在JavaScript中调用（三）事件对象二、表单相关事件（一）获得焦点与失去焦点事件（二）失去焦点内容改变事件（三）表单提交与重置事件三、鼠标和键盘事件（一）鼠标单击事件（二）鼠标按下和松开事件（三）鼠标移入和移出事件（四）鼠标移动事件（五）键盘事件四、页面事件（一）加载与卸载事件（二）页面大...
JavaScript事件流（冒泡、捕获）
apple_54470279的博客
04-23 2292
总结：实际开发中，事件冒泡用的会更多，事件捕获一般用在特殊情况下。利用事件委托可以有效的提高程序性能。DOM2 Events 规范将事件流分为三个阶段：事件捕获、到达目标、事件冒泡。并规定事件捕获阶段不触发目标事件，而事件冒泡阶段会在目标事件被触发后执行。但现在的浏览器并没有按照这个规定来实现事件流，在事件捕获阶段的终点，任然还是会触发目标事件，所以对于现在的浏览器而言，不管是捕获还是冒泡，目标事件都会被触发。
javaScript事件三要素
weixin_50351355的博客
06-28 1182
无
JavaScript常用事件
weixin_52754604的博客
11-20 1750
JavaScript事件
JavaScript事件 鼠标事件
LILI_JU88的博客
03-29 3385
JavaScript事件，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说，有下面这些代 表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等。 鼠标事件，就是用鼠标完成的交互动作，鼠标事件是 Web 开发中最常用的事件类型 鼠标事件类型 鼠标点击事件包括4个：click（单机）dblclick（双击）、mousedown（按下） 和 mouseup（松开），其中click件类型比...
JavaScript 事件处理
YanHSama的博客
02-19 2400
事件处理 1、事件概述 事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。 事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为，并执行相应的事件处理程序的过程。 事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。 事件流的传播顺序解决方案：网景（Netscape）提出了“事件捕获方式”...
JavaScript 事件系统
10-29
今天比较系统都学习了 JavaScript 的事件系统。
JavaScript事件机制
08-30
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发⽣时执⾏，⽐如当⽤户点击某个 HTML 元素时。
Affair:JavaScript 事件库
06-02
事务轻量级 JavaScript 事件库，基于 Backbone.js Events，但没有 Underscore.js得到它bower install affair应用程序接口on - object.on(event, callback, [context]) -别名为： bindoff - object.off([event], ...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 114
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 196
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 756
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3详细讲解
贫僧法号依平
05-15 855
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼不同路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值