前端小知识点扫盲笔记记录5

简介: 前端小知识点扫盲笔记记录5

前言

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结


事件委托

```




事件委托


<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>
    <script>
        // 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
        // ul有一万个li 进行事件绑定
        // var itemli = document.getElementsByTagName('li')
        // for (var i = 0; i < itemli.length; i++) {
        //  itemli[i].onclick = (function (n) {
        //      return function () {
        //          console.log(n + itemli[n].innerHTML)
        //      }
        //  })(i)
        // }
        var ul = document.querySelector('ul')
        ul.onclick = function (e) {
            e = e || window.event //这一行及下一行是为兼容IE8及以下版本
            var target = e.target || e.srcElement
            if (target.tagName.toLowerCase() === 'li') {
                var li = this.querySelectorAll('li')
                index = Array.prototype.indexOf.call(li, target)
                alert(target.innerHTML + index)
            }
        }
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('点我应有弹框!');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
        // 点击下面的li变红
    </script>
</body>



事件循环

```




事件循环


```


从浏览器地址栏输入url

// 1 输入 URL 后解析出协议、主机、端口、路径等信息,并构造一个 HTTP 请求。 // 2强缓存。 // 协商缓存。 // 3DNS 域名解析。(字节面试被虐后,是时候搞懂 DNS 了) // TCP 连接。 // 4总是要问:为什么需要三次握手,两次不行吗?其实这是由 TCP 的自身特点可靠传输决定的。 // 客户端和服务端要进行可靠传输,那么就需要确认双方的接收和发送能力。第一次握手可以确认客服端的发送能力, // 第二次握手,确认了服务端的发送能力和接收能力,所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。 // 5http 请求。 // 6服务器处理请求并返回 HTTP 报文。 // 7浏览器渲染页面。


代理模式

```




代理模式


```


使用代理模式预加载图片

```




使用代理模式加载图片


```


冒泡排序算法

```




Document


```


删除数组的制定下标元素

```




删除数组的指定下标元素


```


前端this指向问题解决方案apply

```




前端this指向问题普通函数apply


```


总结

我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣



相关文章
|
消息中间件 存储 监控
云消息队列 RocketMQ 版(原ONS)体验
云消息队列 RocketMQ 版(原ONS)是阿里云基于 Apache RocketMQ 构建的低延迟、高并发、高可用、高可靠的分布式“消息、事件、流”统一处理平台。它在阿里集团内部业务、阿里云以及开源社区中得到广泛应用。最新的版本进一步优化了高可靠低延迟的特性,并提供了多场景容灾解决方案,使其成为金融级业务消息的首选方案。由于专业及能力问题,本次我只能从产品功能体验方面进行简单的一些分析。
1889 64
|
传感器 数据采集 机器学习/深度学习
利用Auto-Encoder技术去除传感器噪声,提高预测准确性
利用Auto-Encoder技术去除传感器噪声,提高预测准确性
|
12月前
|
存储 数据可视化 网络协议
什么是ELK栈?如何与Spring Boot一起使用?
什么是ELK栈?如何与Spring Boot一起使用?
522 0
|
消息中间件 存储 网络协议
拼多多面试:Netty如何解决粘包问题?
粘包和拆包问题也叫做粘包和半包问题,**它是指在数据传输时,接收方未能正常读取到一条完整数据的情况(只读取了部分数据,或多读取到了另一条数据的情况)就叫做粘包或拆包问题。** 从严格意义上来说,粘包问题和拆包问题属于两个不同的问题,接下来我们分别来看。 ## 1.粘包问题 粘包问题是指在网络通信中,发送方连续发送的多个小数据包被接收方一次性接收的现象。这可能是因为底层传输层协议(如 TCP)会将多个小数据包合并成一个大的数据块进行传输,导致接收方在接收数据时一次性接收了多个数据包,造成粘连。 例如以下案例,正常情况下客户端发送了两条消息,分别为“ABC”和“DEF”,那么接收端也应该收到两
137 0
拼多多面试:Netty如何解决粘包问题?
|
安全 Linux 网络安全
在Linux中,VPN,常见有哪几种?
在Linux中,VPN,常见有哪几种?
|
存储 网络协议
计算机基础之MB、Mb、MBps、Mbps
计算机基础之MB、Mb、MBps、Mbps
|
Shell 网络安全 UED
|
存储 数据库 索引
B树与B+树区别
B树与B+树区别
3269 1
idea 2020.2及2020.3版本的安装和激活
idea 2020.2及2020.3版本的安装和激活
8969 3
|
安全 Unix 网络安全
Permission Denied原因及解决方法
Permission Denied原因及解决方法
4645 0