16.事件分类及事件对象

最新推荐文章于 2022-10-26 12:04:24 发布

W蘭

最新推荐文章于 2022-10-26 12:04:24 发布

阅读量281

点赞数

文章标签： js

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

版权

事件分类

资源事件

事件名称	触发条件
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>

视图事件

事件名称	触发条件
resize	窗口或者框架被重新调整大小时触发
scroll	档视图或元素已被滚动。

例子：

//给window绑定事件scroll
window.onscroll=function () {
  console.log("窗口发生滚动")

  // 获取页面文档元素的滚动距离
  console.log(document.documentElement.scrollTop)
}

注意：一个元素的 scrollTop 属性是这个元素的内容顶部（滚动出去的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

该属性可读写即可以通过设置该属性让元素偏移。

「课堂练习」

补充下列代码实现B站导航功能

要求：

计算页面滚动的偏移量
根据页面滚动偏移量确定当前页面浏览的分区，导航条对应项高亮。
点击导航条页面偏移至指定分区
点击导航条top项，页面回到最顶部

图示效果：

部分代码：

<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>

鼠标事件

事件名称	触发条件
click	当用户点击某个对象时调用的事件句柄
dblclick	当用户双击某个对象时调用的事件句柄
mouseover	鼠标移动到某个元素之上
mouseout	鼠标从某元素离开
mousedown	鼠标按钮按下
mouseup	鼠标按键被松开
mousemove	鼠标在某个元素内移动
mouseenter	鼠标光标从元素外部移动到元素内部时触发,这个事件不冒泡
mouseleave	位于元素内部的鼠标光标移动到元素范围之外触发,这个事件不冒泡
contextmenu	鼠标右键菜单展开时

键盘事件

事件名称	触发条件
keydown	某个键盘按键被按下时触发.(不区分大小写)
keyup	某个键盘按键被松开时触发
keypress	除 Shift、Fn、CapsLock 外的任意键被按住。而且按住不放(长按),会连续触发。

表单事件

事件名称	触发条件
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值并隐藏推荐搜索列表

效果演示：

部分代码：

	<h1>表单获得焦点时显示搜索列表</h1>
	<input type="text" id="data">
	<ul id="dataList">
		<li>中国正能量</li>
		<li>中国某大学生竟一夜精通JavaScript</li>
		<li>程序员为宇宙空间站送上祝福</li>
		<li>学习HTML5的优势</li>
	</ul>

Event对象

介绍：有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。简单的说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>