【如果你要学JS⑧】——[JavaScript-事件]事件三要素，事件处理程序

原创

像素人

修改于 2023-12-21 19:22:23

4940

修改于 2023-12-21 19:22:23

文章被收录于专栏：如果你要学JS如果你要学JS

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('像素人是一名前端')
        }
    </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>
 HTML区域：
<body>
    <button> 点击获取当前时间</button>
    <div>00：00：00</div>
</body>

js区域：
    <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>像素</strong>';// 他并不会给我们进行一个加粗的效果，反而会将加粗标签暴露出来，不进行标签的识别，还会去除空格和换行
        div.innerHTML = '<strong>像素</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">像素</button>
    <button id="two">像素妹</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/xiangsu.jpg';
        }
    </script>
</body>