HTML前端EventListener

最新推荐文章于 2022-09-06 01:26:47 发布
最新推荐文章于 2022-09-06 01:26:47 发布
阅读量690 收藏
点赞数
文章标签： HTML 前端 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014080486/article/details/99833158
版权

在HTML文档对象DOM有个添加某个元素事件监听EventListener对象里的addEventListener() 方法，执行这个方法是有一定的讲究的，即方法的执行与元素的加载时序是有一定的先后的，正常情况是先加载元素，然后再执行调用

如下图的前端代码是错误的,单击按钮装不起作用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>练习addEventListener调用</title>
     <script>
               document.getElementById("btn").addEventListener("click", EventListener);
               function EventListener() {
                   window.alert("调用成功");
               }
    </script>
</head>
<body>
    <input id="btn" type="button" value="button" />
</body>
</html>

如果改为下面的代码，即JS代码置于元素后，则可以成功能执行

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>练习addEventListener调用</title>
</head>
<body>
    <input id="btn" type="button" value="button" />

     <script>
               document.getElementById("btn").addEventListener("click", EventListener);
               function EventListener() {
                   window.alert("调用成功");
               }
    </script>
</body>
</html>

 

综上所述，HTML事件的执行是跟文档元素的顺序是有一定的关系的

_早起的虫子被鸟吃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FB.js:一个强大的库，用于控制网站的前端和后端
03-16
FB.js是一个开放源代码JavaScript库，用于控制网站的前端和后端。 用法 要使用FB.js，请下载fb- {version} .min.js文件。 您还需要将其包含在网页的头部： < head > <!-- ... --> < script type =...
HTML-事件(Event)的总结
Mazy's Blog
06-27 2061
HTML 与 JavaScript 的交互是通过事件来处理的，当用户或浏览器操纵页面时。事件就会发生。使用事件来执行 JavaScript 编码的响应每个HTML元素有一定的事件可以触发 JavaScript 代码比如： 加载页面、点击按钮、关闭窗口介绍几个常见的事件类型onclick 事件类型 这是最常用的事件类型，当用户点击鼠标左按钮。你可以把你的验证、警告等反对这个事件类型。 支持该事件的
基于WebStorm记录得HTML--Event事件
zgz102928的博客
01-26 760
1.1 事件 事件：是可以被js检测到的行为，实质上是一种交互操作。 例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发某个函数。 事件的作用： (1)各个元素之间可以借助事件来进行交互 (2)用户和页面之间也可以通过事件来交互 (3)后端和页面之间也可以通过事件来交互（减缓服务器的压力） ps：注...
Cocos2d-x 3.X 事件分发机制
weixin_34240520的博客
06-15 174
介绍 Cocos2d-X 3.X 引入了一种新的响应用户事件的机制。 涉及三个基本的方面： Event listeners 封装你的事件处理代码 Event dispatcher 向 listener 分发用户事件 Event 对象 包含关于事件的信息 为了响应事件，首先你要创建一个 EventListener，有五种不同的 EventListener. EventLis...
HTML事件(HTML Event)学习
wmqdn的专栏
05-04 2033
HTML 4.0中引入了事件处理机制，允许HTML页面在特定事件发生时触发用户代理执行指定的脚本动作(JavaScript,VBScript,Tcl等)。 用户代理：User Agent, 客户端用来实现某种网络协议/功能的应用程序。对于Web服务的普通用户，用户代理一般指浏览器。 元素：HTML Element, HTML文档的基本构成单元，如HTML/HEADER/BODY/TABLE/I
vue框架的vm.$listeners、v-on=“$listeners“和vm.$attrs、v-bind=“$attrs“的使用
qq_37734787的博客
12-30 1236
vm.listeners包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="listeners包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners" 传入内部组件——在创建更高层次的组件时非常有用。 父组件 <子组件 @itemBack="handleCancel" @do-action=
HTML5的九宫格抽奖.rar
07-27
在这个项目中，JavaScript可能使用了事件监听器（event listener）来捕捉用户的点击事件，当用户点击某个格子时，触发抽奖过程。中奖概率的设置可能通过随机数生成算法实现，根据预设的概率数组决定是否中奖。此外，...
CSS3实现褶皱带效果.zip
11-17
例如，使用`eventListener`监听用户的行为，然后执行相应的CSS变化。 为了实现这个效果，你需要创建HTML结构，定义CSS样式，可能还需要编写一些JavaScript代码。在HTML中，你可以创建一个具有特定类名的元素，然后...
H5前端_高级实战案例_图片（相册）展示设计Ⅳ（css）.rar
11-01
例如，可以使用事件监听器（event listener）来响应用户的点击行为，展示或隐藏图片详情，或者实现图片轮播功能。通过AJAX，可以异步加载更多的图片，提高页面加载速度。另外，可以利用JavaScript库如jQuery或Vue.js...
基于HTML5实现的带左右箭头可拖动幻灯片特效源码.zip
11-09
可能使用了事件监听器（event listener）来捕捉用户的操作，然后通过修改元素的CSS属性或者改变数组中的索引来实现幻灯片的切换。JavaScript库如jQuery或更现代的框架如React、Vue或Angular也可能被用来简化DOM操作...
html事件监听函数,事件——监听函数
weixin_35439783的博客
06-05 1113
监听函数浏览器的事件模型，就是通过监听函数(listener)对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式(event-driven)的主要编程方式。JavaScript 有三种方法，可以为事件绑定监听函数。HTML 的 on- 属性HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。上面代码为body节点的load事件、div节点的c...
html dom listener,HTML DOM addEventListener() 方法
weixin_29035147的博客
07-02 223
HTML DOM addEventListener() 方法document.addEventListener()方法将事件处理程序附加到文档。使用document.removeEventListener()方法删除与addEventListener()方法一起附加的事件处理程序。语法：document.addEventListener(event,listener,useCapture)示例...
getEventListener
handsomeAndHero的博客
09-06 1594
js 移除匿名事件方法
HTML DOM EventListener 事件监听器--简单使用说明
pzz799的博客
06-21 1851
addEventListener() 方法 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 使用示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt
html的event事件
u011626697的博客
11-14 946
onstart: 在 marquee 对象的每次循环开始时触发。 onstop: 当用户单击停止按钮或离开 Web 页面时触发。 onload: 在浏览器完成对象的装载后立即触发。 onunload: 在对象卸载前立即触发。 onbeforeunload: 在页面将要被卸载前触发。 onshow: 在窗体实际显示之前瞬间触发 onhide: 隐藏窗体时触发 online: on...
详解js中EventListener监听器（事件委托/事件代理）
m0_46862838的博客
05-11 4337
监听器： 语法：**addEventListener(event,function,userCapture)**方法 第一个参数写事件句柄，不需要加"on",直接写时间名就可以（如：click） 第二个参数是事件触发后调用的函数 第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选值，默认值为false，即冒泡传递，当值为true时，为捕获传递 触发监听器事件: //第二个参数写匿名函数 <button id="btn"></button> <script> do
Spring源码-事件监听机制（@EventListener实现方式）
热门推荐
it_lihongmin的博客
11-06 2万+
在看@EventListener之前需要先知道 继承EventListener方式在底层是怎么实现了，可以参见前一篇博客Spring源码-事件监听机制（实现EventListener接口）。 先梳理一下，首先Ioc容器启动的时候，ApplicationContext的refresh模板方法中，initApplicationEventMulticaster()方法中那个初始化了Sim...
理解JavaScript中的事件处理
大巧不工
07-02 1532
什么是事件？事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。 通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。 今天的事件在漫长的演变史，我们已经告别了内嵌
事件监听Event listener
chonger_feifei的博客
03-08 1648
事件监听Event listener
EventListener
最新发布
09-22
使用@EventListener注解可以实现事件监听。在方法上添加@EventListener注解，并传入需要监听的事件类型，当该事件发生时，方法会被触发执行。另外，还可以使用ApplicationListener接口来监听事件，实现该接口并重写...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值