1.事件监听(addEventListener(事件类型，事件方法))
<body> <!-- 事件属性 --> <button onclick="console.log(this.innerText)">按钮1</button> <!--t通过js对象添加事件 --> <button class="">按钮2</button> <button class="">按钮3</button> <script> // 用对象属性添加事件只有最后一次是有效得，同名事件会发生覆盖 document.querySelectorAll("button")[1].onclick = function () { console.log("第一次点击"); }; document.querySelectorAll("button")[1].onclick = function () { console.log("第二次点击"); }; //创建事件监听器 可以给一个元素添加同一个事件，同名事件不会发生覆盖 const btn3 = document.querySelectorAll("button")[2]; //获取元素 // btn3.addEventListener(‘事件类型’，事件方法); 添加事件监听器 btn3.addEventListener("click", function () { console.log("第一次点击"); }); btn3.addEventListener("click", function () { console.log("第二次点击"); }); </script> </body>
2.事件的出发阶段：事件冒泡和事件捕获
addEventListener(事件类型，事件方法,true/false)第三个参数决定事件捕获和冒泡，默认是true则是冒泡，false则是捕获
<body> <div> <li><a href="">点击我</a></li> </div> <script> const a = document.querySelector("a"); const li = document.querySelector("li"); const div = document.querySelector("div"); const body = document.body; //给标签添加点击事件 但是只用点击一次就会出现a li div body 依次出现 // // 事件冒泡 从内向外 a.addEventListener("click", shoWTagName); li.addEventListener("click", shoWTagName); div.addEventListener("click", shoWTagName); body.ddEventListener("click", shoWTagName); //事件捕获 由外向内 第三个参数默认flase 改成true即可 // 给标签添加点击事件 但是只用点击一次就会出现 body div li a依次出现 a.addEventListener("click", shoWTagName, true); li.addEventListener("click", shoWTagName, true); div.addEventListener("click", shoWTagName, true); body.ddEventListener("click", shoWTagName, true); function shoWTagName() { alert(this.tagName); } </script> </body>
3.事件委托和代理
事件代理:就是用父机代理下级元素或者更级元素得同名事件
(1)ev:事件对象
(2)ev.target:返回正在触发的元素即事件触发者
(3)ev.curentTarget 返回代理商即可事件的绑定者
<body> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ul> <script> //给li标签添加事件监听 点击哪一个文本就出现对应得文本 const lis = document.querySelectorAll("li"); lis.forEach(function (li) { li.addEventListener("click", function () { console.log(li.innerHTML); }); }); //冒泡可知 ul是所有li标签得父级，所以给li添加事件最终会冒泡给父级 //ev:事件对象, 事件代理就是用父机代理下级元素或者更级元素得同名事件 document.querySelector("ul").addEventListener("click", function (ev) { // ev.target 返回正在触发的元素即事件触发者 console.log(ev.target); //ev.curentTarget 返回代理商即可事件的绑定者 console.log(ev.currentTarget); }); </script> </body>
