前端小知识点扫盲笔记记录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

```

总结

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

posted @ 2023-03-28 10:53 前端导师歌谣阅读(4) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端小知识点扫盲笔记记录9

· 前端小知识点扫盲笔记记录8

· 前端一点小技巧

· 前端和后端介绍、浏览器访问全过程、HTTP协议以及协议请求和响应格式、HTML介绍及常用标签介绍

· 1. 前端简单介绍

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

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

前言

事件委托

事件循环

从浏览器地址栏输入url

代理模式

使用代理模式预加载图片

冒泡排序算法

删除数组的制定下标元素

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

总结

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<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>

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

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

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

前言

事件委托

事件循环

从浏览器地址栏输入url

代理模式

使用代理模式预加载图片

冒泡排序算法

删除数组的制定下标元素

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

总结

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识