js Dom之事件

最新推荐文章于 2024-05-05 03:05:28 发布
最新推荐文章于 2024-05-05 03:05:28 发布
阅读量136 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzo12345/article/details/111658664
版权

一、dom元素添加事件

  • 直接在元素上绑定事件

  • 动态绑定事件

  • 用for循环添加事件

  • 使用事件监听添加事件

二、事件冒泡机制 

阻止事件冒泡

  • e.stopPropagation()
  • e.cancaelBubble = true;

三、事件捕获还是冒泡

四、事件的委托

自身的事件委托给其他元素执行

ul的事件，点击ul却不执行,点击ul下的li执行

五、事件对象

 

 

被操作的年轻人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js之DOM事件
m0_61547956的博客
04-22 3340
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
HTML DOM中添加事件方法（详解）
qq_59463562的博客
06-14 3668
简单必学的HTML事件方法
Dom（六） 事件操作
最新发布
2401_84092169的博客
05-05 661
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
DOM EventListener
qq_44095347的博客
09-06 175
addEventListener() 方法 用于向指定元素添加事件句柄，添加的事件句柄不会覆盖已经存在的事件句柄。 可以向一个元素添加多个事件句柄。 可以向任何DOM对象添加事件监听，不仅仅是HTML对象，如window对象。 可以更简单的控制事件（冒泡和获取）。 可以使用removeEventListener()方法来移除事件的监听。 语法 element.addEventListener(event, function,...
DOM事件绑定
weixin_62394768的博客
07-17 2117
通过设置HTML的onclick属性，可以绑定点击事件，属性内可以写简单的JavaScript代码。过去网页的交互相对较少，会在body标签上绑定onload事件，即页面加载完毕后做的事情。但是可以看到这种方式是有局限性的，写大量的JavaScript代码在里面肯定是不合理的。这种绑定事件的方式依然常用，但缺点是同一个事件在没有其他辅助条件下，只能绑定一个事件处理器。想要触发事件，就得先给DOM节点绑定事件，提供事件处理器。通过onclick就可以设置按钮的点击事件。...
【十四】JavaScript之DOM中的事件操作
Chimengmeng的博客
07-04 664
【十四】JavaScript之DOM中的事件操作 【1】事件操作 所谓的事件(Event),其实就是用户与浏览器之间的一次交互过程或交互行为。 例如：用户输入一段内容，用户鼠标晃动一下等等。 js中提供了大量的事件操作给开发者, 在用户发生事件操作以后，进行反馈，响应。 事件类型有很多，但是操作基本都是一样的，只是里面的代码因为事件的不同，而执行的方式，属性不同而已。 【2】...
深入理解JS DOM事件机制
10-21
JavaScript DOM事件机制是JavaScript与网页交互的核心部分，它定义了如何以及何时响应用户或脚本对HTML元素的交互。深入理解这一机制对于高效地编写网页动态效果和交互至关重要。 1. **事件流** - 事件流描述了...
js DOM的事件常见操作实例详解
10-15
JavaScript DOM事件是JavaScript编程中的核心部分，它使得用户与网页交互成为可能。DOM，即Document Object Model，是一种标准，用于表示HTML或XML文档的结构，并提供了与这些文档交互的方法。在JavaScript中，DOM...
JavaScript DOM 添加事件
10-30
是我在给库中添加事件的时候写的添加事件的方法！这个方法实现了跨浏览器之间的方法！
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
JQuery为页面Dom元素绑定事件及解除绑定方法
12-10
1、绑定事件 代码如下: $(‘#id’).bind(“click”,function(){ … }) 可一次性绑定多个事件 代码如下: $(‘#id’).bind(“click mouseover mouseout”,function(){ … }) 2、解除绑定 代码如下: $(‘#id’).unbind(“click”) 3、绑定一次 代码如下: $(‘#id’).one(“click”,function(){ … })
DOM事件机制
冰霜的博客
09-11 361
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
react笔记_08react中进行事件绑定
qq_43260366的博客
11-21 1522
使用行内方式进行事件绑定，在事件被触发时是直接调用，因此方法内的this指向为Window;在使用关键字或方法进行事件绑定，在事件被触发时是通过dom元素调用，因此方法内部的this指向为dom元素。
JavaScript绑定事件的方法[3种]
xyjikl
12-07 2321
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。 一. 在DOM元素中直接绑定 这里的DOM元素，可以理解为HTML标签。JavaSc
4、DoM事件流 事件委托、绑定事件
hzg_hou的博客
05-12 881
DOMLO绑定事件高低版本浏览器之间不存在任何的差异事件冒泡事件捕获处理程序(事件执行的代码)dom0事件及低级浏览器的dom2事件（没有第三个参数）都是只有冒泡，以后我们用的最多的也是冒泡，捕获几乎不用，高级浏览器的dom2事件可以根据第三个参数选择是捕获还是冒泡，一般我们都不写，默认是冒泡低版本浏览器DOML0事件写法中,阻止a标签默认行为通过 return false实现, 不支持preventDefault()
1：创建项目工程(1)
2401_84097436的博客
05-04 753
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript addEventListener()事件监听方法
weixin_30300225的博客
08-06 989
addEventListener()方法将事件处理程序附加到指定的元素。 addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。 您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。 您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。 addEvent...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
weixin_30639719的博客
08-09 145
动态创建元素的三种方式： 第一种： Document.write(); <body> <input type="button" id="btn" value="生成元素" onclick="f1()"/> <input type="text" value=""/> <script> document.write("这...
原生js中的事件委托(为新添加的DOM元素添加事件)
nuc_badaomen的博客
07-25 4404
原生js中的事件委托(为新添加的DOM元素添加事件) 作用： 事件委托可以为新添加的DOM元素动态的添加事件 js中的addEventListener方法 语法: document.addEventListener('click',function(event){ var target = event.target; //通过console.log(event)查看有tar
JavaScript DOM事件绑定详解
"本文档主要分析JavaScript中的DOM事件绑定，包括内联模型、脚本模型以及DOM2级事件模型，详细列举了各种常见的DOM事件，并介绍了DOM2级事件中`addEventListener()`和`removeEventListener()`方法的使用。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值