JavaScript（简写js）常用事件举例演示

前言：
我们用到JavaScript的时候js的事件就显得特别重要了

1.窗口事件

	窗口事件
onblur	失去焦点
onfocus	获得焦点
onload	窗口加载事件
onresize	窗口大小缩放事件

onblur :失去焦点

onfocus:获得焦点

/*  当窗口失去焦点时 */
    window.onblur = function () {
        alert('窗口失去了焦点！');
    }
    /*  当窗口获得焦点时 */
    window.onfocus = function () {
        alert('窗口获得了焦点！');
    }

onload:窗口加载事件

onresize:窗口大小缩放事件

/* 窗口加载完成后*/
      window.onload =function () {
          console.log("窗口加载完成！")
      }
/*  窗口大小改变时 事件 */
      window.onresize = function () {
          console.log("窗口大小正在发送生改变");
      }

二、表单事件

	表单事件
oninput	当文本框内容改变时 ，立即将改变内容 输出在控制台
onchange	内容改变事件
onclick	鼠标单击时触发此事件

oninput ：当文本框内容改变时 ，立即将改变内容 输出在控制台

<!--oninput 当文本框内容改变时  ，立即将改变内容 一个个的输出在控制台 -->
<input type="text" id="userCode" oninput="console.log(document.getElementById('userCode').value);">

onchange： 内容改变事件

<!--onchange 内容改变事件-->
<input type="text" id="a1" onchange ="console.log(document.getElementById('a1').value);">

onclick：鼠标单击时触发此事件

<input type="button" value="点我！" onclick="console.log('被点击')">

三、键盘事件

	键盘事件
onkeydown	当键盘上的某个按键被按下时触发此事件
onkeyup	当键盘上的某个按键被按下后（长按不会触发）按键回弹才会触发此事件
onkeyup	按下某个按键后触发（长按也能触发）

onkeydown：当键盘上的某个按键被按下时触发此事件

 //  键盘按下事件，把回车键值输出改为'按下了回车'
        window.onkeydown = function (event) {
            // 解决兼容问题
            event = event || window.event;
            console.log("键盘按下了" + event.keyCode);
            if (event.keyCode === 13) {
                console.log('按下了回车');
            }
        }

onkeyup：当键盘上的某个按键被按下后（长按不会触发）按键回弹才会触发此事件

 /* onkeyup： 当松开按键时 触发 */
        window.onkeyup = function (event) {

            event = event || window.event;

            console.log("键盘按下了" + event.keyCode);
            if (event.keyCode === 13) {
                console.log('按下了回车');
            }
        }

onkeypress：按下某个按键后触发（长按也能触发）

/*onkeypress：按下某个按键后触发（长按也能触发）*/
 window.onkeypress = function (event) {
            event = event || window.event;
            console.log("键盘按下了" + event.keyCode);
            if (event.keyCode == 13) {
                console.log('按下了回车');
            }
        }

四、鼠标事件

	鼠标事件
onclick	鼠标单击时触发此事件
ondblclick	鼠标双击时触发此事件
onmousedown	鼠标按下时触发此事件
onmouseup	鼠标弹起时触发的事件
onmouseover	鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseout	鼠标从某个设置了此事件的元素上离开时触发此事件
onmousewheel	当鼠标的滚轮运行时

onclick：鼠标单击时触发此事件

<input type="button" value="点我！" onclick="console.log('被点击')">

ondblclick：鼠标双击时触发此事件

<input type="button" value="双击我！" ondblclick="console.log('被双击')">

onmousedown：鼠标按下时触发此事件（长按触发不了事件）

<input type="button" value="点我！" onmousedown="console.log('被点击')">

onmouseup：鼠标弹起时触发的事件

<input type="button" value="点我！" onmouseup="console.log('被点击')">

onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件

/*移动到按钮上面触发*/
<input type="button" value="点我！" onmouseover="console.log('移动')">

onmousemove：鼠标移动时触发此事件

/*在控键范围内移动都能触发*/
<input type="button" value="点我！" onmousemove="console.log('移动')">

onmouseout：鼠标从某个设置了此事件的元素上离开时触发此事件

/*鼠标进入控键元素再移出控键元素触发*/
<input type="button" value="点我！" onmouseout="console.log('移开控件')">

onmousewheel:鼠标的滚轮运行时触发

 window.onmousewheel=function (){
            console.log("鼠标的滚轮运行时");
        }

总结：
其实JavaScript的事件作用给用户带来了很多便捷，我们也可以更方便的收集到用户的信息，单词虽多，但也有规律