常用的两种事件绑定：

DOM0的事件绑定
btn.onclick = function(){}
btn.onclick = function(){} 写多个后面的会把前面的覆盖掉
原因：JS中对象如果有同名属性，后面的肯定会覆盖前面

DOM2的事件绑定：
btn.addEventListener(“click”,funciton(){})
btn.addEventListener(“click”,funciton(){}) 可以写多个监听器
原理：不是基于属性绑定，是基于事件池机制，放到池子中先执行

回调函数：(顾名思义）回头再调用

如果在一个函数中，写了一个函数，里面的函数叫回调函数。
addEventListener()是函数调用，但是你在它里面又写了函数funciton(){}
里面的函数声明，我们叫回调函数
看下面的代码：
window.setTimeout(function(){},1000);
//这里setTimeout()是函数调用，所以里面的function(){}函数声明是回调函数。

一部分的回调函数是异步代码：
btn.addEventListener(“click”,funciton(){})
上面的代码中的funciton(){}叫回调函数，它是放到的事件池中

问：此函数立即执行了吗？
答：没有
事件池中的函数，只有在合适的时机，才会执行，此处的合适时机指的是事件发生后。

/* 如果没有设置参考点，参考点就body */ position: absolute; /* 由于 dialog 设置了position: absolute; 此时dialog就可以作为参考点 */ top: 50%; left: 50%; width: 400px; height: 260px; background: #fff; margin-top: -130px; margin-left: -200px; border-radius: 5px; .dialog h3 { background-color: skyblue; text-align: center; height: 35px; line-height: 35px; .dialog div { margin: 20px 0 0 20px; .dialog input { width: 250px; height: 30px; border-radius: 3px; border: 1px solid #ccc; .dialog .comBtn { display: block; width: 100px; height: 30px; margin: 15px auto 0; .dialog span { position: absolute; top: 5px; right: 8px; font-size: 20px; font-weight: bold; cursor: pointer; </style> </head> <!-- 电影列表 --> <div class="box"> <button class="addBtn" id="addBtn">添加电影</button> <table> <thead> <th>电影名称</th> <th>领衔主演</th> <th>操作</th> </thead> <tbody> <td>AAA</td> <td>AAA</td> <!-- href="javascript:;" 用来阻止默认事件的 --> <td><a href="javascript:;">删除</a></td> <td>AAA</td> <td>AAA</td> <!-- href="javascript:;" 用来阻止默认事件的 --> <td><a href="javascript:;">删除</a></td> <td>AAA</td> <td>AAA</td> <!-- href="javascript:;" 用来阻止默认事件的 --> <td><a href="javascript:;">删除</a></td> </tbody> </table> <!-- 遮罩层 --> <div class="cover" id="cover"></div> <!-- dialog 弹框 --> <div class="dialog" id="dialog"> <h3>添加电影</h3> <label for="moveName">电影名称：</label> <input type="text" id="moveName" placeholder="请输入电影名称"> <label for="star">电影主演：</label> <input type="text" id="star" placeholder="请输入电影主演"> <button class="comBtn" id="comBtn">完成</button> <span class="close" id="close">X</span> <!----------------------------部分代码的说明------------------------------> <!--<script> var btn = document.getElementById("addBtn"); // 在JS中异步靠回调函数实现 // 以后，你看到一个回调函数，包含这个回调函数的那一片代码就有可能是异步代码 // setTimeout(function(){},1000) // 下面的事件绑定是异步代码 JS中的异步代码就那几个 // 现在我们就学习一个叫事件绑定 btn.addEventListener("click", function() { // DOM2的事件绑定 // 下面的代码我们也叫异步代码，也就是说同步还是异步，指的并不是回调函数 // 指的是事件绑定 btn.onclick = function() { console.log("你看我会执行吗？") </script>--> <script> let btn = document.getElementById("addBtn"); let cover = document.getElementById("cover"); let dialog = document.getElementById("dialog"); let close = document.getElementById("close"); let moveName = document.getElementById("moveName"); let star = document.getElementById("star"); let comBtn = document.getElementById("comBtn"); let as = document.getElementsByTagName("a"); let tbody = document.getElementsByTagName("tbody")[0]; // 点击添加电影按钮，显示遮罩层和模态框 btn.addEventListener("click",function () { // DOM2的事件绑定 cover.style.display = "block"; dialog.style.display = "block"; // 点击x，隐藏遮罩层和模态框 close.addEventListener("click",function () { cover.style.display = "none"; dialog.style.display = "none"; // 实现删除(不能实现后来添加的tr的删除) for (let i = 0; i < as.length; i++) { // 我们自己给a标签添加了一个事件 已经去掉了默认事件 as[i].addEventListener("click",function () { // console.log(window.confirm("你确定要删除吗？")); if(window.confirm("你确定要删除吗？")){ tbody.removeChild(this.parentElement.parentElement) // 添加电影 comBtn.addEventListener("click",function () { let str1 = moveName.value.trim(); let str2 = star.value.trim(); // 验证你输入的电影名和主演是否合法 .... if(str1 && str2){ // 1）创建tr var tr = document.createElement("tr"); tbody.appendChild(tr); // 2）创建td var td1 = document.createElement("td"); td1.innerHTML = str1; tr.appendChild(td1) var td2 = document.createElement("td"); td2.innerHTML = str2; tr.appendChild(td2) var td3 = document.createElement("td"); // <a href="javascript:;">删除</a> var a = document.createElement("a"); a.innerHTML = "删除" a.href = "javascript:;" // 给a标签的onclick属性赋值 使用addEventListener a.onclick = function(){ if (window.confirm("你确定要删除吗？")){ tbody.removeChild(this.parentElement.parentElement) td3.appendChild(a) tr.appendChild(td3) // 3）隐藏遮罩层和模态框 cover.style.display = "none"; dialog.style.display = "none"; }else{ alert("电影名和主演不能为空~") </script> </body> </html> [removed][removed] 同步 模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认 同步 执行 才是安全的。但这样如果js 中 有输出document内容、修改 dom 、重定向等行为，就会造成页面堵塞。所以一般建议把[removed]标签放在<body>结尾处，这样尽可能减少页面阻塞。 二：异步加载 异步加载又叫非阻塞加载，浏览器在下载 执行 j 写在前面：虽然平时做项目，但是发现自己写的 代码 还是很烂。最近接触了一个对性能要求比较高的项目，于是重新开始审视自己写的 代码 是不是达到尽量较小系统性能了。加上前几天学到express框架了解到了回调函数的操作。作为拓展，查了许多资料，再次总结一下javascript的异步操作。 javascript是一门单线程语言,即一次只能完成一个任务,若有多个任务要 执行 ,则必须排队按照队列来 执行 (前一个任务完成, addEventListener的基本用法 项目开发 中 ，javascript和html的解耦变得至关重要，我们被推荐使用 事件 动 态绑定的方式来处理按钮的 事件 。W3C为我们提供了addEventListener()函数用来为指定的 dom 元素动态绑定 事件 。这个函数有三个参数： type:用来设置 事件 类型，例如click。 listener:用来设置监听 事件 的函数，及type类型的 事件 发生后 执行 的函数。 大部分情况下，确切的说是我们绑定事... <progress id="Progress" value="0" max="100"></progress> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75"> function showPreview(source) { var file = source. 在这个例子 中 ，我们首先获取了一个id为“myBtn”的按钮元素。然后，我们使用addEventListener方法给该按钮添加一个click 事件 监听器。最后，我们定义了一个名为handleClick的函数来处理该 事件 。在这个函数 中 ，我们通过event.target获取了 事件 目标元素，然后 执行 一些操作来处理该 事件 。 需要注意的是， DOM 2 事件 处理 中 的 事件 对象是通过回调函数的参数传递进来的，而不是像 DOM 0 事件 处理那样通过this关键字获取。因此，在 事件 处理函数 中 ，我们需要通过event参数来获取 事件 相关的信息。 解决：fatal: unable to access ‘https://github.com/Homebrew/brew/‘: Error in the HTTP2 framing layer 11330