DOM事件基础、操作元素

最新推荐文章于 2023-03-10 20:53:50 发布

二大一

最新推荐文章于 2023-03-10 20:53:50 发布

阅读量187

点赞数 1

分类专栏：一些基础知识和问题文章标签： javascript 前端 html es6 java Powered by 金山文档

本文链接：https://blog.csdn.net/NY_21/article/details/128723608

版权

一些基础知识和问题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件基础

一、事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解：触发--- 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

二、事件三要素

事件源（谁）

事件类型（什么事件）

事件处理程序（做啥）

<body>
    <button id="btn">按钮</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('事件');
        }
    </script>
</body>

三、执行事件的步骤

获取事件源

注册事件（绑定事件）

添加事件处理程序（采取函数赋值形式）

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

四、常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

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

一、改变元素内容

element.innerText

从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }

        function getDate() {
            var date = new Date();
            // 我们写一个 2023年 1月 18日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>
</body>

element.innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2023';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2023';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

二、修改元素属性

在html中有很多元素属性可以更改，如链接，地址，id等等。

<body>
    <button id="img1">img1</button>
    <button id="img2">img2</button> <br>
    <img src="images/1.jpg" alt="" title="img1">

    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var img1 = document.getElementById('img1');
        var img2 = document.getElementById('img2');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        img1.onclick = function() {//点击事件
            img.src = 'images/1.jpg';//更改img路径
            img.title = '是img1';//更改鼠标悬停时的文字显示
        }
        img2.onclick = function() {
            img.src = 'images/2.jpg';
            img.title = '是img2';
        }
    </script>
</body>

点击img1结果

点击img2结果

例：分时间问候并且显示不同的图片

根据系统时间判断当前时间，显示相应的问候语和图片。

<body>
    <img src="images/1.jpg" alt="">
    <div>上午好</div>
    <script>
        // 根据系统不同时间来判断，所以需要用到日期内置对象
        // 利用多分支语句来设置不同的图片
        // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        // 需要一个div元素，显示不同问候语，修改元素内容即可
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2. 得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/1.jpg';
            div.innerHTML = '老伙计，上午好，好好写代码';
        } else if (h < 18) {
            img.src = 'images/2.jpg';
            div.innerHTML = '老伙计，下午好，好好写代码';
        } else {
            img.src = 'images/3.jpg';
            div.innerHTML = '老伙计，晚上好，好好写代码';

        }
    </script>
</body>

二大一

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件基础、操作元素

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
复制链接

扫一扫