✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！

📃个人主页：@每天都要敲代码的个人主页

🔥系列专栏：Web前端

💬推荐一款模拟面试、刷题神器，从基础到大厂面试题👉点击跳转刷题网站进行注册学习

目录

一：JS中的事件

1. 常用事件

2. 注册事件的两种方式

3. 代码的执行顺序

4. 捕捉回车键

二：JS运算符之void

三：JS的控制语句

结束语

一：JS中的事件

1. 常用事件

（1）关于焦点

        blur 失去焦点    
        focus 获得焦点
（2）关于单击双击                  
        click 鼠标单击
        dblclick 鼠标双击
 （3）关于键盘                   
        keydown 键盘按下
        keyup 键盘弹起
  （4）关于鼠标                  
         mousedown 鼠标按下

         mouseup 鼠标弹起
         mouseover 鼠标经过
         mousemove 鼠标移动
         mouseout 鼠标离开      
（5）关于表单                    
        reset 表单重置
        submit 表单提交
（6）单独记忆                    
        change下拉列表选中项改变，或文本框内容改变
        select 文本被选定
        load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）

2. 注册事件的两种方式

（1）任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）

（2）注册事件的两种方式：

第一种方式：直接在标签中使用事件句柄

        在句柄中调用JS代码，页面打开的时候不会执行，点的时候才会执行

        将doSome函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数

        回调函数的特点：自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数

第二种方式：是使用纯JS代码完成事件的注册

        先定义一个按钮，使用这种方式需要给按钮带上id属性

        第一步：获取这个按钮对象，调用document这个内置对象的getElementById方法，document就代表整个HTML页面

        第二步：给按钮对象的onclick属性赋值，接把函数名拿过来,不要加小括号

function doSome(){alert("doSome....!");}function doOther(){alert("doOther....!");}// 第一步:获取这个按钮对象// document是全部小写，内置对象，可以直接用，document就代表整个HTML页面var btnObj = document.getElementById("button2");// 第二步:给按钮对象的onclick属性赋值// 直接把函数名拿过来,不要加小括号// 这行代码的含义是,将回调函数doOther注册到click事件上btnObj.onclick = doOther; // 采用匿名函数的方式var nimingObj = document.getElementById("niming");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用 nimingObj.onclick = function(){alert("niming....!");}// 上面两行代码合并document.getElementById("niming").onclick = function(){alert("合并代码...！")}

3. 代码的执行顺序

// 根据id获取节点对象时,返回null// 因为代码执行到此处的时候id="mybutton"的元素还没有加载到内存/* document.getElementById("mybutton").onclick = function(){alert("mybutton...!")} */// 执行onload加载, 页面全部元素加载完毕之后才会发生function ready(){document.getElementById("mybutton").onclick = function(){alert("mybutton...!")}}

（1）onload也可以不写body后面，调用window.onload = ready直接写到JS代码里 

（2）假设外面这个回调函数叫做a，里面这个回调函数叫做b：

                页面加载的过程中,将a函数注册给了load事件
                页面加载完毕之后,load事件发生了,此时执行回调函数a
                回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
                当id="btn"的节点发生click事件之后,b函数被调用并执行

window.onload = ready;function ready(){document.getElementById("mybutton").onclick = function(){alert("mybutton...!")}}// 继续采用匿名函数的方式，进行合并// 外面回调函数:在页面加载完毕执行// 页面打开的时候注册上去的window.onload = function(){ // 这个回调函数叫做a// 里面回调函数:鼠标单击按钮,发生事件执行// 页面加载完毕注册上去的document.getElementById("mybutton").onclick = function(){ // 这个回调函数叫做balert("mybutton...!")}}

补充：一个节点对象中只要有的属性都可以"."

例如：将一个文本框改成复选框

// 要求点击按钮就可以把文本框改成复选框window.onload = function(){document.getElementById("mybutton").onclick = function(){// 拿到mytext节点对象var mytext = document.getElementById("mytext");mytext.type="checkbox";}}

4. 捕捉回车键

（1）我们平常登录，不需要点击登录按钮，直接按回车键也可以登录成功，什么原理呢？又是怎么捕捉的呢？

（2）对于“键盘事件对象"来说,都有keyCode属性用来获取键值

（3）回车键的键值是13
         ESC键的键值是27

window.onload = function(){// 获取文本框对象var username = document.getElementById("username");/*usernameElt.onkeydown = function(a, b, c){// 获取键值,只有一个变量是用来接收值的，写多了也没用// alert(a); // [object KeyboardEvent]// alert(b); // undefined// alert(c); // undefined}*/// 调用键盘按下username.onkeydown = function(event){ // event是事件，局部变量// 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.    // alert(event.keyCode);// 回车键的键值是13// 这样只有按回车才会登录验证if(event.keyCode == 13){alert("登录验证...");}}}用户：

二：JS运算符之void

（1）void运算符的语法：void(表达式)
（2）运算原理：执行表达式，但不返回任何结果。
（3）例如：javascript:void(0)，数字可以随便写，但是不能省略不写其中javascript：作用是告诉浏览器后面是一段JS代码；程序的javascript:是不能省略的。

（4）需求：我们既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码后，会继续保持当前位置页面，不会跳转到页面顶部！

页面顶部














 





























 













既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转

三：JS的控制语句

（1）if switch while do...while  for break continue和Java的用法一样
（2）特殊的for..in语句 和 with语句 都是了解即可
（3）使用for..in语句可以遍历数组，以及遍历一个对象的属性

// 定义一个数组// JS中数组中元素的类型随意, 元素的个数随意 var arr = [false,true,1,2,"abc",3.14];  // 遍历数组 for(var i = 0;i<arr.length;i++){ alert(arr[i]); }  // 使用for...in语句遍历数组 for(var i in arr){ // alert(i); // i是变量名，得到的数组下标 alert(arr[i]); }  // 使用for..in语句可以遍历对象的属性 User = function(username,password){ this.username = username; this.password = password; } var u = new User("张三","111");  // 1.常用的两种访问属性的方法 alert(u.username+","+u.password); alert(u["username"]+","+u["password"]);  // 2.使用for...in访问属性 for(var i in u){ // alert(i); // i是属性名,得到的是username和password // alert(type i); // 得到类型都是string类型 // i本身就是一个字符串,所以不需要再加双引号"" alert(u[i]); }  // 3.使用with访问属性 with(u){ alert(username+ "," + password); }

结束语

今天的分享就到这里啦！快快通过下方链接注册加入刷题大军吧！

各种大厂面试真题在等你哦！
💬刷题神器，从基础到大厂面试题👉点击跳转刷题网站进行注册学习