JavaScript事件介绍与使用

最新推荐文章于 2024-07-19 12:58:53 发布

攒了一袋星辰

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量936

点赞数 12

分类专栏：高级编程文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/xiugtt6141121/article/details/140087691

版权

高级编程专栏收录该内容

30 篇文章 0 订阅

订阅专栏

事件

1.概述

js事件可以是浏览器行为，也可以是用户行为.

如果是浏览器行为例如是页面加载完成事件。onload

如果是用户行为就是用户的一切操作都是发生的事件，鼠标操作事件(单击，双击，悬浮等)，键盘操作事件(键盘录入等)。

2.常见事件

事件名	描述
onload	某个页面或图像被完全加载之后触发
onsubmit	当表单提交时触发该事件—注意事件源是表单form
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onblur	元素失去焦点(输入框)
onfocus	元素获得焦点(输入框)
onchange	用户改变域的内容。一般使用在select标签中。
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住，一直按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上除了输入框
onmouseout	鼠标从某元素移开除了输入框
onmousemove	鼠标被移动

3.html标签绑定事件

标签绑定事件：就是让上述的js事件作用在某个标签上

1.静态绑定

就是将事件名作为标签的属性名，在属性值中调用js函数。

需求：

1、给div标签绑定单击事件,输出div的文本

2、给div标签绑定鼠标悬浮事件，使其背景颜色变红

3、给div标签绑定鼠标移出事件，使其背景颜色变蓝

说明：定义一个div，并给div设置宽、高和背景颜色灰色：#ccc。

设置div的代码：

<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: #ccc;/*灰色*/
			}
</style>

就是将事件名作为html标签的属性名，在属性值中调用js函数。

<标签名 事件名="调用的js函数" 事件名="调用的js函数" 。。。></标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;/*灰色*/
        }
    </style>

</head>
<body>
    <!--静态绑定事件:就是将事件名作为html标签的属性名，在属性值中调用js函数。-->
    <!--
        这里的this表示当前div标签对象
    -->
    <div onclick="fn1(this);" onmouseover="fn2(this);" onmouseout="fn3(this);">div1</div>
    <script type="text/javascript">
        //需求：
        // 1、给div标签绑定单击事件,输出div的文本
        function fn1(obj) {//obj=this
            //obj接收的是this表示上述的div标签对象
            console.log(obj.innerHTML);
        }
        // 2、给div标签绑定鼠标悬浮onmouseover事件，使其背景颜色变红
        function fn2(obj) {//obj=this
            obj.style.backgroundColor = 'red';
        }
        // 3、给div标签绑定鼠标移出onmouseout事件，使其背景颜色变蓝
        function fn3(obj) {
            obj.style.backgroundColor = 'blue';
        }

    </script>
</body>
</html>

小结：

html静态绑定js事件：

 <div onclick="fn1(this);" onmouseover="fn2(this);" onmouseout="fn3(this);">div1</div>

2.动态绑定：

就是根据dom技术获取某个标签对象，使用标签对象调用事件名，然后将匿名函数赋值事件名。

标签对象.事件名 = function(){
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;/*灰色*/
        }
    </style>

</head>
<body>
    <!--动态绑定事件:就是根据dom技术获取某个标签对象，使用标签对象调用事件名，然后将匿名函数赋值事件名。-->
    <div>div1</div>
    <script type="text/javascript">
        //需求：
        // 1、给div标签绑定单击事件,输出div的文本
        //1.1获取标签对象
        let oDiv = document.getElementsByTagName('div')[0];
        //1.2给div绑定单击事件
        oDiv.onclick = function () {
            //这里的this是调用当前事件onclick的标签对象oDiv
            console.log(this.innerHTML);
        };
        // 2、给div标签绑定鼠标悬浮onmouseover事件，使其背景颜色变红
        oDiv.onmouseover = function () {
            this.style.backgroundColor = 'red';
        };
        // 3、给div标签绑定鼠标移出onmouseout事件，使其背景颜色变蓝
        oDiv.onmouseout = function () {
            this.style.backgroundColor = 'blue';
        };
    </script>
</body>
</html>

小结：

1.html绑定js事件有两种方式：

1）静态绑定：将事件名作为标签的属性名，在属性值中调用js函数

<div onclick="fn(this);">柳岩</div>
<script type="text/javascript">
    
    // 1、给div标签绑定单击事件,输出div的文本
    function fn(obj) {//obj=this
        console.log(obj.innerHTML);
    }
    
</script>

2)动态绑定：使用标签对象调用js事件，使用匿名函数给其赋值

let oDiv = document.getElementsByTagName('div')[0];
    //给上述div动态绑定js单击事件
    oDiv.onclick = function () {
        //this表示调用当前事件onclick的标签对象oDiv
        // console.log(oDiv.innerHTML);
        console.log(this.innerHTML);
    };

2.静态绑定和动态绑定区别？

静态绑定缺点：js和html标签耦合在一起

动态绑定：解耦合。

攒了一袋星辰

关注

12
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript事件介绍与使用

js事件可以是浏览器行为，也可以是用户行为.如果是浏览器行为例如是页面加载完成事件。onload如果是用户行为就是用户的一切操作都是发生的事件，鼠标操作事件(单击，双击，悬浮等)，键盘操作事件(键盘录入等)。
复制链接

扫一扫