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

目录

前言 

1.事件三要素

2.执行事件步骤

3.常见的鼠标事件

 4.操作元素

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

 2.element. innerText和element. innerHTML区别

5.修改元素属性

前言 

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

1.事件三要素

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

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

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

2.执行事件步骤

1.获取事件源

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

3.添加事件处理程序

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

3.常见的鼠标事件

 4.操作元素

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

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

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



     点击获取当前时间
    
00：00：00
    
        // 获取元素
        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;
        }
    

 2.element. innerText和element. innerHTML区别

    

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

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

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

innerHTML会进行标签的识别

5.修改元素属性

        img {
            width: 142px;
            height: 142px;
        }
    



    Aic山鱼
    Aic山鱼妹
    
    
        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';
        }
    

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

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

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