文章目录
HTML DOM事件
事件：允许js在html文档元素注册不同的事件处理程序，驱动函数/方法
- 鼠标事件
- 键盘事件
- 表单事件
- 剪切板事件
- 拖拽事件
- 打印事件
- 媒体事件
- 框架事件
- 动画事件
- 过渡事件
鼠标事件
鼠标点击事件
- onclick 鼠标左键点击触发
- ondblclick 鼠标左键双击触发
- onmousedown 鼠标按键按下时触发（左中右键均可以）
- onmouseup 鼠标按键松开时触发（左中右键均可以）
鼠标移动事件
- onmouseover 鼠标悬浮在元素上面时触发（如果从父元素再进入子元素，会再次触发）
- onmouseout 鼠标离开元素上面时触发（从父元素移动到子元素，或者从子元素再移动到父元素，都会再次触发）
- onmouseenter 鼠标进入元素时触发（如果从父元素再进入子元素，不会再次触发）
- onmouseleave 鼠标离开元素时触发（从父元素移动到子元素，或者从子元素再移动到父元素，都不会再次触发）
- onmousemove 鼠标移动时触发
- onmousewheel 鼠标滚轮事件，已废弃，由onwheel代替
- onwheel 鼠标滚轮事件，鼠标滚轮出现动作以后触发
- oncontextmenu 鼠标右键菜单事件，鼠标点击右键时触发
.box{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid;
margin: 10px auto;
background-color: rgb(220, 158, 76);
color: white;
}
<div class="box">onclick</div>
<div class="box">ondblclick</div>
<div class="box">onmousedown</div>
<div class="box">onmouseup</div>
<div class="box">onmouseover</div>
<div class="box">onmouseout</div>
<div class="box">onmouseenter</div>
<div class="box">onmouseleave</div>
<div class="box">onmousemove</div>
<div class="box">onmousewheel</div>
<div class="box">onwheel</div>
<div class="box">oncontextmenu</div>
var aBoxs = document.getElementsByClassName('box');
// onclick
aBoxs[0].onclick = function(e){
console.log('onclick事件'); // onclick事件
console.log(e); // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
}
aBoxs[1].ondblclick = function(e){
console.log('ondblclick事件');
console.log(e);
}
aBoxs[2].onmousedown = function(e){
console.log('onmousedown事件');
console.log(e);
}
aBoxs[3].onmouseup = function(e){
console.log('onmouseup事件');
console.log(e);
}
aBoxs[4].onmouseover = function(e){
console.log('onmouseover事件');
console.log(e);
}
aBoxs[5].onmouseout = function(e){
console.log('onmouseout事件');
console.log(e);
}
aBoxs[6].onmouseenter = function(e){
console.log('onmouseenter事件');
console.log(e);
}
aBoxs[7].onmouseleave = function(e){
console.log('onmouseleave事件');
console.log(e);
}
aBoxs[8].onmousemove = function(e){
console.log('onmousemove事件');
console.log(e);
}
aBoxs[9].onmousewheel = function(e){
console.log('onmousewheel事件');
console.log(e);
}
aBoxs[10].onwheel = function(e){
console.log('onwheel事件');
console.log(e);
}
aBoxs[11].oncontextmenu = function(e){
console.log('oncontextmenu事件');
console.log(e);
}
总结
- 今天所学习的内容并不多，只是了解了一下鼠标的一些事件，对于它的针对性的练习也没有，不过在我看来，对于鼠标事件的一些应用应该会比较容易上手。
- 接着说说今天作业的情况，今天有个作业是写个老虎机样式的抽奖的功能，
我现在复盘一下js部分：
- 首先我们要做到的是，点击按钮能让一个小方块的样式发生改变，我们可以通过点击修改类名的方式实现。
- 在点击一下可以改变小方块的样式的基础上，添加一个循环定时器，通过鼠标点击事件去调用，定时器里的内容就是让每个小方块的样式挨个改变，这样我们就实现了点击按钮，实现老虎机的一个效果
- 接着我们要做的就是点击完以后，循环定时器能够在一定的时间内清除掉，那么我就想到了延时定时器，在点击按钮时，同时执行延时定时器，时间到以后，就清除循环定时器（clearInterval（定时器的名称））
- 现在我们也做到了点击按钮，画面动起来，并且会在一段时间后停止，但是它持续的时间总是一样的，那么这时候延时定时器的执行时间就要用到我们的Math的random（随机数）方法了，最后通过一系列的操作，最终完成了本次的作业
- 虽然说这次作业我也做出来了，但是花了我很多的时间，在总体的大结构上没有太大的问题，就是一些细节方面出现了很多的失误，出现了解决掉一个问题以后，又冒出一个问题的情况。
- 所以说js是相对严谨一点的语言，它的标点、顺序都是需要我们去用心的，不能刷小聪明，为了一时的方便，浪费更多的时间。现在把代码分享出来
- css代码
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 200px;
margin: 150px auto;
}
li {
width: 60px;
height: 60px;
border: 2px solid;
float: left;
text-align: center;
line-height: 60px;
cursor: pointer;
/* background-color: antiquewhite; */
}
#btn {
background-color: cadetblue;
border: 0;
width: 100%;
height: 100%;
cursor: pointer;
color: white;
}
.change {
background-color: antiquewhite;
color: blue;
/* background-origin: padding-box; */
border-color: black;
}
- html代码
<ul>
<li class="smallBox">1</li>
<li class="smallBox">2</li>
<li class="smallBox">3</li>
<li class="smallBox">8</li>
<li><button id="btn">抽奖</button></li>
<li class="smallBox">4</li>
<li class="smallBox">7</li>
<li class="smallBox">6</li>
<li class="smallBox">5</li>
</ul>
- js代码
// 获取元素
var aBoxs = document.getElementsByClassName('smallBox');
var oBtn = document.getElementById('btn');
// 创建一个数组用于存放方框的索引
var arr = [3,0,1,2,4,7,6,5]; // 数组修改过了
// 创建全局变量用于获取数组中的值
var index = 0;
// 设置全局变量用于存放定时器
var timer;
// 设置定时器
oBtn.onclick = function () {
oBtn.disabled = true; // 当点击一次按钮以后，按键就转为禁用
var num = Math.random() * 50 + 1; // 获取随机数 用于延迟定时器
timer = setInterval(function () { // 创建循环定时器
index == 7 ? index = 0 : index++;
for (var k = 0; k < arr.length; k++) {
aBoxs[k].className = 'smallBox';
}
// 单独设置
aBoxs[arr[index]].className = 'smallBox change';
// 判断条件
console.log('恭喜你获得了' + aBoxs[arr[index]].innerHTML + '等奖');
}, 100)
// 设置延时定时器，用于清除循环定时器
setTimeout(function () {
clearInterval(timer); // 清除定时器
oBtn.disabled = false; // 接触按钮的禁用
alert('恭喜你获得了' + aBoxs[arr[index]].innerHTML + '等奖')
}, num * 100)
}
个人觉得这些代码可以进行优化，但是由于能力问题，暂时还不能达到，希望能有大神指点
