js事件简介

最新推荐文章于 2024-04-25 20:29:33 发布

一条贤鱼

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量719

点赞数

分类专栏： JavaScript 文章标签： javascript android 开发语言

本文链接：https://blog.csdn.net/qq_42284274/article/details/127143598

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

01、简介

事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于Web应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

JavaScript是以事件驱动为核心的一门]语言。JavaScript 与HTML之间的交互是通过事件实现的。

02、事件的三要素

事件的3要素:事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯开了或者关了。

再比如，网页上弹出一个广告，我点击右上角的x，广告就关闭了。这件事情里，事件源是: X。事件是：onclick。事件驱动程序是：广告关闭了。
于是我们可以总结出：谁弓发的后续事件，谁就是事件源。

总结：

事件源：引发后续事件的html标签。
事件：js已经定义好了(见下图)。
事件驱动程序：对样式和html的操作。也就是DOM。

也就是说，我们可以在时间对应的属性中写一些js代码，当事件被触发时,这些代码将会执行。

代码书写步骤：

获取事件源: document.getElementByld(“box”); // 类似于Android里面的findViewByld
绑定事件：事件源box.事件onclick = function({事件驱动程序};
书写事件驱动程序：关于DOM的操作。

最简单的代码举例: （点击box1，然后弹框）

<body>
<div id="box1"></div>
<script type="text/javascript">
    // 1、获取事件源
    var div = document. getE 1 ementById("box1");
    // 2、绑定事件
    div. onclick = function ( {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>
</body>

常见事件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dfxO6xKM-1664697197381)(D:\文档\js文档\文档图片\js常见事件.png)]

下面针对这事件的三要素,进行分别介绍。

获取事件源的方式( DOM节点的获取)

常见获取方式：

var div1 = document.getElementById("box1"); //方式一: 通过id获取一个元素节点

var arrl = document.getElementsByTagName("div"); //方式二:通过标签名获取元素节点数组，所以有s

var arr2 = document.getElementsByClassName("hehe");//方式三:通过类名获取元素节点数组，所以有s

绑定事件的方式

方式一（直接绑定匿名函数）：

<button type="button">点击改变颜色< /button>
<script type= "text/javascript">
    var btn = document.querySelector( "button" )
    console.1og([btn])
    //1绑定事件的方式
    btn.onclick = function(event){
        //浏览器在事件函数调用的时候，都会默认传入一个事件对象,该对象包含了此次事件的详细信息
        console.log(event)
        var d1 = document. querySelector( "#d1" )
        if( d1.style.backgroundColor=="pink"){
            d1.style.backgroundColor = " aqua";
        }else{
            d1.style.backgroundColor = "pink";
        }
    }
</script>

方式二（单独定义函数再绑定）：

<div id="box1" ></div>
<script type="text/javascript">
    var div1 = document. getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn; //注意， 这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
    	alert("我是弹出的内容");
    }
</script>