xsr1.事件三要素
1.事件源：事件被触发的对象
2.事件类型：如何触发 什么事件 比如鼠标点击(onclick)，鼠标经过亦或是键盘按键
3.事件处理程序：通过一个函数赋值的方式完成
2.执行事件步骤
1.获取事件源
2.绑定事件（或注册事件）
3.添加事件处理程序
代码语言：javascript复制<body>
<button id="butn">像素人是谁？</button>
<script>
//1.获取事件源
var butn = document.getElementById('butn')
//2.绑定事件（或注册事件）butn.onclick
//3.添加事件处理程序
butn.onclick = function () {
alert('像素人是一名前端')
}
</script>
</body>3.常见的鼠标事件
4.操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。
1.使用element. innerText和element. innerHTML来改变元素
样式区域：
代码语言：html复制 <style>
//给div一个样式更加好看
div{
color: cadetblue;
width: 120px;
background-color: rgb(255, 255, 255);
}
</style>
HTML区域：
<body>
<button> 点击获取当前时间</button>
<div>00：00：00</div>
</body>js区域：
<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区别
代码语言：js复制<body>
<div>
</div>
<script>
var div = document.querySelector('div');
div.innerText = '<strong>像素</strong>';// 他并不会给我们进行一个加粗的效果，反而会将加粗标签暴露出来，不进行标签的识别，还会去除空格和换行
div.innerHTML = '<strong>像素</strong>';// 而innerHTML会对HTML所属的标签进行一个识别，然后就会显示加粗后的效果
// 当然在实际使用中一般就使用innerHTML
</script>
</body>element. innerText和element. innerHTML具有可读性，可以获取元素内容
element. innerText不进行标签的识别，还会去除空格和换行
innerHTML会进行标签的识别
5.修改元素属性
代码语言：javascript复制<style>
img {
width: 142px;
height: 142px;
}
</style>
</head>
<body>
<button id="one">像素</button>
<button id="two">像素妹</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/xiangsu.jpg';
}
</script>
</body>原创✨：还希望各位大佬支持一下
点赞
