【JavaScript-事件①】事件三要素，事件处理程序

最新推荐文章于 2024-07-26 20:46:33 发布

Aic山鱼

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.8k

点赞数 33

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

本文链接：https://blog.csdn.net/zhaochen1127/article/details/126800845

版权

小嘎鱼JavaScript专栏专栏收录该内容

32 篇文章 10 订阅

订阅专栏

1.使用element. innerText和element. innerHTML来改变元素

2.element. innerText和element. innerHTML区别

5.修改元素属性

前言

Aic山鱼在这里祝大家中秋快乐🌙

1.事件三要素

1.事件源：事件被触发的对象

2.事件类型：如何触发什么事件比如鼠标点击(onclick)，鼠标经过亦或是键盘按键

3.事件处理程序：通过一个函数赋值的方式完成

2.执行事件步骤

1.获取事件源

2.绑定事件（或注册事件）

3.添加事件处理程序

<body>
    <button id="butn">山鱼是谁？</button>
    <script>
        //1.获取事件源
        var butn = document.getElementById('butn')
        //2.绑定事件（或注册事件）butn.onclick
        //3.添加事件处理程序
        butn.onclick = function () {
            alert('山鱼是一名CSDN的小博主')
        }
    </script>
</body>

3.常见的鼠标事件

4.操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。

1.使用element. innerText和element. innerHTML来改变元素

    <style>
        //给div一个样式更加好看
        div{
            color: cadetblue;
            width: 120px;
            background-color: rgb(255, 255, 255);
        }
    </style>
</head>

<body>
    <button> 点击获取当前时间</button>
    <div>00：00：00</div>
    <script>
        // 获取元素
        var but = document.querySelector('button');
        var div = document.querySelector('div');
        // 注册事件
        but.onclick = function () {
            div.innerText = gettime();
        }
        //封装一个函数用来获取当前时间
        function gettime() {
            var date = new Date();
            var hour = date.getHours();
            hour = hour < 10 ? "0" + hour : hour;
            var min = date.getMinutes();
            min = min < 10 ? "0" + min : min;
            var sc = date.getSeconds();
            sc = sc < 10 ? "0" + sc : sc;
            return '现在是:' + hour + ":" + min + ":" + sc;
        }
    </script>

2.element. innerText和element. innerHTML区别

<body>
    <div>
    </div>
    <script>
        var div = document.querySelector('div');
        div.innerText = '<strong>Aic山鱼</strong>';// 他并不会给我们进行一个加粗的效果，反而会将加粗标签暴露出来，不进行标签的识别，还会去除空格和换行
        div.innerHTML = '<strong>Aic山鱼</strong>';// 而innerHTML会对HTML所属的标签进行一个识别，然后就会显示加粗后的效果
        // 当然在实际使用中一般就使用innerHTML
    </script>
</body>

element. innerText和element. innerHTML具有可读性，可以获取元素内容

element. innerText不进行标签的识别，还会去除空格和换行

innerHTML会进行标签的识别

5.修改元素属性

<style>
        img {
            width: 142px;
            height: 142px;
        }
    </style>
</head>

<body>
    <button id="one">Aic山鱼</button>
    <button id="two">Aic山鱼妹</button><br>
    <img src="img/shanyu.jpg" alt="">
    <script>
        var sy = document.getElementById('one');
        var sym = document.getElementById('two');
        var img = document.querySelector('img');
        sym.onclick = function () {
            img.src = 'img/山鱼妹.jpg';
        }
        sy.onclick = function () {
            img.src = 'img/shanyu.jpg';
        }
    </script>
</body>

以我单身10年的手速来操作一波