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


<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：00div>
    <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 = 'Aic山鱼';// 他并不会给我们进行一个加粗的效果，反而会将加粗标签暴露出来，不进行标签的识别，还会去除空格和换行
        div.innerHTML = 'Aic山鱼';// 而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年的手速来操作一波

原创✨：还希望各位大佬支持一下
点赞👍：您的赞赏是我前进的动力！
收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！

山鱼🦈的社区：欢迎大家-山鱼社区！

相关阅读:
M的编程备忘录之C++——搜索二叉树
必须使用初始化列表
进程概念（跑路人笔记）
vue3状态管理工具pinia的插件书写，pinia全局错误处理插件安排
OpenCV6-图形绘制
单链表经典算法题 1
Ae 效果：CC Scatterize
MLE＜=＞ KL
RabbitMQ工作模式-发布订阅模式
410-C++之STL模板库（9-11）

原文地址：https://blog.csdn.net/zhaochen1127/article/details/126800845