事件委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件委托</title> </head> <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> </html>
事件循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件循环</title> </head> <body> <!-- js的事件循环，每次读取一个任务，然后执行这个任务，执行完再继续获取下一个， 如果暂时没有任务，就暂停执行，等待下一个任务到来；如果在执行任务的过程中有新的任务到达 ，也不会中断现有任务的执行，而是添加到队列的尾部等待 --> </body> </html>
从浏览器地址栏输入url
// 1 输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。 // 2强缓存。 // 协商缓存。 // 3DNS 域名解析。（字节面试被虐后，是时候搞懂 DNS 了） // TCP 连接。 // 4总是要问：为什么需要三次握手，两次不行吗？其实这是由 TCP 的自身特点可靠传输决定的。 // 客户端和服务端要进行可靠传输，那么就需要确认双方的接收和发送能力。第一次握手可以确认客服端的发送能力， // 第二次握手，确认了服务端的发送能力和接收能力，所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。 // 5http 请求。 // 6服务器处理请求并返回 HTTP 报文。 // 7浏览器渲染页面。
