1.事件三要素
1.事件源：事件被触发的对象
2.事件类型：如何触发 什么事件 比如鼠标点击(onclick)，鼠标经过亦或是键盘按键
3.事件处理程序：通过一个函数赋值的方式完成
2.执行事件步骤
1.获取事件源
2.绑定事件（或注册事件）
3.添加事件处理程序
<body> <button id="butn">山鱼是谁？</button> <script> //1.获取事件源 var butn = document.getElementById('butn') //2.绑定事件（或注册事件）butn.onclick //3.添加事件处理程序 butn.onclick = function () { alert('山鱼是一名CSDN的小博主') } </script> </body>
3.常见的鼠标事件
4.操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。
1.使用element. innerText和element. innerHTML来改变元素
<style> //给div一个样式更加好看 div{ color: cadetblue; width: 120px; background-color: rgb(255, 255, 255); } </style> </head> <body> <button> 点击获取当前时间</button> <div>00：00：00</div> <script> // 获取元素 var but = document.querySelector('button'); var div = document.querySelector('div'); // 注册事件 but.onclick = function () { div.innerText = gettime(); } //封装一个函数用来获取当前时间 function gettime() { var date = new Date(); var hour = date.getHours(); hour = hour < 10 ? "0" + hour : hour; var min = date.getMinutes(); min = min < 10 ? "0" + min : min; var sc = date.getSeconds(); sc = sc < 10 ? "0" + sc : sc; return '现在是:' + hour + ":" + min + ":" + sc; } </script>
2.element. innerText和element. innerHTML区别
<body> <div> </div> <script> var div = document.querySelector('div'); div.innerText = '<strong>Aic山鱼</strong>';// 他并不会给我们进行一个加粗的效果，反而会将加粗标签暴露出来，不进行标签的识别，还会去除空格和换行 div.innerHTML = '<strong>Aic山鱼</strong>';// 而innerHTML会对HTML所属的标签进行一个识别，然后就会显示加粗后的效果 // 当然在实际使用中一般就使用innerHTML </script> </body>
element. innerText和element. innerHTML具有可读性，可以获取元素内容
element. innerText不进行标签的识别，还会去除空格和换行
innerHTML会进行标签的识别
5.修改元素属性
<style> img { width: 142px; height: 142px; } </style> </head> <body> <button id="one">Aic山鱼</button> <button id="two">Aic山鱼妹</button><br> <img src="img/shanyu.jpg" alt=""> <script> var sy = document.getElementById('one'); var sym = document.getElementById('two'); var img = document.querySelector('img'); sym.onclick = function () { img.src = 'img/山鱼妹.jpg'; } sy.onclick = function () { img.src = 'img/shanyu.jpg'; } </script> </body>
