DOM-事件

news2024/11/25 10:24:39

一、事件3要素：事件源，事件类型，事件处理程序

1.事件源：触发对象按钮

2.事件类型：如何让触发，是点击onclick还是鼠标经过，键盘按下。

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

<button id="btn">唐伯虎</button>

btn.onclick = function () {
            alert('点秋香');
        }

点击完按钮后窗口会弹出‘点秋香’

总的来说，执行事件分为以下3步：

执行事件步骤：获取事件源，绑定（注册）事件，添加事件处理程序

<div>666</div>

var div = document.querySelector('div');
        div.onclick;
        div.onclick = function () {
            console.log('我被选中了');
        }

点击div的盒子3次会有下面结果，后台输出三次：

二、事件可改变元素内容

1.点击按钮，div里面的文字发生变化（点击后才会有效果）

<button>显示系统当前时间</button>
    <div>某个时间</div>

var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function () {
            // div.innerText = '2024-6-4';
            div.innerText = getDate();
        }
        function getDate() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var min = time.getMinutes();
            min = min < 10 ? '0' + min : min;
            var second = time.getSeconds();
            second = second < 10 ? '0' + second : second;
            return h + ':' + min + ':' + second;
        }

2.元素可以不添加事件,页面刷新就可以显示想要的改变

var p = document.querySelector('p');
p.innerText = getDate();

p.innerText和p.innerHTML的区别：

（1）后者可在修改的内容中可识别html标签（如strong加粗），是标准的，前者不能。

（2）p.innerText读取不会保留原来的黄行和空格，而p.innerHTML会保留

（3）这两个属性可读写获取元素里面的内容。如： console.log(p.innerText);

三、事件可改变属性

<button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images1/ldh.jpg " alt="" width="300px">

要求点击‘刘德华’按钮，图片变成相应的，title也是，张学友也同理

var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        ldh.onclick = function () {
            img.src = 'images1/ldh.jpg';
            img.title = '刘德华';
        }
        zxy.onclick = function () {
            img.src = 'images1/zxy.jpg';
            img.title = '张学友';
        }

四、练手案例-根据不同的事件出现不同的照片和问候语

    <img src="images1/s.gif" alt="">
    <div>上午好</div>

script中实现过程如下：

        //获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //2.获取当前小时数
        var date = new Date();
        var h = date.getHours();
        h = 20;
        if (h < 12) {
            img.src = 'images1/s.gif';
            div.innerHTML = '上午好，好好写代码';
        }
        else if (h < 18) {
            img.src = 'images1/x.gif';
            div.innerHTML = '下午好，好好写代码';
        }
        else {
            img.src = 'images1/w.gif';
            div.innerHTML = '晚上好，好好写代码';
        }

我是凌晨12点写的，获取当前事件为0时，结果如下：