16.事件分类及事件对象、B站导航功能案例、表单获得焦点时显示搜索列表案例、e.targee.为多个元素添加随机背景色功能

本文链接：https://blog.csdn.net/weixin_51353891/article/details/119219125

本文介绍了JavaScript中的各种事件，包括资源加载、视图变化、鼠标操作、键盘交互和表单处理。通过实例展示了如何利用这些事件实现页面导航、搜索列表显示、元素背景颜色随机变换等功能，强调了事件对象在事件处理中的作用，并提供了相应的代码实现和练习题，帮助读者掌握JavaScript事件处理和交互设计。

摘要由CSDN通过智能技术生成

事件分类

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>