html事件

1、HTML全局事件属性

HTML事件就是发生在 HTML元素上的事情。当在 HTML页面中使用 JavaScript时， JavaScript就可以触发这些事件。HTML事件可以是浏览器行为，也可以是用户行为。浏览器行为比如：页面加载时触发事件，页面关闭时触发事件等等。用户行为比如：点击按钮触发事件，改变窗口大小触发事件等等。通常，在事件触发时 JavaScript可以执行一些代码，HTML元素中可以添加事件属性，使用 JavaScript代码来添加 HTML 元素。HTML 事件属性可以直接执行 JavaScript代码，HTML 事件属性可以调用 JavaScript函数，但通常都是使用JavaScript 代码来为 HTML元素绑定事件处理程序。JavaScript通过事件可以用于处理表单验证，用户输入，用户行为及浏览器动作。

 

2、窗口事件属性

<script>

    /*窗口大小发生变化时触发*/

    window.onresize = function (e) {

        console.log("窗口发生变化！");

        console.log(e);

        console.log(e.target.outerWidth);

        console.log(e.target.outerHeight);

    };

   /*窗口滚动时触发*/

    window.onscrooll = function (e) {

       console.log("窗口发生滚动！")

    };

</script>

 

3、表单事件属性：

    表单事件在 HTML 表单中触发，适用于所有 HTML元素, 但该 HTML 元素需在 form表单内：

onselect：当选取元素是运行脚本

onchange：当元素改变时运行脚

onsubmit：提交表单

onfocus：获取焦点

onblur：失去焦点

<script>

   var form =document.getElementsByTagName("form")[0];

 

    form.onsubmit = function () {

        var name =document.getElementsByName("name")[0].value;

        var pwd =document.getElementsByName("pwd")[0].value;

        /*alert("数据提交失败！");*/

        if(name == ""|| pwd.length< 6){

            if(name == ""){

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

            }else if(pwd.length < 6){

                alert("密码强度不够！")

            }

            /*通过return false来禁用表单的提交*/

            return false;

        }

    };

    form.onreset = function () {

        var name =document.getElementsByName("name")[0].value;

        var pwd =document.getElementsByName("pwd")[0].value;

        if(name != "" &&pwd.length >= 6){

            return false;

        }

    }

</script>

 

4、鼠标事件属性

　　通过鼠标触发事件,模拟用户的行为：

onclick：鼠标单击

ondblclick：鼠标双击

onmouseover:鼠标移入

onmouseot：数百移出

onmousemove：鼠标移动

onmousedown：按下鼠标

onmouseup：鼠标松开

onscroll：滚动鼠标

<script>

    var div =document.getElementById("div1");

    div.onclick = function () {

        alert(1)

    };

    div.ondblclick = function () {

        alert(2)

    };

    div.onmousemover = function () {

        console.log("鼠标悬浮")

    };

    div.onmouseout = function () {

        console.log("鼠标离开")

    };

    div.onmousedown = function () {

        console.log("鼠标按下")

    };

    div.onmouseup = function () {

        console.log("鼠标放开")

    };

    div.onmousemove = function () {

        console.log("鼠标移动")

    }

</script>

5、键盘事件属性

　　通过键盘按键触发事件，模拟用户的行为：

<script>

    var input = document.getElementsByTagName("input+")[0];

    input.onkeydown = function (event) {

        console.log("按键被按下")

    };

    input.onkeyup = function (event) {

        console.log("按键被抬起")

    };

    input.onkeypress = function (event) {

        console.log("按键输入完成")

    };

</script>