JS基础入门篇（二十）—事件和事件对象（一）

头像
梁志芳
    阅读 5 分钟
    2

    1.事件

    事件的定义：所有的元素都有事件，我们要做的就是为事件绑定函数，当元素发生事件时就会出发对应的函数。当我们没有为事件绑定函数时，事件的值为null。

    <body>
    <div style="width: 100px;height: 100px; background:red"></div>
    <script>
        var div=document.getElementsByTagName("div")[0];
        console.dir(div);//打印div元素上的所有属性
    </script>
</body>

    以下截取了部分元素的事件。
    图片描述

    2.点击事件

    需要注意的是：事件名是click，不是onclik。on指的是在....上。

    点击事件分为以下三种：

        单击 - click
        按下 - mousedown
        抬起 - mouseup
    右击 - contextmenu(因为右击都是根据上下文出现菜单，所以右击是contextmenu)
        
    双击 - dbclick
    <body>
    <div style="width: 100px;height: 100px; background:red"></div>
    <script>
        var div = document.getElementsByTagName("div")[0];

        //只有在此div上 按下 并 抬起 才会触发div的点击事件
        div.onclick=function () {
            console.log("click - 点击");
        };
        div.onmousedown=function () {
            console.log("mousedown - 按下");
        };
        div.onmouseup=function () {
            console.log("mouseup - 抬起");
        };
        div.oncontextmenu=function () {
            console.log("contextmenu - 右击");
        };
        div.ondblclick=function () {
            console.log("dblclick - 双击");
        };
    </script>
</body>

    1.当单击div时，结果为：
    会触发 单击 抬起 按下 这三个事件
    图片描述

    2.当双击div时，结果为：
    会触发两次 单击 抬起 按下 这三个事件
    触发一次 双击 事件

    注意：如果双击的间隔时间过长，则认定为两次单击。

    图片描述

    3.当在div区域按下，但是离开div区域松手。则结果为：
    注意：单击事件只有在按下 并 抬起的时候才会触发。

    图片描述

    3.鼠标移动事件

    鼠标移动：持续触发，当鼠标移出此元素上停止触发。

    <body>
    <div style="width: 100px;height: 100px; background:red"></div>
    <script>
        var div=document.getElementsByTagName("div")[0];
        div.onmousemove=function () {
            console.log("mousemove-鼠标在div上移动");
        }
    </script>
</body>

    当在div区域内移动时，不停的打印mousemove-鼠标在div上移动。当鼠标移出div区域时，停止打印。结果为：

    图片描述

    4.键盘事件

    键盘事件
    一般我们都是绑定在 document上进行全局的监控,
    或者可以在 表单控件上进行监听

    键盘按下
        keydown
        keypress - 功能键不触发(键盘的上下左右等功能键不触发)

    键盘抬起
        keyup

    注意：

    keydown 和 keypress的区别：keypress 功能键不触发(例如：键盘的上下左右等功能键不触发 keypress 事件)
    <body>
<div style="width: 100px;height: 100px; background:red"></div>
<input type="text" id="t">
<script>
    var div=document.getElementsByTagName("div")[0];
    var input=document.getElementById("t");
    document.onkeydown = function(){
        console.log( "document - keydown" );
    };

    document.onkeypress = function(){
        console.log( "document - keypress" );
    };

    document.onkeyup = function(){
        console.log( "document - keyup" );
    };
    //------------------------------------------
    t.onkeydown = function(){
        console.log( "t - keydown" );
    };

    t.onkeypress = function(){
        console.log( "t - keypress" );
    };

    t.onkeyup = function(){
        console.log( "t - keyup" );
    };
</script>
</body>

    eg：当在此页面上 按下 键盘上的 a ，结果为：

    图片描述

    eg：当在此页面上 按下 键盘上的 shfit ，结果为：

    图片描述

    eg：当在此页面上的input框中 输入 键盘上的 a ，结果为：

    图片描述

    5.焦点事件

    焦点

        页面中一些元素 可以获得 焦点,
    当他们获得焦点的时候, 我们可以操作他们

    注意: 不是所有 的 元素 都可以获得焦点
        浏览器中只会有 一个元素 得到焦点,当一个元素得到焦点的时候,必然会有另一个元素失去焦点

切换焦点的方法：
切换焦点的方式:
    1 - 按tab
        tabIndex(如果没使用tabIndex，则用tab切换，是按页面节点顺序切换。如果写了tabIndex的值，则按值的大小，从小到大切换)
    2 - 点击
    3 - js
    4 - html autofocus（页面打开就自动获取焦点）
     
 焦点事件
    onfocus（获取焦点）
    onblur（失去焦点）
焦点方法
    t.focus()
    t.blur()

    案例一：（代码运行结果很难描述，大家自行运行。）

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<div id="box"></div>
<input type="text" id="t" tabIndex = "1" />
<hr />
<input type="text" id="t2" tabIndex = "3" />
<hr />
<input type="text" tabIndex = "2"  autofocus/>
<hr />
<button id="btn">第二个输入框获取到焦点</button>
<script>
    var t = document.getElementById("t");
    var t2 = document.getElementById("t2");
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");

    //t获取焦点时，打印t-focus。
    t.onfocus = function(){
        console.log( "t-focus" );
    };
    //box获取不到焦点，故打印不出
    box.onfocus = function(){
        console.log( "box-focus" );
    };
    //当btu点击，让t2调用获取焦点方法
    btn.onclick = function(){
        t2.focus();
    }
</script>
</body>
</html>

    案例二：焦点事件和方法

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<input type="text" id="t" />
<button id="btn">输入框获取到焦点</button>
<script>
var t = document.getElementById("t");
var btn = document.getElementById("btn");
//获取焦点触发的事件
t.onfocus = function(){
    console.log( "t - focus" );
};
//失去焦点触发的事件
t.onblur = function(){
    console.log( "t - blur" );
};
btn.onclick = function(){
    //btu点击时，给调用获取焦点方法
    t.focus();
}


</script>
</body>
</html>
    javascriptcsshtml
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（十五）—数组去重
    下一篇 »
    JS基础入门篇（二十）—事件对象以及案例（二）

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新