键盘敲烂,月薪过万作业不做,等于没学
当前系列: 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个属性(宽度类推):

  1. scrollHeight:文档实际/全部高度
  2. clientHeight:窗口中显示高度
  3. 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("---------");
}

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

事件绑定在哪里呢?非常奇怪,

  1. 你可以绑定在window、window.document、window.document.body,但就是能绑定在html上(没有window.document.html属性,document.getElementsByTagName('html')[0]也不行
  2. 然鹅,要想获得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. 参考一起帮首页,实现右侧漂浮并底对齐左侧文本框的效果
  3. 参考消息页面:完成勾选“全选”功能
  4. 参考注册页面,实现“验证”功能:
    1. 用户名和密码不能为空
    2. 密码的长度不能小于4
    3. 确认密码必须和密码一致
    4. 用户输入不符合上述要求时,提示错误信息,且form表单不能提交
  5. 参考文章发布页面,实现“广告”功能:
    1. 根据下拉列表选中项,填充“文字内容”和“链接”文本框
    2. 勾选修改的checkbox,实现“文字内容”和“链接”文本框的禁用和启用
    3. 可以点击删除当前广告
  6. 参考发布求助,实现其“关键字”功能中:
    1. 自定义关键字输入完成后(按空格键),输入的关键字显示在下拉列表上方
    2. 后输入的关键字显示在前面
    3. 关键字后边跟一个小x,点击可以删除
学习笔记
源栈学历
大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 Javascript入门 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码