原生JS总结-- JS 绑定点击事件

最新推荐文章于 2025-05-20 11:34:40 发布

@codeDo

最新推荐文章于 2025-05-20 11:34:40 发布

阅读量2w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： js笔记

本文链接：https://blog.youkuaiyun.com/qq_33505829/article/details/90603759

js笔记专栏收录该内容

65 篇文章

订阅专栏

博客介绍了两种点击事件。一是addEventListener，若父元素也有点击事件，使用该事件会触发父元素点击事件，需进行阻止；二是onclick。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：addEventListener:

let tn = document.getElementById('btn');

tn.addEventListener('click', function(e) {  
   e.stopPropagation();//取消事件冒泡
 })

如果父元素也有点击事件，这个会触发父元素的点击事件，需要阻止一下。

第二种：onclick

 let tn = document.getElementById('btn');

tn.onclick = function(e) {

    //点击事件
    e.stopPropagation(); // 阻止冒泡到父级的点击事件
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@codeDo

关注关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript给按钮绑定点击事件（onclick）的方法

12-29

本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下：我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> [removed] function displayDate() { document.getElementById(demo)[removed]=Date(); } [removed] </head> <body> <h1>My First JavaScript</h1> <p id=demo>This is a paragraph.</

原生JS写点击事件

nostrud ipsum6

07-10

6390

varallClick=document.getElementById("all1"); //JS监听 allClick.addEventListener('click',function(){ varbolcheck=this.checked; varobox=this.parentNode; varlis=obox.children[2].getEl...

参与评论您还未登录，请先登录后发表或查看评论

js绑定事件

最新发布

qq_34629527的博客

05-20

292

‌父元素代理‌：在父元素上监听目标事件（如 click），通过 event.target 识别实际触发事件的子元素并执行逻辑。‌事件类型‌：仅支持会冒泡的事件（如 click），不适用于 focus、blur 等无冒泡机制的事件。事件委托是一种通过‌事件冒泡机制‌，将子元素的事件处理统一绑定到父元素的优化技术。‌事件冒泡‌：当子元素触发事件时，事件会‌从触发元素逐层向上传递至父元素‌，直至文档根节点。‌阻止事件冒泡‌：若子元素调用 e.stopPropagation()，事件委托将失效。

原生js给一个元素绑定click事件（三种实现方法）

本人小可爱

09-06

870

原生js点击事件/原生js取随机值

wnwmxes的博客

12-14

410

<!DOCTYPE html>   <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <b...

JS-:原生JavaScript动画组件库

05-27

JavaScript的事件模型包括捕获、冒泡和直接绑定，理解这些概念对于创建响应式动画至关重要。 6. **动画库的架构**：一个原生JavaScript动画组件库可能包含模块化的设计，如使用ES6的模块系统，以及面向对象的编程...

原生js ---- ueditor富文本编辑器实例

10-17

总结起来，"原生js ---- ueditor富文本编辑器实例"展示了如何在不依赖其他库的情况下，利用ueditor创建一个功能完善的富文本编辑器。通过这个实例，开发者不仅可以学习到如何使用ueditor的基本功能，还能了解到如何...

vue.js绑定事件监听器示例【基于v-on事件绑定】

10-18

Vue.js 的 `v-on` 指令不仅可以绑定原生DOM事件，如 `click`、`mouseover` 和 `keydown`，还可以与自定义组件事件一起使用。此外，我们可以通过使用`.stop`、`.prevent`、`.capture`、`.self`和`.once`修饰符来改变...

vue实现在v-html的html字符串中绑定事件

10-16

要实现点击事件在v-html插入的HTML字符串中的按钮上工作，可以使用原生JavaScript的事件监听方法。这里介绍两种主要的方法来实现该功能：事件委托和直接绑定事件监听器。首先，介绍事件委托方法，适用于动态添加的...

浅谈Vue.js 组件中的v-on绑定自定义事件理解

10-18

总结来说，通过v-on绑定自定义事件，Vue.js允许开发者在组件间建立清晰的事件驱动机制，从而使得组件可以相互通信和协作。在处理组件间的事件监听和触发时，理解Vue的事件接口及其与浏览器原生事件系统的不同是很...

原生js 注册点击事件的方法

逆风优雅的博客

06-15

1万+

原生js 注册点击事件的方法

js(jquery)绑定点击事件

热门推荐

美丽的泡沫

07-22

2万+

test 第一种 $("#test").click(function(event) { /* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false); 第三种 html

js原生点击事件三种写法

weixin_51070638的博客

06-27

5603

【代码】js原生点击事件三种写法。

原生JS点击事件(点击对应的标签可以改变其背景颜色)

wujiancai1163的博客

01-11

4184

点击对应的标签可以改变其背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...

原生Js事件绑定的三种方式

aishui9393的博客

07-11

1673

html标签事件绑定：属性赋值，这个在该元素的properties属性中可以查到，也可以在事件监听中看到 function show(){ 　　console.log('show'); } function print(){ 　　console.log('print'); } <button onclick="show()" id="btn1"...

原生JS创建一个对象里面的点击事件、addEventlistener()方法，事件监听

林中明月间丶

07-12

8228

addEventListener()方法，即为事件监听；可以使用removeEventListener()方法来移除事件的监听。 element 可以是 window、document、oDiv 等 //语法: element.addEventListener(event,function,Boolean); // 其中第一个参数是事件的类型（如'click 或 'mousedown'） // 第二个参数是事件触发后调用的函数。 // 第三个参数是个布尔值用于描述事件是冒.

原生js绑定事件的方法和dom操作

weixin_58385666的博客

09-14

4928

元素选择器.addEventListener(事件名（click,keydown...）, 回调函数, true捕获/false冒泡);绑定事件的第三种方法是用addEventListener()或者attachEvent()来绑定事件监听函数。1.行内绑定：在标签上写onclick=“事件名”2.在script中绑定。3.绑定事件监听函数。

原生JS中常用的鼠标事件有哪些？

m0_64439351的博客

04-21

1075

鼠标常用事件

js原生绑定点击事件

01-10

### 绑定点击事件的方法在JavaScript中，可以通过多种方式来绑定点击事件。以下是几种常见的方法： #### 使用 `addEventListener` 方法这是推荐的方式之一，因为它允许添加多个监听器而不会覆盖现有的监听器。 ```javascript document.getElementById('myButton').addEventListener('click', function(event) { console.log('Button was clicked!'); }); ``` 这种方法不仅适用于按钮元素，也适合其他类型的HTML元素[^1]。 #### 直接设置 onclick 属性另一种简单直接的方式来处理点击事件是通过设定 HTML 元素的 `onclick` 属性。 ```html <button id="myButton" onclick="handleClick()">Click me</button> <script> function handleClick() { console.log('Button has been clicked'); } </script> ``` 这种方式虽然直观易懂，但在大型项目中不建议频繁使用，因为这会使得逻辑与视图紧密耦合。 #### 动态创建并附加事件处理器当需要动态地向页面中的新节点添加行为时，可以先获取这些节点再调用 `addEventListener`. ```javascript let button = document.createElement('button'); button.textContent = 'Dynamic Button'; document.body.appendChild(button); // Bind the click event after appending it into DOM tree. button.addEventListener('click', () => { alert('A dynamically created button got clicked.'); }); ``` 此代码片段展示了如何创建一个新的按钮，并在其被加入文档流之后立即为其绑定了一个点击事件监听器.