DOM事件中的几种常见问题

最新推荐文章于 2022-05-25 21:41:45 发布
最新推荐文章于 2022-05-25 21:41:45 发布
阅读量268 收藏 2
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dimuzero/article/details/110585006
版权

1.利用index计数

避免了函数的闭包问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list {
            list-style: none;
        }

        .li {
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
            margin-left: 10px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="li">0</li>
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="li">3</li>
        <li class="li">4</li>
    </ul>
    <script>
        var li = document.querySelectorAll('.li')
        for (var i = 0; i < li.length; i++) {
            li[i].index = i			//每一个类的index属性都来接收i的值方便计数
            li[i].onclick = function () {
                console.log(this.index);
            }
        }
    </script>
</body>
</html>

2.点击事件重置属性

避免了for循环的使用，节省了时间空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            box-sizing: border-box;
            border: 1px solid transparent;
            outline: none;
        }

        .ck {
            border: 1px solid rgb(185, 5, 5);
        }
    </style>
</head>
<body>
    <button class="btn ck">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <script>
        var btn = document.getElementsByClassName('btn')
        var saveBtn = null	//创建空变量
        saveBtn = btn[0]	//第一个元素有ck这个类
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                saveBtn.classList.remove('ck')	//删除第一个元素的ck类
                this.classList.add('ck')	//点击元素获得ck类
                saveBtn = this				//把获得ck类的值赋给saveBtn以便于下次删除
            }
        }
    </script>
</body>
</html>

3.创建动态元素（鼠标移入显示，移出消失）

必须在外面创建空变量来接收创建的新变量，不能在事件内创建变量接收，否则鼠标移出失效，局部变量无法在移出事件内取到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box')
        var newElement = null		//外部创建空变量来接收新创建的元素
        box.onmouseenter = function () {
            newElement = document.createElement('div')
            newElement.style.width = 50 + 'px'
            newElement.style.height = 50 + 'px'
            newElement.style.backgroundColor = 'red'
            box.append(newElement)
        }
        box.onmouseleave = function () {
            newElement.remove()
        }
    </script>
</body>
</html>

4.事件委托

两个获取目标元素的方法
event.target
event.srcElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var list = document.querySelector('.list')
        list.onclick = function (e) {
            if (e.target.nodeName.toLowerCase() == "li") {
                console.log('1');
            }
        }
    </script>
</body>
</html>
XUPT-前端在逃工程师
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js DOM的事件常见操作实例详解
10-15
事件委托是另一种常见的优化策略，通过在父元素上监听事件，利用事件冒泡机制处理子元素的事件。 总之，JavaScript DOM事件是实现网页动态效果和用户交互的关键。理解事件源、事件和事件处理程序的关系，以及如何...
JavaScriptDOM(六)鼠标事件
qq_48315043的博客
12-02 910
一、鼠标事件的常用方法 鼠标是计算机的一种输入设备，也是计算机显示系统纵横坐标定位的指示器，所以鼠标事件是Web开发中最常用的一类事件。常见的鼠标事件如下表所示： 事件名称 事件触发时机 onclick 单击鼠标左键时触发 onfocus 获得鼠标指针焦点触发 onblur 失去鼠标指针焦点触发 onmouseover
同一个dom元素下 单击事件覆盖双击事件的解决方法
u013269298的博客
09-21 1475
再写js的时候发现一个问题：  $("#button1").on("dbclick",function(){ //双击事件 }).on("click",function(){ //单击事件 }); 遇到如上情况的话单击事件会将双击事件覆盖掉,在网上找到一个解决方法,实验后可行： var clickTimes=0; //记录点击次数 $("#but
监听Dom节点失焦触发方法的几个思路
前端小记
02-23 2698
之前接触一个需求是点击弹出一个弹窗，再点击页面空白地方弹窗消失，类似这个： 点击按钮出现一个dom节点，既可以再点击dom节点关闭也可以点击页面其他部分关闭，点击页面其他部分关闭的时候就用到了失焦触发这个方法。 但是一般情况下，onblur事件只在input等元素中才有，而div是没有的。 如果想让div也能拥有失焦方法，只能通过其他事件来达到类似onBlur的方法。 1.用防抖实现鼠标移出DIV消失 利...
DOM绑定点击事件操作中的常见问题
hcx的博客
04-08 237
1、注意getelement后面加了s，代表含有多个元素，所以是个类集合 2、绑定事件后要表达该绑定的元素需要用this
DOM编程和JS书写中的一些报错
m0_71073278的博客
05-25 1806
1.获取元素的css： 获取标签的高: <body> <p class="myp">一个段落<br>一个段落<br>一个段落<br>一个段落<br>一个段落<br>一个段落<br> 一个段落<br>一个段落一个段落一个段落一个段落<br>一个段落一个段落 一个段落一个段落<br>一个段落<br>一个段落<br>一个段落</p> <
jQuery 删除/替换DOM元素的几种方式
10-25
本文将详细介绍jQuery中删除和替换DOM元素的几种方法。 **删除DOM元素** 删除操作主要使用`remove()`方法。这个方法非常直观，允许你直接从DOM树中移除选中的元素。以下是一个基本的示例： ```javascript $('a')....
JavaScript Dom 绑定事件操作实例详解
10-16
以下是对JavaScript DOM绑定事件的详细讲解，包括几种常见的绑定方式及其应用场景。 1. **直接在HTML中绑定事件** 这是最基础的事件绑定方式，直接在HTML元素的属性中指定事件处理函数。 ```html (this)'> ``` ...
React中常见的动画实现的几种方式
08-28
React 中常见的动画实现的几种方式 React 作为前端开发框架，提出了虚拟 DOM 概念，所有 DOM 的变化都先发生在虚拟 DOM 上，通过 DOM diff 来分析网页的实际变化，然后反映在真实 DOM 上，从而极大地提升网页性能。...
DOM基础教程之事件类型
09-03
在示例代码中，展示了`onmousedown`(鼠标按下)，`onmouseover`(鼠标移入)，`onmouseup`(鼠标抬起)，`onmouseout`(鼠标移出)和`onclick`(鼠标单击)以及`ondblclick`(鼠标双击)这几种常见事件。`button`属性用于识别...
DOM的一些常见问题
weixin_30517001的博客
04-06 201
1.一个元素的child会包含空格，会以文本节点的形式展现。 所以我们如果用原生javascript最好使用firstElementChild或者lastElementChild来获取相应的元素节点。 2.原生DOM操作insertBefore方法的使用 var first_li = ul.firstElementChild.cloneNode(true), last_...
DOM 遇到的问题 及解决方法
V-LEG的游戏开发专栏
02-21 1538
1. var img=document.createElement("img"); img.src="2.png"; 我以为能这样使用:var img=document.createElement("img").src="2.png"; 结果是不能那样使用
JavaScript学习5：DOM（注册事件、删除事件、DOM事件流、事件对象、事件委托、鼠标键盘事件）
qq_43819274的博客
03-01 249
JS——事件高级 文章目录JS——事件高级一、注册事件（绑定事件）二、删除事件（解绑事件）三、DOM事件流四、事件对象（重要） 一、注册事件（绑定事件） 注册事件有两种方式：传统方式和方法监听注册方式 方法监听注册方式：（重要） 同一个元素 同一个事件可以添加多个事件处理程序 attachEvent()：ie9以前，尽量不用 二、删除事件（解绑事件） 传统方式删除事件：divs[0].onclick = null; removeEventListener删除事件：divs[1].removeEven
Dom动态添加事件，不能使用循环变量的问题
飞扬_柳絮的专栏
08-09 873
代码示例：<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <ul class="examp
DOM事件大全
哈哈哈
08-21 5501
1.事件：js与html的交互就是通过事件 的，观察者模式 2.事件流：从页面中接收事件的顺序 IE：:事件冒泡流，事件冒泡，事件从最具体的元素接收，然后逐级向上传播，主流浏览器都支持 Netscape：事件捕获流，从最不具体的节点向下逐级传播到最具体的节点 Explorer浏览器只支持冒泡事件，Mozilla，Opera7和Konqueror两者都支持。而更古老的opera和
Initialize failed: invalid dom.——带你深入因操作dom不当带来的错误
热门推荐
不经一翻彻骨寒，怎得梅花扑鼻香
12-29 10万+
浏览器控制台报错，初始化失败，不合法的dom(Initialize failed: invalid dom.) 此类错误的原因通常是因为试图操作一个未就绪的dom(或未被创建，或未完全加载等等)。
JavaScript的DOM之鼠标悬浮事件
m0_50481455的博客
04-21 1万+
JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理： 就是当鼠标在这块区域时候会触发相应事件，将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬浮事件onmouseover()和onmouseout()事件</tit
vue监听dom事件
最新发布
02-21
在Vue中，可以使用`v-on`指令来监听＊＊＊元素上添加`v-on`或`@`指令，可以绑定一个事件监听器，当指定的事件触发时，相应的方法将被调用。 以下是Vue监听DOM事件的几种常见方式： 1. 直接在模板中绑定事件监听器： ```html <button v-on:click="handleClick">点击我</button> ``` ```javascript methods: { handleClick() { // 处理点击事件的逻辑 } } ``` 2. 使用方法引用的方式绑定事件监听器： ```html <button @click="handleClick">点击我</button> ``` ```javascript methods: { handleClick() { // 处理点击事件的逻辑 } } ``` 3. 传递参数给事件处理方法： ```html <button @click="handleClick('参数')">点击我</button> ``` ```javascript methods: { handleClick(param) { // 处理点击事件的逻辑，可以使用传递的参数 } } ``` 4. 使用内联语句处理事件： ```html <button @click="count++">点击我</button> <p>点击次数：{{ count }}</p> ``` ```javascript data() { return { count: 0 } } ``` 以上是几种常见的Vue监听DOM事件的方式，你可以根据具体的需求选择适合的方式来处理事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值