代码编织梦想

  项目实战中页面批量使用input标签,并在在其标签上绑定相同的点击事件,运行中发现导致页面十分卡顿,绑定的事件也出现紊乱,性能十分的差.这时我们就想到div标签比input标签更好?于是,就有人想在div中使用contenteditable属性不就好了,哈哈,当你在重新运行页面时发现页面比以前更卡顿,电脑的小风扇也转的呼呼的.

  这是因为你在div中使用contenteditable 属性,就相当于在div标签中嵌套input标签,所以这就是性能更差的原因.那我们该如何解决这种情况,我们可以在其绑定在很多的input标签中事件中可以将事件绑定在他的父元素上,可以使用事件委托,解决这个问题,只在父元素绑定一个事件,将绑定在子元素上的传递到父元素上.

事件委托是利用事件的冒泡原理来实现的,比如我们平时在给div中的input添加事件的时候,我们都是通过for循环一个个添加,如果input很多个的话,其实就有点占内存了,但如果每个input中都绑定点击事件,页面就会导致页面十分卡顿的原因,这个时候可以用 事件代理来优化性能.

代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id = 'ulid' onclick='clickfunc()'>
        <input type="text" value="第1个input"/>第1个input
        <input type="text" value="第2个input"/>第2个input
        <input type="text" value="第3个input"/>第3个input
        <input type="text" value="第4个input"/>第4个input
        <input type="text" value="第5个input"/>第5个input
    </div>

    <script>
        function clickfunc(ev) {
            var ev = ev || window.event;
            var oLi = ev.srcElement || ev.target;
            if(oLi.nodeName.toLowerCase() == 'input'){
                alert(oLi.value)
            }      
        }
      
    </script>
</body>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/c2576835312/article/details/127158122

github前端面试题2_itskhdu的博客-爱代码爱编程

2016/7/20 GitHub qiudeqing/ FEinterview: 收集的前端面试题和答案 https://github.com/qiudeqing/ FEinterview 1/38 收集的前端面试题和答案 img update 2 years ago README.md fix article origin a year ago qiu‐

分享收集的一大波前端面试题和答案_mountain08的博客-爱代码爱编程

FE-interview $HTML, HTTP,web综合问题 常见排序算法的时间复杂度,空间复杂度前端需要注意哪些SEOweb开发中会话跟踪的方法有哪些<img>的title和alt有什么区别doctype是什么,举例常见doctype及特点HTML全局属性(global attribute)有哪些什么是web语义化,有什么好处

2019年底前的web前端面试题初级-web标准应付HR大多面试问题-爱代码爱编程

作者 | Jeskson来源 | 达达前端小酒馆 问:你知道在css中,html的标签元素分多少中不同的类型吗? 答:大体可分三种:1,块状元素,2,内联元素,3,内联块状元素 块级元素:就是每个块级元素都是从新的一行开始的,并且后面的元素也是另起一行的。 元素的高度,宽度,行高,顶和底边距是可以设置的。 元素宽度在不设置的情况,它的本身父容

常用技术总结与选型-爱代码爱编程

本文的目的是列举一些常用的技术,然后讲解一下不同技术的特点,进而延展出来如何选型 前端 界面展示 HTML HTML称为超文本标记语言,是一种标识性的语言,他主要的功能是定义文件的结构,通常和CSS以及JS一起使用。HTML定义了网页内容的含义和结构,这里需要强调一点,HTML、CSS和JS本身的目的并不相同,CSS描述一个网页的表现与展示效果,J

HTML和CSS-爱代码爱编程

web的组成: w3c (World Wide Web Consortium)万维网联盟ECMA(European Computer Manufactures Association)欧洲计算机制造商联合会HTML(HyperText Markup Language)超文本标记语言xml可拓展标记语言 结构: html(xhtml,xml

c事件和委托的区别_谈谈React事件机制和未来(react-events)-爱代码爱编程

当我们在组件上设置事件处理器时,React并不会在该DOM元素上直接绑定事件处理器. React内部自定义了一套事件系统,在这个系统上统一进行事件订阅和分发. 具体来讲,React利用事件委托机制在Document上统一监听DOM事件,再根据触发的target将事件分发到具体的组件实例。另外上面e是一个合成事件对象(Synthetic

前端面试题-爱代码爱编程

转载请注明出处: https://github.com/qiu-deqing/FE-interview Table of Contents generated with DocToc FE-interview [KaTeX parse error: Expected 'EOF', got '#' at position 22: …HTTP

html5做简介页面,html简介-爱代码爱编程

1基础了解 浏览器 我们听过很多浏览器,如IE,QQ,360,火狐,谷歌,但是程序员实际使用中建议IE高版本或者火狐或谷歌,不推荐QQ和360 编辑器 用来写代码,编辑器视频推荐sublime 2 HTML(超文本标记语言) 我们对网页右键,查看源代码,会发现很多内容,这就是我们要写的内容 我们掌握了标记,就基本掌握了语言了,标记就是li

HTML讲解-爱代码爱编程

1.html5的新特性 文件类型声明(<!DOCTYPE>)仅有一型:<!DOCTYPE HTML>。 新的解析顺序:不再基于SGML。 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 语意化更好的内容元素:article、footer、header、nav、section; 表单控件:calendar、