js通过innerHTML添加元素点击事件

原创 已于 2024-05-10 10:28:12 修改 · 886 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

于 2024-05-10 10:18:38 首次发布

 往id为aa的元素里添加一个按钮

<div id="aa"></div>
let sertNode = document.getElementById('aa')

//示范处理一下变量必须为字符串
let name = JSON.stringify('aa')
let herf = JSON.stringify('bb')
aa.innerHTML="<button onclick='toClick("+name+','+herf+")' ></button>"

window.toClick =function(name,herf){
    console.log(name,herf)
}

以点击为例了解JavaScript中HTML DOM事件
m0_70117514的博客
05-13 869
文章目录 目录 文章目录 前言 事件 点击示例如下： 用调用函数的方法处理 HTML事件属性 示例 使用 HTML DOM 来分配事件 事件三要素 示例如下 示例2 HTML 事件的其他例子 前言 大家好，我是遇见ice。 个人主页：遇见ice的博客 本文主要是以点击事件为例，讲了一些关于事件的知识，其他事件例子下次再讲啦。 走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。学一点，就会进步一点，大家一起加油呀！笔芯 事件 事件是用户与浏...
js点击事件
weixin_46143360的博客
10-22 578
js点击事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-3.4.1.min.js"></script> <script> function test(){ alert("js事件")
javaScript点击按钮innerHTML字符串拼接
weixin_52309490的博客
04-04 1216
*{ padding: 0; margin: 0; } div{ width: 50px; margin: 0 auto; } button{ cursor: pointer; } ul{ margin-top: 5px; list-style:
Vue中动态拼接innerHTML时添加点击事件，并在点击事件中调用vue方法
BADAO_LIUMANG_QIZHI的博客
04-13 6762
场景 在VUE页面中动态生成某个弹窗的innerHTML的内容。 内容中添加一个button，并设置Button的点击事件， 在点击事件中能调用vue的方法。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、innerHTML的内容如下 str =`
弹框里innerHtml加入的html绑定点击事件
notagoodwriter的博客
12-10 1731
弹框里innerHtml加入的html绑定点击事件
innerHtml click事件
Lydia420的博客
07-26 2161
Vue innerHtml click事件 vue项目中使用G6作为展示拓扑图的库 在使用tooltip时，想在tooltip中添加点击事件，由于tooltip返回内容使用的是innerHtml，所以methods中的方法不能直接引用 解决方法如下： 标签中使用click事件，使用模板函数传参 //事件 getContent: e => { const outDiv = document.createElement('div') outDiv.style.width = 'fit-cont
js点击事件触发不了，innerHTML也出错
何子的博客
02-10 2231
js 给元素添加点击事件的方法
最新发布
滴水石穿
03-17 869
在 JavaScript 里，为元素添加点击事件有多种方法，下面为你介绍三种常见的方式。
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
10-18
以下是一个基于事件委托实现动态添加元素事件功能的示例： ```html <!DOCTYPE html> <title>JS动态添加事件 <li class="out-li">123 <li class="out-li">123 <li class="out-li">123 添加 var ...
js生成动态表格并为每个单元格添加单击事件的方法
10-26
在JavaScript中，我们可以通过为元素的单击事件绑定一个事件处理函数来响应用户的点击行为。 ### JavaScript代码实现 在提供的代码片段中，使用了`getElementById`方法来获取页面上的表格元素，然后通过`document....
调用innerHTML之后onclick失效问题的解决方法
09-04
调用innerHTML之后，onclick失效了，这也是在意料之中的，因为innerHTML是以文本形式插入的button，所以无法识别onclick事件
JS如何实现动态添加的元素绑定事件
10-16
在动态添加元素时，通过插入带有唯一标识符的元素，并在事件处理函数中使用这个唯一标识符来识别被点击的元素。 示例代码中，使用了onclick属性直接在HTML标签内绑定事件处理函数： ```javascript ()">添加工作经历...
js动态添加onclick事件可传参数与不传参数
10-25
总结来说，在JavaScript中动态添加onclick事件并传递参数，可以通过匿名函数、闭包或者jQuery的`.click()`方法来实现。这些方法允许我们在不同的场景下灵活地处理参数传递的问题，从而更好地控制元素的行为。在实际...
JavaScript实现动态添加Form表单元素的方法示例
10-19
本文将详细介绍如何利用JavaScript实现动态添加表单元素，并提供一个具体示例，涉及的主要函数包括`getElementById()`、`parentNode`、`cloneNode()`、`removeAttribute()`、`innerHTML`以及`appendChild()`。...
innerHTML里面的标签绑定事件
刘小飞
04-11 9130
我们想要给innerHTML里的标签绑定事件的话，我想到的办法就是利用事件委托的方法，事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。 首先是我们要获得innerHTML里面的内容或者是给父元素绑定事件。 在下面的例子中比如 innerHTML中有一个img标签当我们点击img时console出他的属性       (click)="bigPic(msg.co
innerHtml动态生成button并绑定事件
Megamind_HL的博客
12-21 5602
innerHtml动态生成button并绑定事件的详细功能实现
JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素
Tinywan
09-30 439
&#13; 一、使用事件委托 一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/tit
JS中innerHTML动态绑定的事件丢失
DreamFJ的博客
05-15 566
转自：https://blog.csdn.net/qq_41818857/article/details/103752612
JavaScript HTML DOM 事件
梁辰兴的博客
02-24 611
这就好比你跟网页之间有了一种互动的方式，当网页上发生某些特定的事情时，JavaScript 就可以做点什么来回应。比如说，当用户在 HTML 元素上点击的时候，我们就可以让 JavaScript 做点有趣的事情。比如说，当用户改变了输入字段的内容时，我们就可以调用一个函数来检查输入的内容是否正确。事件很有用，比如我们可以用它来检测访问者的浏览器类型和浏览器版本，然后根据这些信息来加载网页的正确版本。就是一个事件属性，它表示当用户点击的时候会触发后面的 JavaScript 代码。
js创建元素并添加点击事件
02-27
在JavaScript中创建元素并为其添加点击事件是一个常见的操作。下面是详细的步骤： ### 创建元素 首先，你需要通过`document.createElement()`方法来创建一个新的DOM节点。 ```javascript // 创建一个 <div> 元素 let newDiv = document.createElement("div"); // 给新创建的 div 添加一些内容 newDiv.innerHTML = "Click me!"; ``` ### 设置样式或其他属性（可选） 你可以设置该元素的一些初始样式、类名等信息，这一步并非必需但是通常会这样做以满足设计需求。 ```javascript newDiv.className = 'my-class'; newDiv.style.width = '100px'; newDiv.style.height = '50px'; newDiv.style.backgroundColor = '#ddd'; ``` ### 添加到页面中 接下来将这个新的元素插入到文档流里。这里我们选择将其直接附加给 body 标签作为子元素。 ```javascript document.body.appendChild(newDiv); ``` ### 为元素绑定点击事件 最后就是重点了——为目标元素添加监听器，以便当用户单击它时触发某些动作。可以使用 `addEventListener()` 方法来进行注册。 ```javascript newDiv.addEventListener('click', function(event) { alert('You clicked the box!'); }); ``` 以上就完成了一个简单的例子，在实际应用中你可能会想要执行更复杂的任务而不是仅仅弹出一条消息框。比如更新UI界面状态或是发起网络请求等等。 #### 完整示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Create Element Example</title> <style>.my-class { margin: auto; text-align:center;line-height:50px;font-size:24px}</style> <script type="text/javascript"> window.onload = function(){ // 创建一个 <div> 元素 let newDiv = document.createElement("div"); // 赋予其文本及外观特性 newDiv.innerHTML = "Click Me"; newDiv.className = 'my-class'; newDiv.style.width = '200px'; newDiv.style.height = '70px'; newDiv.style.backgroundColor = '#f96'; // 插入至body下成为子级项 document.body.appendChild(newDiv); // 注册点击响应处理程序 newDiv.addEventListener('click', () => { console.log('The custom element has been clicked.'); // 可在此处加入更多业务逻辑... }); }; </script> </head> <body> </body> </html> ``` 现在你应该已经了解如何利用 JavaScript 动态地生成 HTML 元素并且能够有效地管理它们的行为啦！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值