HTML-JavaScript-onclick与addEventlistener的使用以及优缺点

最新推荐文章于 2024-04-05 19:25:27 发布
VIP文章 最新推荐文章于 2024-04-05 19:25:27 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： HTML html的交互式行为 JavaScript运用 文章标签： html JavaScript 事件属性onclick&addEventListener
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41772997/article/details/79794724
版权

2018.04.02
author：wills

在html的具有交互功能的标签，比如button标签，或者type为botton的input的标签，它们都可以绑定属性，onclick，当这个按钮被点击时就触发事件。下面是一个简单的网页上添加内容的html文档代码。

先看效果图，这是初始状态，
这里写图片描述
现在我往里面加如其它内容
这里写图片描述
这里我就向网页上添加了三个额外的内容
下面还可以点击删掉不想要的内容
这里写图片描述

这里我删掉了任意两项内容，那么这些功能是怎么实现的呢？下面看代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>我喜欢的妹子</h1>
        <hr><!--一根水平直线-->
        <!--这里先把界面的样子搭起来，示例代码就不写样式表了           
        a标签里面href写JavaScript：void（0）表示默认啥也不做-->
        <ul id="girl">

            <li
最低0.47元/天 解锁文章
披星戴月观日
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS中onclick与addEventListener的区别详解
01-08
一、onclick： 1.onclick添加事件：  语法： element.onclick = function (){};  实例如下： 点我 var box1 = document.getElementById(box1); box1.onclick = function(){ console.log(我是第一个); } ...
html点击按钮数字加一
热门推荐
qq_44756004的博客
04-04 1万+
重点在于将按钮和函数联系起来 这里使用onclick调用add（）函数 代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>作業</title> </head> <body> <but...
html中onclick的作用,为什么在HTML中使用onclick()是一种糟糕的做法 - 收获啦
weixin_35626408的博客
07-09 895
如果使用jQuery，那么：HTML：linkJS：$(document).ready(function(){$("#openMap").click(function(){popup('/map/',300,300,'map');returnfalse;});});这有没有JS，或者如果用户中间点击链接的好处。这也意味着我可以通过再次重写来处理通用弹出窗口：HTML：linkJS：$(d...
addEventListener() 和 onclick 的区别
最新发布
2301_79111443的博客
04-05 568
我们经常会看到有关。
addEventListener与onclick的区别
qq_44473483的博客
06-30 6889
在js中一直使用的addEventListener，依稀记得是看视频时老师说的这个好些，但也一直不明白两者之间的优缺点和联系，今天整理了下，对两者进行简单分析。 1.addEventListener可以对同一个元素绑定多个事件，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个事件，如有多个，后面的事件会覆盖前面的事件。 document.getElementById("myDIV").addEventListener("click", function() { alert(1) });
JS-addEventListener方法介绍
态度决定一切
10-12 904
addEventListener 接受三个参数，最后一个参数为boolean值：true，事件处理程序以捕捉模式触发；从顶层的父节点开始触发事件，从外到内传播。false，事件处理程序以冒泡模式触发；从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。兼容：IE8以前的浏览器只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。IE9就支持addEventListener。Event.sto
[译] addEventListener 与 onclick，孰优孰劣？
weixin_34296641的博客
05-26 89
原文出处：addEventListener vs onclick 之所以会想到这个话题，是因为在回顾自己之前写的为 button 动态绑定事件的函数时，脑海里忽然浮现出了一个问题：addEventListener 方法，与 onclick="" 相比，各有哪些优点和缺点呢？于是用关键字“StackOverflow addEventLis...
paste-html-to-govspeak:JavaScript事件将粘贴HTML转换为govspeak
05-01
... 安装 通过NPM（推荐） 通过NPM或Yarn将此项目添加到您的...使用捆绑器（例如Webpack） import { pasteListener } from 'paste-html-to-govspeak' element . addEventListener ( 'paste' , pasteListener ) 没有
drag-n-drop::pushpin:原生使用JavaScript创建的拖放看板
05-08
由于事件侦听器位于.card内的.column ，因此在第一次更新HTML之后，它们将与DOM分离。 这意味着它们将不再被触发，因此它们将不会获得应用缩放效果的.dragging类。 要解决此问题，您要做的就是从文档中委派事件侦听...
javascript attachEvent和addEventListener使用方法
10-30
attachEvent与addEventListener区别适应的浏览器版本不同，同时在使用的过程中要注意
26、addEventListener()和onClick()的区别
y_xiuzhu的博客
03-18 786
26.1 结论 onclick事件在同一时间只能指向唯一对象 addEventListener给一个事件注册多个listener addEventListener对任何DOM都是有效的，而onclick仅限于HTML addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除 IE9使用attachEvent和detachEvent 26.3 实例 addEventListener
在html中搜索按钮事件,html中<button>绑定点击事件的几种方法介绍
weixin_34177886的博客
06-04 4131
HTML中为button绑定事件的方式有三种。例如以下标签： submit 一、使用jquery进行绑定$('#btn_submit').click(function(){});二、使用原生js绑定，(注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 这类浏览器版本要使用 atta...
前端ajax数据提交到服务器_ajax都有哪些优点和缺点
weixin_39789979的博客
11-20 45
ajax的优点1、最大的一点是页面无刷新，用户的体验非常好。2、使用异步方式与服务器通信，具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术，不需要下载插件或者...
为什么html里面的onclick函数后面要加()，而js里面不需要？
weixin_33913377的博客
12-29 2063
原文链接：https://segmentfault.com/q/10... 我自己做了一下测试。 这个是在html里面直接绑定onclick事件，我打印了onclick，结果让我有些吃惊。 这是一个onclick函数，fn()则是在函数内部，所以当触发了onclick事件的时候，onclick函数就执行，这时候因为fn在onclic...
EventBus3.0源码简析
养生阿华田
08-28 275
本文主要通过源码讲解EventBus的内部实现，如果还没有使用过该框架的朋友，可以先参考这篇文章 Android事件总线（一）EventBus3.0用法全解析
javascript与onclick的使用
悟空非空也
06-03 2580
&amp;lt;a href="javascript:if(confirm('确认是否删除此新闻？')) location='路径    '  "&amp;gt;删除&amp;lt;/a&amp;gt;注意点a标签本身 就是一个点击事件，所以不需要写 onclick=注意 location=' 字符串 '   引号千万不要忘了  ；&amp;lt;button type="button" onclick="addNews();" cla...
cocos2d js-3.2 PageView的简单使用
巴黎的妖
07-27 2309
PageView在GUITest中可以看到相关的示例代码，简单的使用代码如下： [javascript] view plaincopy var PageViewScene = cc.Scene.extend({       pageView : null,       pageIdx : 0,       onEnter:function 
JavaScript中使用addEventListener实现事件监听
HelloWorld小码农的博客
10-11 938
视频地址： JavaScript中使用addEventListener实现事件监听 更多精彩内容，敬请扫码关注（HelloWorld小码农）：  
onclick 与addeventlistener区别
05-13
`onclick` 是一个 HTML 元素属性，用于指定该元素被点击时执行的 JavaScript 代码。例如： ```html <button onclick="alert('Hello, World!')">Click Me</button> ``` `addEventListener` 是一个 JavaScript 方法，用于将事件处理程序添加到指定元素。它可以用于添加多个事件处理程序，并且不会覆盖已存在的事件处理程序。例如： ```javascript const button = document.querySelector('button'); button.addEventListener('click', function() { alert('Hello, World!'); }); ``` 因此，`onclick` 和 `addEventListener` 的区别在于它们的用法和功能。`onclick` 只能添加一个事件处理程序，而 `addEventListener` 可以添加多个事件处理程序。另外，`addEventListener` 还可以用于添加其他类型的事件处理程序，例如 `mouseover`、`keydown` 等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值