<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>
<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>
<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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
