JavaScript：事件：mouse / load / scroll / focus&blur / change / key / submit·源栈课堂·一起帮

JavaScript：事件：mouse / load / scroll / focus&blur / change / key / submit

点击观看清晰的B站视频

当前系列： Javascript入门

除了click，还有很多常用事件，我们按关键字组织讲解：

mouse

鼠标（的光标）移动，参数的事件：

mouseover：鼠标移入
mousemove：鼠标移动
mouseout：鼠标移出

一个元素可以绑定多个事件。比如，移入和移出，各一个：

可以在p元素上绑定事件：

document.getElementById("propagate").onmouseover = function(){
    console.log("over");
}
document.getElementById("propagate").onmouseout = function(){
    console.log("out");
}
document.getElementById("propagate").onmousemove = function(){
    console.log("move");
}

演示：在父元素（div）上绑定事件，鼠标移动能显示子元素（p）的文本：

document.getElementById("propagate").onmouseover = function (event) {
    //注意这个条件判断！
    if(event.target.tagName === 'P'){
        console.log(event.target.innerText);
    }
}

load

加载，对应的还有unload（卸载/销毁）。

不是所有的元素都支持该事件。支持该事件的：window、（document不行）、body、iframe、img等几个“大型”HTML元素。

load的一个主要用途是：在所有元素加载完成之后再执行，所以可以将JavaScript代码提前到<head>中

window.onload = function () {
    document.getElementById('propagate').onclick = function () {
        console.log("......");

#体会#：这种“事件里面套事件”的写法。

unload其实很少用，因为这时候事件源已经“销毁”了，啥都不能干了。

常用的是beforeunload，离开（即页面跳转，不是“关闭”）当前窗口前弹出确认窗口（比如修改联系方式）：

window.onbeforeunload = function(){
    return "确定要离开？O(∩_∩)O~";
}

注意：现代浏览器都忽略了return后面自定义的提示消息，显示自己固定的文本。¯\_(ツ)_/¯

scroll

页面滚动（有滚动条）时触发。常用于当前内容到底后进一步加载下一页内容。

所以要了解3个属性（宽度类推）：

scrollHeight：文档实际/全部高度
clientHeight：窗口中显示高度
scrollTop：滚动条（向下）移动距离

可根据以下公式判断判断滚动条在哪里？

顶部：scrollTop = 0
底部：scrollTop = scrollHeight - clientHeight

演示：普通DOM元素

#propagate { /*生成滚动条 */ height: 50px;
    overflow-y: scroll;
}

document.getElementById("propagate").onscroll=function(event){
    console.log("scrollHeight：" + this.scrollHeight);
    console.log("clientHeight：" +this.clientHeight);
    console.log("scrollTop：" +this.scrollTop);
    console.log("---------");
}

但如果整个浏览器窗体的滚动条的滚动事件：

事件绑定在哪里呢？非常奇怪，

你可以绑定在window、window.document、window.document.body，但就是不能绑定在html上（没有window.document.html属性，document.getElementsByTagName('html')[0]也不行）
然鹅，要想获得scrollTop/scrollHeight/clientHeight，又必须根据HTML文档声明，使用：
- document.documentElement（html）：页面具有 DTD（或者说指定了 DOCTYPE）： - HTML5
- document.body（body）：页面不具有 DTD（或者说没有指定了 DOCTYPE）： - XHTML

window.onscroll = function (event) {
// 或者：window.document.onscroll = function (event) {
// 或者：window.document.body.onscroll = function (event) {
    let html = document.documentElement;
    // 或者：let html = document.getElementsByTagName('html')[0];
    console.log("scrollHeight：" + html.scrollHeight);

有时候你能在网上找到这样的“一揽子方案”：

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

#体会或（||）的“妙用”#

以下皆是表单元素事件：

focus/blur

演示：focus获得焦点，blur失去焦点。

同一个元素，绑定多个事件：

document.getElementsByName("username")[0].onfocus = function(){
    this.style.backgroundColor='lightblue';
}
document.getElementsByName("username")[0].onblur = function(){
    this.style.backgroundColor='';
}

移出焦点的时候，还可以进行用户输入的验证：

if (!/^\d+$/.test(this.value)) {  //不要忘了^和$
    alert("只能是数字");
}

change

既可以用于文本域表单，在移出焦点时触发；
也可以用于选择型表单checkbox/radio/select，在点击时触发。

区别于onblur/onclick，就在于事件触发还需要用户的输入/选择发生了变化（演示）

document.getElementsByName("fee")[0].onchange = function () {
    console.log("changed……");

radio和checkbox，可以利用事件冒泡，将事件绑定的父元素：

<div id="payfee">
    <label>学费支付：</label>
    <label><input type="radio" value="order" name="fee" />先付费</label>
    <label><input type="radio" value="payoff" name="fee" />后付费</label>
</div>

document.getElementById('payfee').onchange = function (event) {
    console.log(event.target.value);

这时不要忘了使用event.target，而不是this

key

敲击键盘，引发的事件：

keypress

“非打印”字符（字母、数字、符号等）按键按下时触发。

演示：获取找到按下的键

document.onkeypress = function (event) {
    console.log(`
        event.key:${event.key}, 
        event.keyCode:${event.keyCode}, 
        event.code:${event.code}`);
}

@想一想@：这时候this指的是什么？

keydown

同keypress，但还能响应“非打印”字符，比如Shift、Ctrl、F1、上下键……

利用event内置的常量/属性：

判断是否按下了F2：（此时keyCode终于有了用武之地！^_^）
```
if(event.keyCode == event.DOM_VK_F2){
```
判断是否按住了ctrl+d：
```
if(event.ctrlKey && event.key == "d"){
```

keyup

按键回复/弹起，输入的当前字符已经纳入了value

document.getElementsByName("username")[0].onkeyup = function (event) {
    console.log(event.key); 
    console.log(this.value);    //value中包含event.key

演示：文本输入框随着用户键入自动检查

为了保险起见，最好使用keyup时间，因为键盘的“弹起”只会触发一次，不会出“幺蛾子”……

submit

绑定在form表单上，在form表单提交时触发。

但最常用的，是阻止表单提交：

document.getElementsByTagName('form')[0].onsubmit = function (event) {
    event.preventDefault();
    //return false;
    console.log(event);
};

#常见面试题：区别？#

return false; 后续代码不会执行，直接结束handler回调函数
event.preventDefault(); 只是不提交表单，其他语句仍然正常执行

当满足条件后，可以用“模拟”提交

this.submit()

作业

参考求助首页侧边栏关键字，实现：当鼠标移动到关键字上，关键字添加背景色，移出时还原
参考一起帮首页，实现右侧漂浮并底对齐左侧文本框的效果
参考消息页面：完成勾选“全选”功能
参考注册页面，实现“验证”功能：
1. 用户名和密码不能为空
2. 密码的长度不能小于4
3. 确认密码必须和密码一致
4. 用户输入不符合上述要求时，提示错误信息，且form表单不能提交
参考文章发布页面，实现“广告”功能：
1. 根据下拉列表选中项，填充“文字内容”和“链接”文本框
2. 勾选修改的checkbox，实现“文字内容”和“链接”文本框的禁用和启用
3. 可以点击删除当前广告
参考发布求助，实现其“关键字”功能中：