javascript添加HTML事件处理程序的两种方式学习

最新推荐文章于 2024-02-02 13:53:19 发布
最新推荐文章于 2024-02-02 13:53:19 发布
阅读量198 收藏
点赞数
分类专栏： web前端 文章标签： onclick
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bcbobo21cn/article/details/118005874
版权

以按钮单击事件为例；

可以直接在button元素的onclick属性中直接执行javascript代码；示例代码和结果如下图；

也可以在onclick属性中指定要调用的函数；示例代码和结果如下图；

在onclick属性中直接写javascript代码时，如果使用this，此this指按钮本身；示例代码和结果如下图；

在onclick属性中直接写javascript代码时，可以输入执行多行，以分号隔开；示例代码和结果如下图；

 

bcbobo21cn
关注
专栏目录
JavaScript事件处理的两种常用方法
wildyuhao的博客
09-05 335
JS进行事件处理的两种常用办法在标签属性值中添加事件在js中通过对特定id添加事件 在标签属性值中添加事件 标签属性值οnclick="fun(this)"调用参数，传入this，在script框里 编写function fun(a){a.style.color = “green”}再通过传入的this对标签属性值修改。 <body> <h2 onclick="fun(this)">2级标题1</h2> </body> <script>
javaScript事件（二）事件处理程序
weixin_34032792的博客
11-01 115
一、事件 二、事件流 以上内容见：javaScript事件（一）事件流 三、事件处理程序 前面提到，事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（也叫事件处理函数、事件句柄）。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。...
javascript事件和事件处理
aofan9566的博客
09-09 117
于js期间事件处理被分成三个步骤： 1.发生事件 2.启动事件处理程序 3.事件处理程序做出反应 事件处理程序的调用 1.在javascript中 在javascript中调用事件处理程序，首先要获得要处理对象的引用，然后将要运行的处理函数赋值给相应的事件 2.在html中 在html中分配事件处理程序，仅仅须要在html标记中加入对应的事件，并在当中指定要运行的...
什么是事件？如何调用事件处理程序？
最新发布
zy1992As的博客
02-02 149
采用事件驱动是JavaScript语言的一个最基本的特征。所谓事件，是指用户在访问页面时执行的操作。当浏览器探测到一个事件(例如，单击鼠标动作)时可以触发与这个事件相关联的JavaScript对象。说到事件就不得不提到“事件处理”。事件处理是指与事件关联的JavaScript对象，当与页面特定部分关联的事件发生时，事件处理器就会被调用。事件处理的过程通常分为三步，具体步骤如下。●发生事件。●启动事件处理程序。●事件处理程序作出反应。
【js学习笔记-092】-----事件处理程序的调用
Will 的专栏
02-07 1442
事件处理程序的调用 接下来会详细介绍事件处理程序的调用，说明事件处理程序的参数，调用上下文、调用作用域和事件处理程序返回值的意义。遗憾的是，这些内容中的一部分在IE8及以前版本中和其他浏览器中是同的   事件处理程序的参数 调用事件处理程序时把事件对象作为它们的一个参数。事件对象的属性提供了有关事件的详细信息。例如type属性指定了发生的事件类型。 有IE8及以前版本中，通过设置全局对象
JavaScript事件处理的方式(三种)
11-25
JavaScript事件处理程序有三种常见的添加方式： 1. HTML事件处理程序：这是最直观的方式，直接在HTML元素中通过属性（如`onclick`）绑定事件处理函数。但这种方式将JavaScript逻辑嵌入HTML，导致代码耦合度高，不...
JavaScript中为事件指定处理程序的五种方式分析
10-18
本文将详细分析JavaScript中指定事件处理程序的五种常用方式。 首先，需要了解的是事件流的概念。事件流描述的是当事件发生时，事件是如何在DOM树中传播的。常见的有事件冒泡和事件捕获两种方式。事件冒泡是指从最...
浅谈Javascript事件处理程序的几种方式
10-28
这里有两种主要的JavaScript指定事件处理程序的方式： 1. DOM0级事件处理程序：这是JavaScript中的简单事件绑定，直接在元素对象上设置事件属性。例如： ```javascript var btn = document.getElementById("mybtn...
JavaScript 事件流、事件处理程序及事件对象总结
10-20
DOM0级事件处理程序是通过JavaScript指定事件处理程序的传统方式，即将一个函数赋值给元素的事件处理程序属性，如btn.onclick = function(){}。这种方式添加的事件处理程序会在冒泡阶段被处理，而且作用域与当前元素...
JavaWeb高级开发技术第一章答案
qq_68149578的博客
05-21 2686
本文讲解了web开发技术答案
【JavaWeb】第1章测试题 网页开发基础
qq_62778934的博客
10-23 2161
javaweb第一章习题
html如何设置自动点击事件,使用javascript给html元素添加click事件
weixin_31491059的博客
06-02 8580
使用javascript给html元素添加click事件在html给元素添加事件我们通常情况下的代码是这样的直接给元素添加点击事件，我们使用onclick方法。我们也可能通过javascript给元素动态添加事件，根据不同的场景有多种给元素添加点击事件的方法。1.直接在html tag标签中添加onclick事件2.使用js DOM获取元素添加方法document.getElementById("...
js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件
qq_45554167的博客
08-10 6658
文章目录 前言 一、场景需求还原 二、代码示例 1.引入JQuery库 2.代码示例 一：HTML中div标签部分 二：HTML中script标签部分 三：JS文件部分 总结 前言 本篇文章中讲的是在js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件。本篇文章是针对在写静态页面时需要时而更新部分列表代码，转而使用js来存储一个列表数据能方便更新列表数据而写的。 提示：以下是本篇文章正文内容，下面案例可供参考 一、场景需求还原 比如说，这里...
html添加js点击事件,js添加绑定事件的方法
weixin_39638929的博客
06-29 1349
先介绍js添加事件通用方法，具体内容如下测试添加事件：firefox使用addEventListener,ie使用attachEvent点击此p标签，绑定了2个弹出事件function test1() {alert("test1");}function test2(){alert("test2");}//添加事件通用方法function addEvent(element,e,fn) {//fire...
在javascript或者jQuery中绑定按钮点击事件，和在HTML 标签中直接调用onclick属性有什么区别？
evil_tomato的博客
04-06 8792
RT，做Web开发经常能遇到需要给一个按钮绑定一个点击事件的情况。 例如HTML标签： button type="submit" id="foo">Barbutton> 第一种，如果使用jQuery绑定点击事件的一种做法是： $("#foo").click(function(event) { /* Act on the event */}); 第二种，纯js的做法可以是这
html语言添加点击事件,在JavaScript中如何添加点击事件？
weixin_39877166的博客
05-30 1514
事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫事件处理程序。事件处理程序的名字以“on”开头，比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。JavaScript中添加点击事件的方法：一：HTML中添加onclick哈哈二：JS中定义函数绑定事件var funcc = fun...
html底部代码_Javascript事件处理程序（HTML事件处理程序）
weixin_39871162的博客
11-27 125
事件就是用户或浏览器自身执行的某种动作。如 click、load 和 mouseover，都是事件的名字。 而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头，因此 click 事件的事件处理程序就是 onclick，load 事件的事件处理程序就是 onload。为事件指定处理程序的方式有好几种。(选自《javascript高级程序设计》)Javascrip...
javascript事件处理程序的调用
skye_95的博客
07-22 2587
事件处理程序可以是人任意的javascript语句，但是通常使用特定的自定义函数function来对事件进行处理。在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的是事件来指定事件处理程序，指定方式主要有以下两种： 在html中 在html中分配事件处理程序，只需要在html标签中添加相应的事件，并在其中指定要执行的代码或是函数名即可。 指定执行的代码示例如下： &lt;!DO...
js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
weixin_29229055的博客
06-03 2915
//已存在div//创建标签function createpage(){var span=document.createElement('span')span.innerHTML=“测试span”//设置属性span.setAttribute("class","gopage");var pagenum=document.getElementById("pagenum")pagenum.append...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值