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

最新推荐文章于 2022-10-29 16:52:48 发布

weixin_34360651

最新推荐文章于 2022-10-29 16:52:48 发布

阅读量68

点赞数

原文链接：https://segmentfault.com/a/1190000015188461

版权

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>

weixin_34360651

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫