第二十三讲：学一点点JS（三）元素的JS相关事件

web页的很多交互通过元素的某一事件来完成。CSS也有简单的事件交互，比如选择器的 :hover 伪类，它可以实现设备指针移动到元素之上时让元素自身或其它元素发生改变，这是简单交互。要实现更复杂多样的交互，需要JS的相关事件来完成。同样是鼠标指针移进移出，JS有针对鼠标指针的 mouseover（移入）和 mouseout（移出）以及 mousemove（移动），针对所有指针设备的则有 pointer* 系列事件。本讲只讨论元素的鼠标相关事件，我们先来看看基于鼠标指针移动相关的例子：

<style>
#ediv1 {
	margin: 30px auto;
	width: 400px;
	height: 150px;
	background: tan;
	padding: 12px;
	box-sizing: border-box;
	position: relative;
}
</style>

<div id="ediv1">请将鼠标指针移过来</div>

<script>
//以下演示元素的三个事件，监听对应事件时事件名称前面加 on
//比如事件名称为 mouseover，监听事件写成 onmouseover

//鼠标经过事件 ：mouseover 鼠标指针移入元素界面
ediv1.onmouseover = () => ediv1.style.background = 'plum';
//鼠标移出事件 ：mouseout 鼠标指针移出元素界面
ediv1.onmouseout = () => ediv1.style.background = 'tan';
//鼠标移动事件 ：mousemove 鼠标指针在元素界面上滑动
ediv1.onmousemove = (e) => ediv1.innerText = 'X : ' + e.offsetX + '\nY : ' + e.offsetY;
</script>

点击查看效果

上例的三个事件，每一个事件其实都是一个函数，所以事件语句的写法上和写一个函数结构大体一致。前两个事件，即鼠标指针移入移出事件，没有参数，它们直接运行改变元素背景色的语句，元素.style.background 这句指元素（ediv1）CSS样式（style）的背景属性（background），函数体代码令其等于 plum 或 tan，结果就是，鼠标指针移入元素界面时，元素背景色是 plum 这个颜色，移出后则是 tan 这个颜色。第三个事件是鼠标指针在元素上移动的事件，带一个参数 e，但这个参数不是调用者传递参数之用，而是元素特定的标识，可以用其他字母替代它，习惯上用 e 而已，e 这里是事件的标识，事件英文叫 event，用了该单词的头一个字母；函数体是显示鼠标指针在元素上移动时指针所在点的xy坐标值，e.offsetX 指事件发生时指针的X偏移坐标值，e.offsetY则是Y偏移坐标值，偏移参照均指向元素自身，即例中的 id="ediv1" 的 div 标签。

点击事件应该是大家更熟悉的，音画帖的小播就是通过点击达到控制音乐播放、暂停及其他联动控制的目的。下面的例子，可以点击音频标签界面上的播放暂停按钮、也可以其下方另外设计的按钮来控制音频的播放、暂停。由于我们引入了联动函数，它依据音频标签的暂停与否来联动控制一些需要动态变化的东东，演示时会发现，不论通过那个按钮控制音乐，我们设计的按钮都会有按钮上的文本变化：

<p>
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=32341779" controls></audio>
</p>
<p>
	<button id="btnPlay" type="button" value="play">播放</button>
</p>

<script>
//自定义的联动函数 ：
mState = () => btnPlay.innerText = aud.paused ? '播放' : '暂停';
//audio标签监听事件 ：运行联动函数
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
//按钮点击事件 ：播放或暂停音乐
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

点击查看效果

14行代码就是 id="btnPlay" 按钮的点击事件，该事件名称为 click，监听它时前面要有前缀 on，合起来写成 onclick。监听的内容是有条件地控制音频标签：音频标签是否暂停中？如是，则播放音乐，反之，则暂停之。aud.paly() 和 aud.pause() 分别是audio标签的播放和暂停方法，要有小括号跟在后面。

大家还可以注意观察音频播放结束后按钮的变化，看看我们设计的按钮和audio空间的按钮是否同步、为什么会这样？这是因为，不同类型的元素拥有不同的事件。上例代码，id="aud" 的音频 audio 标签我们一口气使用了三个事件，canplay（可以播放事件）、playing（开始播放事件） 和 pause（暂停事件，注意和暂停属性 paused 以及和 pause() 暂停方法的区别），通过对这三个事件的监听，运行联动函数 mState() 以控制函数里预设的机制。至于什么样的标签拥有什么样的JS事件这里不作讨论，也不会做专题讨论，碰上了再说。

常规标签如div、p、span等都拥有设备指针移入移出、点击等事件，现在我们还是回到点击事件。点击事件不止一个 click 事件，还有双击 dblclick，还有设备按键如鼠标的左、右键按下和弹起等事件。下面代码演示对常规鼠标左键、右键和中键（滚轮被视为中键，可以按下）被按下和弹起的检测：

<style>
#cbox1 {
	width: 400px;
	height: 100px;
	background: #4a7ebb;
	user-select: none; /* 禁止选中内容 */
	padding: 12px;
}
</style>

<div id="cbox1">请在本窗口按下和弹起鼠标任意键</div>

<script>
//函数 ：获取鼠标按下或弹起的是哪一个键
getmouseKey = (event) => {
	var keynames = ['左键','中键','右键','第四键','第五键'];
	return keynames[event.button]; //event.button，事件的按键索引，依次为 0、1、2
};

cbox1.onmousedown = (e) => cbox1.innerText = '您按下了鼠标' + getmouseKey(e);
cbox1.onmouseup = (e) => cbox1.innerText = '鼠标' + getmouseKey(e) + '弹起';
cbox1.oncontextmenu = (e) => e.preventDefault(); //禁止右键菜单
</script>

点击查看效果

上述演示，交互时可以按久一点再松开鼠标按键，以便可以看得更清楚一些。代码中对鼠标按钮按下弹起是哪一个键的检测针对的是常规鼠标，如果鼠标按钮在操作系统中做了人为设置，检测依据的是设置后的效果而非物理按键，还有一些鼠标会有更多的按键，程序会识别为第四键和第五健。

下面的例子演示单击和双击事件，注意，单击和双击仅针对鼠标左键：

<style>
#cbox2 {
	width: 400px;
	height: 100px;
	background: #4a7ebb;
	user-select: none;
	padding: 12px;
}
</style>

<div id="cbox2">请在本窗口单击或双击</div>

<script>
cbox2.ondblclick = (e) => cbox2.innerText = '双击';
cbox2.onclick = (e) => cbox2.innerText = '单击';
</script>

点击查看效果

元素的鼠标事件在音画帖中会经常用到，尤其是单击事件 click，监听单击事件写成 元素标识.onclick = () => ...，我们要做的通常是使用小播的单击事件去控制音频的播放与暂停，然后再去监听音频标签的几个事件，一般是 oncanplay、onplaying、onpause 三个，它们写在一块儿，运行的是自定义的联动控制函数。复杂的交互帖子可能需要监听更多的事件，但一切建立在最简单的基础上，学好上面的内容，日后才有可能做出更精致优雅而到位的交互效果。

作业：做一个自定义尺寸的元素，给它指定一个id，背景颜色是自定义颜色一。该元素左键单击时背景色变为自定义颜色二，右键单击时背景色是自定义颜色3，双击时背景颜色变回自定义颜色一。

提示：左键单击使用 onclick 事件，双击使用 ondblclick 事件。右键单击可以使用 onmouseup 监听事件，要检测一下 event.button 是否等于 2，参考代码如下，发布作业时请把注释去掉 ：

//监听鼠标按键弹起事件
元素标识.onmouseup = (e) => {
	if(e.button !== 2) return; //如果按键索引号不是2，放弃，否则执行下面语句
	元素标识.style.background = '#008000';
};
元素标识.oncontextmenu = (e) => e.preventDefault(); //屏蔽鼠标右键菜单

返回目录