JavaScript中的事件

事件

事件是可以被 JavaScript 侦测到的行为。

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

1.失去焦点事件  onblur

当窗口失去焦点时

 window.onblur = function () {

        console.log('窗口失去了焦点！');

    }

2.获得焦点事件  onfocus

当窗口获得焦点时

    window.onfocus = function () {

        console.log('窗口获得了焦点！');

    }

3.加载完成后事件  onload

窗口加载完成后

    window.onload =function () {

        console.log("窗口加载完成！")

    }

4.窗口大小改变事件  onresize

窗口大小改变时 

  window.onresize = function () {

        console.log("窗口大小正在发送改变");

    }

5.内容改变事件  onchange

  userCode.onchange = function () {

        console.log(userCode.value);

    }

6.文本框内容改变事件 oninput

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

    userCode.oninput = function () {

        console.log(userCode.value);

    }

7.表单未能提交事件 oninvalid

 userCode.oninvalid = function () {

        console.log("请您完成表单的内容!");

    }

8.表单绑定提交事件 onsubmit

var myForm = document.getElementById("myForm");

  myForm.onsubmit = function () {

        let userCode = document.getElementById("userCode").value;

        let userPwd = document.getElementById("userPwd").value;

        var reg = /^[A-Za-z0-9]{6,12}$/;

        console.log("触发了表单的提交事件！");

        if (userCode == '') {

            alert("账号不能为空");

        } else if (userCode.length < 6 || userCode.length > 12) {

            alert("账号长度错误");

        } else if (!reg.test(userCode)) {

            alert("账号只能为字母与数字!");

        } else if (userPwd == '') {

            alert("密码不能为空");

        } else if (userPwd.length < 6 || userPwd.length > 12) {

            alert("密码长度错误");

        } else if (!reg.test(userPwd)) {

            alert("密码只能为字母与数字!");

        } else {

            return true;

        }

        // return true:可以提交  false 不能提交

        return false;

    }

9.文本框内容被选中事件  onselect

 userCode.onselect = function () {

        // this

        console.log("您已经选择了文本框!");

    }

10.单击事件 onclick

let butA = document.getElementById("butA");

 butA.onclick = function () {

        document.getElementById("userCode").value = '';

        document.getElementById("userPwd").value = '';

    }

11.键盘事件

1.键盘按下事件 onkeydown

window.onkeydown = function (event) {

           /!* 解决兼容问题 *!/

           event = event || window.event;

           console.log("键盘按下了" + event.keyCode);

           if (event.keyCode == 13) {

               console.log('按下了回车');

           }

2.键盘松开事件  onkeyup

当松开按键时触发

window.onkeyup = function (event) {

        event = event || window.event;

        console.log("键盘按下了" + event.keyCode);

        if (event.keyCode == 13) {

            console.log('按下了回车');

        }

3.键盘按下并松开事件 onkeypress

window.onkeypress = function (event) {

        event = event || window.event;

        console.log("键盘按下了" + event.keyCode);

        if (event.keyCode == 13) {

            console.log('按下了回车');

        }

    }

12.鼠标事件

1.鼠标单击事件  onclick

  window.onclick = function () {

        console.log("鼠标单击事件");

    }

2.鼠标双击事件  ondblclick

  window.ondblclick = function () {

        console.log("鼠标双击事件");

    }

3.当鼠标按钮按下运行时事件 onmousedown

   window.onmousedown = function () {

        console.log("当鼠标按钮按下运行时");

    }

4.当鼠标按钮运行时事件 onmouseup

  window.onmouseup = function () {

        console.log("当鼠标按钮运行时");

    }

5.鼠标移入事件   onmouseover

当鼠标移入时  不能阻止冒泡

function divMouseover() {

        console.log("当鼠标进入了当前的DIV");

    }

6.鼠标移出事件  onmouseout

当鼠标移出时  不能阻止冒泡

function divMouseout() {

        console.log("当鼠标移出了当前的DIV");

    }

7.鼠标移入事件  onmouseenter 

可以阻止事件冒泡

 function divMouseenter() {

        console.log("当鼠标进入了当前的DIV");

    }

8.鼠标移出事件  onmouseleave

可以阻止事件冒泡

 function divMouseleave() {

        console.log("当鼠标移出了当前的DIV");

    }

9.鼠标滚轮运行事件  onmousewheel

当鼠标的滚轮运行时

window.onmousewheel=function (){

        console.log("当鼠标的滚轮运行时");

    }