事件分类
1. 资源事件
事件名称 | 触发条件 |
---|---|
load | 页面元素(包括图像多媒体等)资源及其相关资源已完成加载。 |
beforunload | 用户退出页面 |
例子:
<script>
// 通过onload事件等待页面或图像加载完成后调用。
// 这样可以保证 HTML 文档加载完毕,在函数内部操作dom保证DOM 树是完整的
window.onload = function(){
// 获取页面上的元素
var row = document.getElementById('row');
var col = document.getElementById('col');
}
</script>
</head>
<body>
<input type="text" id="row">
<input type="text" id="col">
</body>
2. 视图事件
事件名称 | 触发条件 |
---|---|
resize | 窗口或者框架被重新调整大小时触发 |
scroll | 档视图或元素已被滚动。 |
例子:
//给window绑定事件scroll
window.onscroll=function () {
console.log("窗口发生滚动")
// 获取页面文档元素的滚动距离
console.log(document.documentElement.scrollTop)
}
注意:一个元素的 scrollTop 属性是这个元素的内容顶部(滚动出去的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。
该属性可读写即可以通过设置该属性让元素偏移。
「课堂练习」
补充下列代码实现B站导航功能
补充下列代码实现B站导航功能
要求:
- 计算页面滚动的偏移量
- 根据页面滚动偏移量确定当前页面浏览的分区,导航条对应项高亮。
- 点击导航条页面偏移至指定分区
- 点击导航条top项,页面回到最顶部
图示效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3vOChzKQ-1627558974476)(http://edu.yueqian.com.cn/group1/M00/05/A0/wKgP3GDvlFaAFg_QAAWZpCfvLE4478.gif?token=null&ts=null)]
部分代码:
<style>
*{
margin: 0;
padding: 0;
list-style:none;
}
#biliNav{
position: fixed;
width: 32px;
top: 150px;
right: 30px;
border: 1px solid #ddd;
}
#biliNav li{
position: relative;
width: 32px;
height: 32px;
line-height: 32px;
border: 1px solid #ddd;
font-size: 12px;
color: #666;
text-align: center;
cursor: pointer;
}
#biliNav li.last{
background: red;
color: #fff;
display: block;
}
span{
width: 32px;
height: 32px;
display: none;
position: absolute;
top: 0;
left: 0;
}
.active{
background: red;
color: #fff;
display: block;
}
#main{
width: 1000px;
margin: 0 auto;
}
#main .bili{
height: 600px;
line-height: 600px;
width: 100%;
font-size: 50px;
color: #fff;
font-weight: bold;
text-align: center;
}
</style>
<div id="biliNav">
<ul id="menu">
<li>1F<span>直播</span></li>
<li>2F<span>动画</span></li>
<li>3F<span>番剧</span></li>
<li>4F<span>音乐</span></li>
<li>5F<span>舞蹈</span></li>
<li>6F<span>游戏</span></li>
<li>7F<span>科技</span></li>
<li>8F<span>生活</span></li>
<li>9F<span>鬼畜</span></li>
<li>10F<span>时尚</span></li>
<li>11F<span>广告</span></li>
<li class="last">Top</li>
</ul>
</div>
<!--楼层内容-->
<div id="main">
<div class="bili" style="background: red">
直播
</div>
<div class="bili" style="background: orange">
动画
</div>
<div class="bili" style="background: yellow">
番剧
</div>
<div class="bili" style="background: green">
音乐
</div>
<div class="bili" style="background: cadetblue">
舞蹈
</div>
<div class="bili" style="background: blue">
游戏
</div>
<div class="bili" style="background: purple">
科技
</div>
<div class="bili" style="background: aqua">
生活
</div>
<div class="bili" style="background: brown">
鬼畜
</div>
<div class="bili" style="background: crimson">
时尚
</div>
<div class="bili" style="background: darkorange">
广告
</div>
<div class="bili"></div>
</div>
<script>
var menuLi = document.querySelectorAll("#menu>li")
var bili = document.querySelectorAll("#main>.bili");
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//因为菜单多了一个top返回顶部这个元素
for (var i = 0; i < bili.length - 1; i++) {
if (bili[i].offsetTop <= scrollTop && scrollTop < bili[i + 1].offsetTop) {
menuLi[i].className = "active"; //找到i对应的menu Li添加class
} else {
menuLi[i].className = "";
}
}
}
menuLi.forEach(function(li, index) {
li.dataset.index = index;
li.onclick = function() {
//获取当前被点击li元素位置 index
var postionIndex = this.dataset.index;
var ele = document.documentElement || document.body;
// console.log(ele);
if (li.className == "last") {
ele.scrollTop = 0;
} else {
//1F 0*600 2F 1*600
ele.scrollTop = postionIndex * 600;
}
}
});
</script>
3. 鼠标事件
事件名称 | 触发条件 |
---|---|
click | 当用户点击某个对象时调用的事件句柄 |
dblclick | 当用户双击某个对象时调用的事件句柄 |
mouseover | 鼠标移动到某个元素之上 |
mouseout | 鼠标从某元素离开 |
mousedown | 鼠标按钮按下 |
mouseup | 鼠标按键被松开 |
mousemove | 鼠标在某个元素内移动 |
mouseenter | 鼠标光标从元素外部移动到元素内部时触发,这个事件不冒泡 |
mouseleave | 位于元素内部的鼠标光标移动到元素范围之外触发,这个事件不冒泡 |
contextmenu | 鼠标右键菜单展开时 |
4. 键盘事件
事件名称 | 触发条件 |
---|---|
keydown | 某个键盘按键被按下时触发.(不区分大小写) |
keyup | 某个键盘按键被松开时触发 |
keypress | 除 Shift、Fn、CapsLock 外的任意键被按住。而且按住不放(长按),会连续触发。 |
5. 表单事件
事件名称 | 触发条件 |
---|---|
reset | 点击重置按钮时 |
submit | 点击提交按钮 |
focus | 元素获得焦点(不会冒泡)。 |
blur | 元素失去焦点(不会冒泡)。 |
input | 表单元素的输入事件当value发生变化时 |
change | 对于表单元素的值被用户提交时。与输入事件不同的是,对元素值的每次更改不一定会触发更该事件。 |
补充:
focus() 方法用于为 checkbox 赋予焦点。
blur() 方法用于从链接上移开焦点。
<body>
<input id="myInput">
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<script>
function getfocus()
{document.getElementById('myInput').focus()}
function losefocus()
{document.getElementById('myInput').blur()}
</script>
</body>
「课堂练习」
表单获得焦点时显示搜索列表
表单获得焦点时显示搜索列表
要求:
- 给页面中的input元素绑定获得焦点事件监听
- 当表单获得焦点时,表单下方展示一个推荐搜索列表
- 当表单失去焦点时,隐藏推荐搜索列表
- 点击搜索列表某一项,被点击项文本内容将会作为表单的value值并隐藏推荐搜索列表
效果演示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWmIAvOp-1627558974480)(http://edu.yueqian.com.cn/group1/M00/05/A0/wKgP3GDvlFaAaB8rAAIElC-sz4k428.gif?token=null&ts=null)]部分代码:
<h1>表单获得焦点时显示搜索列表</h1>
<input type="text" id="data">
<ul id="dataList">
<li>中国正能量</li>
<li>中国某大学生竟一夜精通JavaScript</li>
<li>程序员为宇宙空间站送上祝福</li>
<li>学习HTML5的优势</li>
</ul>
<script>
var ipt = document.querySelector('input')
var dataList = document.querySelector('#dataList')
ipt.addEventListener('focus', function() {
setInterval(function() {
dataList.style.display = 'block'
}, 1000)
})
var lis = dataList.children
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function() {
ipt.value = this.textContent
this.parentElement.textContent = ''
})
}
</script>
Event对象
介绍:有时候在事件处理函数内部,您可能会看到一个固定指定名称的参数,例如event,evt或简单的e。 这被称为事件对象,它被自动传递给事件处理函数,以提供额外的功能和信息。 简单的说Event对象是事件执行过程中的状态,用来保存当前事件的信息对象
- 获取事件对象兼容写法:
var event = e ||window.event
如何获取Event对象:
概念:事件处理函数的第一参数会默认获取Event对象
div.onclick = function(evt){}
例子:重写随机颜色示例
<button>Change color</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', bgChange);
function random(number) {
return Math.floor(Math.random()*(number+1));
}
// 在函数中包括一个事件对象e
function bgChange(e) {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
// 并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身
e.target.style.backgroundColor = rndCol;
console.log(e);
}
</script>
注意:你可以使用任何你喜欢的名称作为事件对象并只需要选择一个名称,就可以在事件处理函数中引用它。 开发人员最常使用 e
、 evt
、event
,因为它们很简单易记。
「课堂练习」
使用e.target为多个元素添加随机背景色功能
使用e.target为多个元素添加随机背景色功能
要求:
- 使用JavaScript创建了16个
<div>
元素- 使用e.target为元素添加一个onclick单击事件每当它们点击时就会为背景添加一个随机颜色。
效果演示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wmO0ZZSi-1627558974483)(http://edu.yueqian.com.cn/group1/M00/05/A0/wKgP3GDvlFaAWzGJAAHy3Bc1c3o333.gif?token=null&ts=null)]
<style>
* {
margin: 0;
padding: 0;
}
</style>
<script>
function randColor() {
return "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")"
}
for (var i = 0; i <= 16; i++) {
var div = document.createElement('div')
div.style.width = '25%'
div.style.height = '200px'
div.style.float = 'left'
document.body.appendChild(div)
div.onclick = function(event) {
var e = event || window.event
e.target.style.background = randColor()
}
}
</script>
可以在事件处理函数中引用它。 开发人员最常使用 e
、 evt
、event
,因为它们很简单易记。