淘先锋技术网

首页 1 2 3 4 5 6 7

目录

1. 事件概述

2. 窗口事件

2.1 案例演示

3. 表单事件  

3.1 案例演示

4. 键盘事件

4.1 案例演示

5. 鼠标事件

5.1 案例演示 


1. 事件概述

HTML事件可以触发浏览器中的行为。

2. 窗口事件

由窗口触发该事件 (同样适用于 <body> 标签):

属性描述
onblur当窗口失去焦点时运行脚本
onfocus当窗口获得焦点时运行脚本
onload当文档加载之后运行脚本
onresize当调整窗口大小时运行脚本
onstorage当 Web Storage 区域更新时(存储空间中的数据发生变化时)运行脚本

2.1 案例演示

        1: 当窗口失去焦点时,输出“窗口失去焦点”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>
    window.onblur = function () {
        console.log("窗口失去焦点");
    };
</script>
</body>
</html>

        2:当窗口获取焦点时,输出“窗口获取焦点”


	 window.onfocus = function () {
        console.log('窗口获得了焦点!');
    };

        3:窗口加载完成后

    window.onload =function () {
        console.log("窗口加载完成!")
    };

        4:窗口大小改变时

    window.onresize = function () {
        console.log("窗口大小正在发送改变");
    };

3. 表单事件  

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

3.1 案例演示

        1:获得焦点时 改变背景色

    var userCode = document.getElementById("userCode");
	userCode.onfocus = function () {
        this.style.backgroundColor = 'green';
    };

        2:失去焦点时 改变背景色

    userCode.onblur = function () {
        this.style.backgroundColor = 'red';
    };

        3:onchange 内容改变事件

    var userCode = document.getElementById("userCode");
    userCode.onchange = function () {
        console.log(userCode.value);
    };

        4:oninput 当文本框内容改变时 ,立即将改变内容输出在控制台

    userCode.oninput = function () {
        console.log(userCode.value);
    };

        5:获取表单,未能提交时

    userCode.oninvalid = function () {
        console.log("请您完成表单的内容!");
    };

        6:当文本框内容被选中时

    userCode.onselect = function () {
        console.log("您已经选择了文本框!");
    };

        7:当提交表单的时候,在控制台输出“表单提交”

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

    /* 当提交表单的时候,在控制台输出“表单提交” */
    myform.onsubmit = function () {
        console.log("表单提交");
        return false;/* 用来阻止表单提交的,你不写它会跳转请求 */
    };

4. 键盘事件

通过键盘触发事件,类似用户的行为:

4.1 案例演示

        1:当键盘按下判断当前的按键是不是 a ,如果是就输出true,否则输出false

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>
    /* 当键盘按下判断当前的按键是不是 a ,如果是就输出true,否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;

        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };
</script>
</body>
</html>

        2:onkeyup 当松开按键时

    window.onkeyup = function (event) {
        /!* 解决兼容问题 *!/
        event = event || window.event;
        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    };

5. 鼠标事件

通过鼠标触发事件,类似用户的行为:

属性3.1描述
onclick鼠标单击事件
ondblclick鼠标双击事件
onmousedown当鼠标按钮按下运行时
onmouseup当鼠标按钮运行时
onmousemove当鼠标指针移动时运行脚本
onmouseover当鼠标移入时,不可以阻止冒泡
onmouseout当鼠标移出时,不可以阻止冒泡
onmouseenter当鼠标进入了当前的DIV,可以阻止冒泡
onmouseleave当鼠标移出了当前的DIV,可以阻止冒泡
onmousewheel当鼠标的滚轮运行时
onscroll当滚动元素的滚动条运行时

5.1 案例演示 

        当鼠标移入,鼠标移出事件

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

    /* 当鼠标移入div,背景颜色变为红色 */
    box.onmouseenter = function () {
        this.style.background = "red";
    };

    /* 当鼠标移出div,背景颜色变为蓝色 */
    box.onmouseleave = function () {
        this.style.background = "skyblue";
    };