2021-05-09 验证:多个DOM2级同名鼠标事件不会相互覆盖,而行内绑定和动态绑定会覆盖

最新推荐文章于 2023-04-14 21:36:33 发布

前端OnTheRun

最新推荐文章于 2023-04-14 21:36:33 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/116435211

本文总结了DOM2级事件处理的特点：不同名事件不会相互覆盖；行内绑定的多个onclick只会执行第一个；动态绑定的同名事件只会执行最后一个。在DOM2级事件中，同名点击事件的所有输出语句都能正常执行，不存在覆盖现象。

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

<input type="button" value="我是DOM 0级事件" id="btn0" onmousedown="fn0()" onclick="fn1()" onclick="fn2()"><br>
<input type=

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端OnTheRun

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Javascript 事件

qq_42839746的博客

09-14

1243

JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

m0_67266787的博客

02-24

975

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

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

html js点击事假,第十五节: JavaScript 事件及事件绑定

weixin_39928686的博客

07-01

348

1. 事件理解1.1 什么是事件事件是用户或浏览器自身执行的某个动作，诸如点击click，JavaScript制作交互效果，离不开事件。所谓的事件，就是用户的某个行为，能够触发一个函数的执行1.2 绑定事件绑定:oDiv.onclick = function(){}这个匿名函数，平时永远不会执行，必须等到事件的发生才执行。响应某个时间的函数叫做事假处理程序，通常我们俗称为事件处理函数，事件的处理程...

事件处理~

学无止境

11-01

529

事件处理的基本概念

JavaScriptDOM

bbdRzzz的博客

11-16

1936

JavaScriptDOM

js实现给dom重复添加事件，不覆盖事件

pgLi

05-05

2154

var addLicenseFnNotOverride = function(dom,event,fn){ //字符串处理，去掉'on' var evString = event.substr(0,2); if(evString == 'on'){ event = event.substr(2); } //浏览器兼容性处理 if(wi...

2021-09-28

奋斗的小鸟

09-28

317

vue，v3初始化项目，eslint配置 ●安装node及npm(node --version,npm --version查看是否安装成功，成功会出现版本信息) ●npm i --global@vue/cli（-global 意思是全局安装这羊Vue会安装到安装node 的文件夹下否则会安装到当前目录，vue-V查看版本信息） ●vue create mydemo(项目名)：默认Vue2上下键可选择vue3或者Manually select features手动自己选择功...

ihtml2document能不能根据id获取dom_javascript-DOM操作

weixin_39890517的博客

11-19

153

第一章 API介绍 API是一种事先定义好的函数，用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。 Web API接口：浏览器提供的一系列操作浏览器功能和页面元素的API(BOM和DOM)第二章 DOM(文档对象模型)2.1基本概念 DOM:(Document Object Model)文档对象模型。当网页被加载时，浏览器会创建文档对...

v-model语法糖，ref和$refs(vue操作dom)，$nextTick使用，dynamic动态组件，自定义指令

GW05431的博客

12-03

1237

v-model本质上是 value属性和input事件的一层包装v-model的作用：提供数据的双向绑定数据发生了改变，页面会自动变 v-bind:value页面输入改变，数据会自动变化 v-on:inputv-model是语法糖， v-model等价于给一个input框提供了 :value属性以及 @input事件很显然如果每次使用input框，都需要提供value和input事件，比较麻烦，所以使用v-model我们经常遇到一种场景：父组件提供一个数据给子组件使用（父传子）子组件又需要修改父组件传

JS-WebAPIs-DOM基础

Fky_mie的博客

03-07

1177

JS-WebAPIs第1天-DOM 参考: pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新） MDN-Web API接口参考文档对象模型文章目录JS-WebAPIs第1天-DOMWeb APIs 和JS基础的关联性一. 什么是DOM(Document Object Model)二. 事件-获取页面元素当事件源2.1 document.getElementById()根

JavaScript三种事件绑定的方式(DOM的0级、2级、3级事件处理程序)

"✧treasure mountain✧"

03-08

9991

JS事件绑定的方式： ①、行内绑定 ②、动态绑定 ③、事件监听一、行内绑定【DOM0级事件处理程序】：例：<标签属性列表事件=”事件的处理程序” /> 虽然可以完成需要的功能但其把结构+样式+行为都绑定在同一个标签中不利于后期维护二、动态绑定【DOM0级事件处理程序】：例：dom对象.事件 = 事件的处理程序(通常是一个匿名函数) 将一个函数赋值给一个事件处理程序属性 ...

2021-08-23 nodejs中设置cookie的步骤

GAARA

08-23

2509

1.安装cookie-parser: 命令:npm install cookie-parser --save 2.引入 var express = require("express"); var cookieParser = require("cookie-parser"); var app = new express(); 3.设置中间件 app.use(cookieParser()); 设置和读取cookie app.get('/', function(req, res) { console

2023-04-14 使用纯JS实现一个2048小游戏

GAARA

04-14

2502

一.实现思路 1.2048的逻辑 2.移动操作的过程中会有三种情况二.代码部分:分为初始化部分和移动部分 1.初始化部分 1.1.生成第一个方块: 1.2.生成第二个方块: 2.移动过程部分: 三.实现代码 1.HTML部分 2.CSS部分 3.JS部分 3.1.game对象的属性 3.2.game对象的start方法 3.3.game对象的randomNum方法 3.4.game对象的dataView方法 3.5.game对象的isGameOver方法 3.6.game对象中设置移动的方法(以左移动为例

2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框

GAARA

01-26

1082

1.什么是单例模式? 介绍单例模式是最简单的设计模式之一,属于创建型模式,单例模式提供了一种创建对象的最佳方式特点 -单例模式的类(单例类)只有一个实例对象这个单例对象必须由单例类创建单例类对外提供一个访问这个单例的全局访问点结构单例类:包含一个实例且能自行创建这个实例的类访问类:使用单例的类 2.如何实现一个单例模式? 思路通过单例模式的特点:一个类只有一个实例, 先判断实例存在与否, 若存在,则直接返回若不存在,则创建了再返回 *在JS中单例作为一个命名空间提供者,从全局命名空

2021-06-12 event.target的定义和它与this的区别

GAARA

06-12

849

什么是event.target.value? event 常用event(或eve,e等等)来接收事件对象 event.target 事件对象作为对象,有其属性和方法,其中target属性的作用是获取触发事件的目标,即绑定事件的元素 event.target.value 获得当前元素target属性的属性值总结: event.value获取的是当前的(点击移动等等)事件)元素 event.target.value获取的是当前元素输入(或选择)的值 event.target和this的区别是什么? 区别:

2021-06-28 可设置中奖人数的随机不重复抽奖

GAARA

06-28

720

1.动态创建ul下的li节点并让其文本内容为每个候选名字 2.定时器中随机获取的每个li名字输出到页面 3.当获取的名字等于带=待获取的中奖人数的数量时清除定时器

2021-05-03 逻辑运算符的表达式的值

GAARA

05-03

692

1.与逻辑运算符: a&&b 当a不为0时,表达式的值为b 当a为0时,表达式的值为0 举例: var a1=0,a2=3,b=6; console.log(a1&&b,a2&&b);//0 6 &nb

2021-06-23 自由落体运动,抛物线运动和缓冲运动的实现

GAARA

06-23

623

目录思路:代码思路: 1.小球落下:设置绝对定位,定时器中改变其top值 2.运动停止:设置目标值,达到目标值时清除定时器 3.回弹:单次方向到头时究竟器反向运动并缩小上限代码 html: <input type="button" value="点击开始"> <div style="width: 111px;height: 111px;border-radius:50%;background:red;position:absolute"></div> js: let

2021-06-14 localStorage统计鼠标点击次数(网页重开可继续统计)

GAARA

06-14

587

html: <p><button onclick="clickCounter()" type="button">点我!</button></p> <div id="result"></div> js: var result = document.getElementById("result"); function clickCounter() { if (localStorage.cli

vue 根据Dom结构获取对象

最新发布

03-21

<think>好的，用户想了解在Vue中如何根据DOM结构获取对象的方法。首先，我需要回忆Vue中获取DOM元素的几种常见方式。根据提供的引用内容，主要有两种方法：使用$refs和直接通过$el的querySelector方法。首先，关于$refs方法，这在Vue2和Vue3中都是常用的。在模板中给元素或组件添加ref属性，然后通过this.$refs访问。例如，在Vue2中，可以在mounted钩子中获取对应的DOM元素或组件实例。而Vue3的组合式API中，需要使用ref函数创建响应式引用，并在模板中绑定同名的ref属性。需要注意的是，在setup函数或<script setup>中，需要在组件挂载后才能访问到DOM元素，因此通常在onMounted钩子中进行操作。其次，通过$el属性。每个Vue组件实例都有一个$el属性，指向根DOM元素。可以通过这个属性的querySelector或querySelectorAll方法来查找子元素。例如，this.$el.querySelector('.class')可以获取到组件根元素下符合条件的第一个子元素。这种方法适用于需要根据类名、标签名等选择器来查找元素的情况，但可能在复杂的DOM结构中不够精确，容易受到结构变化的影响。接下来，需要比较这两种方法的优缺点。使用$refs更加直接和明确，尤其是在组件嵌套较深或需要获取特定子组件时更为方便，且代码可读性更好。而通过$el的querySelector方法则适用于需要动态查找元素的情况，或者当无法直接为元素添加ref属性时。但后者可能增加维护成本，因为DOM结构的变化可能导致选择器失效。然后，考虑用户可能的实际应用场景。比如，在表单验证中需要聚焦某个输入框，或者在动画效果中操作特定元素。这时候使用$refs会更合适，因为它直接指向目标元素，减少出错的可能。而如果是遍历某个区域内的所有子元素，可能需要使用querySelectorAll。另外，需要提醒用户在Vue3中的变化。Vue3的组合式API使用ref函数来创建引用，并且由于setup的执行时机较早，必须在onMounted之后才能确保DOM元素已经渲染完成。这一点和Vue2的mounted钩子类似，但语法上有所不同，用户需要注意。还需要注意，引用中的示例代码展示了Vue2和Vue3的具体写法。例如，在Vue3的<script setup>语法中，如何声明和使用ref，以及如何在模板中绑定。同时，要强调ref在模板中的名称必须与声明的变量名一致，否则无法正确引用。最后，总结几种方法，给出清晰的步骤和示例，帮助用户理解不同场景下的选择。确保示例代码正确，语法符合要求，比如使用$...$格式的行内代码和$$...$$的独立公式（虽然这里可能不太需要数学公式，但按照系统指令，如果有变量或代码块需正确标注）。同时，生成相关问题，帮助用户进一步学习，比如性能比较、最佳实践或常见错误等。</think>在Vue中获取DOM对象主要有以下两种方法，均符合Vue响应式设计原则： ### 一、通过$refs获取（推荐方式） 1. **原生DOM元素** 模板中定义`ref`属性： ```html <template> <div ref="myDiv">Hello Vue</div> </template> ``` 脚本中通过组件实例访问： ```javascript // Vue2选项式API mounted() { console.log(this.$refs.myDiv) // 输出DOM对象[^2] } // Vue3组合式API import { onMounted } from 'vue' setup() { const myDiv = ref(null) onMounted(() => { console.log(myDiv.value) // 输出DOM对象[^3] }) return { myDiv } } ``` 2. **组件实例** 同样适用`ref`属性，但获取的是组件实例而非DOM： ```html <MyComponent ref="childComp" /> ``` 通过`this.$refs.childComp`可调用子组件方法[^1] ### 二、通过$el查询使用根元素查询子元素： ```javascript mounted() { // 获取第一个匹配的span元素 const spanEl = this.$el.querySelector('span') // 获取所有按钮元素 const buttons = this.$el.querySelectorAll('button') } ``` 此方法需注意：`$el`指向当前组件的根DOM元素[^1] $$ \text{选择建议} = \begin{cases} \text{精确获取} & \Rightarrow \text{优先使用refs} \\ \text{动态查询} & \Rightarrow \text{使用querySelector} \end{cases} $$