事件三要素
1. 事件是有三部分组成 事件源 事件类型 事件处理程序
（1）事件源：事件被触发的对象 比如按钮对象
（2）事件类型：如何触发 什么事件 比如鼠标点击(onclick) 鼠标经过 键盘按下
（3）事件处理程序：通过一个函数赋值的方式 完成
<body> <button id="bth">报告</button> <script> var bth = document.getElementById("bth"); bth.onclick = function(){ alert("报告完成") } </script> </body>
执行事件步骤
点击div 控制台输出 我被选中了
1.获取事件源
2.绑定事件 注册事件
div.onclick
3.添加事件处理程序
<body>
<div>iii</div>
<script>
var div = document.querySelector("div");
div.onclick = function(){
console.log("我被选中了");
}
</script>
</body>
常见的鼠标事件：
操作元素
JavaScript的DOM操作可以改变网页内容解构和样式，我们可以利用DOM操作元素来改变元素里的内容、属性等。注意以下都是属性！
我们点击按钮 div里的文字发生变化
1. 获取元素
2. 注册事件
我们元素也可以不用添加事件
<body> <button>显示系统时间</button> <div>时间：</div> <p>123</p> <script> var bth = document.querySelector("button"); var div = document.querySelector("div"); bth.onclick = function(){ div.innerText = getDate(); } var p = document.querySelector("p"); p.innerText = getDate(); function getDate(){ var date = new Date(); console.log(date.getFullYear());//返回当前日期的年 2020 console.log(date.getMonth() + 1);//月份 返回当前月份小一个月 记得月份+1 console.log(date.getDate());//返回的几号 console.log(date.getDay());//周一返回的是 1 周六返回的是 6 但是周日返回的是 0 console.log(date.getTime());//当前时间 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var time = date.toLocaleTimeString(); var arr = ['星期一','星期二','星期三','星期四','星期五','星期六']; var day = date.getDay(); return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day] + '时间：' + time; } </script> </body>
innerText ， innerHTML 都可以修改元素里的内容
innerText 跟innerHTML 的区别
1. innerText的使用方法
innerText 不识别HTML标签 非标准 可以去除空格和换行
2. innerHTML 的使用方法
innerHTML识别HTML标签 w3c标准 （常用） 保留空格跟换行
这两个属性是可读写的 可以获取元素里的内容
<body> <p> 我是 <span>123</span> </p> <strong></strong> <h1></h1> <script> var text = document.querySelector("h1"); text.innerText = "<strong>5555</strong>"; //不支持html标签 非标准 var text = document.querySelector("strong");//w3c标准 可以识别html标签 （常用） text.innerHTML = "<strong>5555</strong>"; var text = document.querySelector("p"); console.log(text.innerText); console.log(text.innerHTML); </script> </body>
常用元素的属性操作
src href
修改属性里面的链接
<body> <button id="bth1">草地</button> <button id="bth2">森林</button> <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1208/15/c0/12924355_1344999165562.jpg" width="500px" height="500px" title="55"/> <script> //修改元素属性 src //1. 获取元素 var bth1 = document.getElementById("bth1"); var bth2 = document.getElementById("bth2"); var img = document.querySelector("img"); //2. 注册事件 处理程序 bth1.onclick = function(){ img.src = "http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1208/15/c0/12924355_1344999165562.jpg"; img.title = "草地222"; } bth2.onclick = function(){ img.src = "http://attach.bbs.miui.com/forum/201311/17/174124tp3sa6vvckc25oc8.jpg"; img.title = "森林111"; } </script> </body>
样式属性操作
关闭二维码实例：
修改div的元素display里面的block变成none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
#div{ 150px; height: 150px; background-color: aqua; margin: 150px 0 0 750px; display: block; border: 1px solid #000000;}
.x{ 20px; height: 30px; float: right; font-size: 20px; text-align: center; position: relative; top: -155px; left: 20px; user-select: none; border-top: 1px solid #000000;}
.x:hover{ background-color: #00FFFF;}
</style>
</head>
<body>
<div id="div">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=810988444,1648289218&fm=111&gp=0.jpg" width="150px" height="150px" />
<b class="x">×</b>
</div>
<script>
//1. 获取元素
var bth = document.querySelector(".x")
var div = document.querySelector("#div");
//2. 注册事件 执行程序
bth.onclick = function() {
div.style.display = "none";
}
</script>
</body>
</html>