JavaScript之JS事件机制

最新推荐文章于 2024-09-16 17:42:02 发布

熊凯瑞

最新推荐文章于 2024-09-16 17:42:02 发布

阅读量1k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_46106857/article/details/126251995

版权

JavaScript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

JS事件机制

一、JS事件机制
二、衍生思考

一、JS事件机制

1、解释

当我们的行为动作满足了一定的条件后，会触发某类事务的执行。

2、作用

主要是结合js的函数来使用

3、内容

3.1 单双击事件

单机：onclick     当鼠标单击的时候会触发
双击：ondblclick  当鼠标双击的时候会触发

3.2 鼠标事件

onmouseover      当鼠标悬停在某个HTML元素上的时候会触发
onmousemove      当鼠标在某个HTML元素上移动的时候会触发
onmouseout       当鼠标在某个HTML元素上移出的时候会触发

3.3 键盘事件

onkeyup          当键盘在某个HTML元素上弹起的时候会触发
onkeydown        当键盘在某个HTML元素上下压的时候会触发

3.4 焦点事件

onfocus          当某个HTML元素获取焦点的时候会触发
onblur           当某个HTML元素失去焦点的时候会触发

3.5 页面加载事件

onload           当页面加载成功后触发

4、注意

（1） js中添加事件的第一种方式：
在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数
（2） js中的事件只有在当前HTML元素上有效
（3）一个HTML元素可以添加多个不同的事件
（4）一个事件可以监听触发多个函数的执行，但是不同的函数要使用分号隔开

5、实例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之事件机制学习1</title>
    <script>
        //声明js函数
            //单击事件
                function testOnclick(){
                    alert("单击事件");
                }
            //双击事件
                function testOndblclick(){
                    alert("双击事件");
                }
            //鼠标事件
                function testOnmouseover(){
                    alert("鼠标悬停事件");
                }
                function testOnmousemove(){
                    alert("移动了");
                }
                function testOnmouseout(){
                    alert("从区域移出了");
                }
            //键盘事件
                function testOnkeyup(){
                    alert("键盘弹起事件");
                }
                function testOnkeydown(){
                    alert("键盘下压事件");
                }
            //焦点事件
                function testOnfocus(){
                    document.getElementById("showdiv").innerHTML="哈哈";
                    //alert("获取焦点事件");
                }
                function testOnblur(){
                    alert("失去焦点事件");
                }
            //页面加载
                function testOnload(){
                    alert("页面加载事件");
                }
            //测试
                function test(){
                    alert("测试一个事件的多个函数执行");
                }
    </script>
    <style type="text/css">
        #showdiv {
            width: 300px;
            height: 300px;
            border:solid 1px;
        }
    </style>
</head>
<body  onload = "testOnload()">
    <hr>
    <input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();"/>
    <input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();"/>
    <hr/>
    <br/>
    <hr>
    <div id="showdiv" onmouseover = "testOnmouseover();" onmousemove="testOnmousemove();" onmouseout="testOnmouseout();">

    </div>
    <hr/>
    <br/>
    键盘事件学习：<br/>
        键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br/>
        键盘下压事件：<input type="text" name="" id="" value="" onkeydown="testOnkeydown();"/><br/>
    焦点事件学习：<br/>
        获取焦点：<input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br/>
        失去焦点：<input type="text" name="" id="" value="" onblur="testOnblur();"/><br/>
</body>
</html>

二、衍生思考

1、给合适的HTML标签添加合适的事件

onchange-----select下拉框
onload-------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件-----用户会进行鼠标移动操作的
键盘事件-----用户会进行键盘操作的HTML元素

2、给HTML元素添加多个事件时，注意事件之间的冲突

当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。

3、事件的阻断

当事件所监听的函数将返回值返回给事件时：
false:则会阻断当前事件所在的HTML标签的功能
true:则继续执行当前事件所在的HTML标签的功能

4、超链接调用js函数

<a href="javascript:函数名()">调用js函数</a>

5、实例

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之事件机制学习2</title>
    <script>
        //值改变事件
            function testOnchange(){
                alert("值改变了");
            }
        //单机事件
            function testOnclick(){
                alert("单击事件");
            }
        //双击事件
            function testOndblclick(){
                alert("双击事件");
            }
        //事件的阻断
            function testA(){
                alert("事件的阻断");
                return false;
            }
        //超链接调用js函数
            function testHref(){
                alert("超链接调用");
            }
    </script>
</head>
<body>
    <h3>js的事件机制二</h3>
    <hr/>
    值改变事件：<input type="text" name="" id="" value="" onchange="testOnchange();"/>
    <select name="" id="" onchange="testOnchange();">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
    </select>
    <hr/>
    事件的冲突：<br/>
    <input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/> 
    <hr/>
    事件的阻断:<br/>
    <a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
    <hr/>
    超链接调用js函数：
    <a href="javascript:testHref()">调用js函数</a>
</body>
</html>