javascript的事件三要素

小鱼儿 2022-06-01 06:49 244阅读 0赞

**事件三要素包含**

事件源

是指那个元素引发的事件。比如当你点击cdsn图标的时候，会跳转到cdsn首页。那么这个cdsn图标就是事件源。

再或者，可以这样理解， 当你对**某个元素**执行动作的时候，会触发一系列效果（动画，跳转....），那么这个元素就是事件源

事件

事件是指执行的动作。

例如，**点击，鼠标划过，按下键盘，获得焦点。**

事件驱动程序

事件驱动程序即执行的结果。

例如，当你点击cdsn图标的时候，会**跳转到cdsn首页**。那么**跳转到cdsn首页**就是事件的处理结果。

执行事件的步骤

1.  获取元素
2.  绑定事件
3.  书写事件驱动程序

例如

全部代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <button>点击我有惊喜</button>
        <div id="box"></div>
        <script>
            var btn = document.getElementsByTagName("button")[0];
            var box = document.getElementById("box");
    
            btn.onclick =function () {
                box.innerHTML = "<img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516692944212&di=38c2e662673923e26603efe1da3d935d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Decfe83b9042442a7ba03f5e5b83bc827%2F728da9773912b31bc2fe74138d18367adab4e17e.jpg\" alt=\"\">";
    
            }
        </script>
    </body>
    </html>

html代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <button>点击我有惊喜</button>
        <div id="box"></div>
    </body>
    </html>

就不写css样式了

JavaScript代码

DOM是document object model的缩写， 是文档对象模型。

BOM是browser object model的缩写，是浏览器对象模型。