赞
踩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>传统注册事件</button> <button>方法监听注册事件</button> <script> // 使用传统方法注册事件 后面的事件会覆盖前面的事件 var btn = document.querySelectorAll('button'); btn[0].onclick = function() { alert('hi~'); } btn[0].onclick = function() { alert('hello~'); } // 使方法监听注册事件 addEventListener() // 里面的事件类型是字符串 需要加引号，而且不带on // 同一个元素 同一个事件可以添加多个监听器(事件处理程序) btn[1].addEventListener('click', function() { alert(22); }) btn[1].addEventListener('click', function() { alert(33); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll('div'); divs[0].onclick = function() { alert(1111); // 传统方法移除事件 divs[0].onclick = null; } divs[1].addEventListener('click', fn); function fn() { alert(2222); // removeEventListener 删除事件 divs[1].removeEventListener('click', fn); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div>123</div> <script> var div = document.querySelector('div'); // div.onclick = function(event) { // console.log(event); // } //官方解释: event对象代表事件的状态,比如键盘按键的状态鼠标的位置、鼠标按钮的状态。 // 事件发生后, 跟事件相关的一系列信息数据的集合都放到这个对象里面, 这个对象就是事件对象 event, 它有很多属性和方法。 div.addEventListener('click', function(e) { console.log(e); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { background-color: pink; width: 100px; height: 100px; } </style> </head> <body> <div> 123 </div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // e.target 返回的是触发事件的对象 this返回的是绑定事件的对象 // e.target 点击哪个就返回哪个 this 哪个元素绑定了事件就返回谁 var div = document.querySelector('div'); div.addEventListener('click', function(e) { console.log(e.target); //<div> 123</div> console.log(this); //<div> 123</div> }) var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { console.log(e.target); //<li></li> console.log(this); //<ul></ul> }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { background-color: pink; width: 100px; height: 100px; } </style> </head> <body> <div>123</div> <a href="https://www.baidu.com/">百度</a> <script> // e.type返回事件的类型 var div = document.querySelector('div'); div.addEventListener('click', function(e) { console.log(e.type); }) div.addEventListener('mouseover', function(e) { console.log(e.type); }) div.addEventListener('mouseout', function(e) { console.log(e.type); }) // e.preventDefault(); 阻止默认事件(例如下图的跳转事件) 或者让提交按钮不提交 var a = document.querySelector('a'); a.addEventListener('click', function(e) { e.preventDefault(); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: pink; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: purple; line-height: 200px; color: #fff; } </style> </head> <body> <div class="father"> <div class="son">son儿子</div> </div> <script> // 常见事件对象的属性和方法 // 阻止冒泡 dom 推荐的标准 stopPropagation() var son = document.querySelector('.son'); son.addEventListener('click', function(e) { alert('son'); // 这里有停止冒泡的方法，就不会弹出father和document的对话框 e.stopPropagation(); // stop 停止 Propagation 传播 e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡 }, false); var father = document.querySelector('.father'); father.addEventListener('click', function() { alert('father'); }, false); document.addEventListener('click', function() { alert('document'); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>JavaScript学习中</li> <li>JavaScript学习中</li> <li>JavaScript学习中</li> <li>JavaScript学习中</li> <li>JavaScript学习中</li> </ul> <script> // 之前学习如果想要完成点击每个li都能进行弹出对话框，是需要for循环给每个li绑定事件 // 但我们通过事件委托给父节点就可以完成要求的功能 //事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { alert(2233); e.target.style.backgroundColor = 'pink'; }) </script> </body> </html>