J S 操作属性、样式

最新推荐文章于 2024-07-25 11:26:35 发布

weixin_45987479

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量178

点赞数

文章标签： html 前端 web css javascript

本文链接：https://blog.csdn.net/weixin_45987479/article/details/125525826

版权

1.JS事件是什么及作用

（1）事件是发生在 HTML 元素上的一些事情。

2.事件的三要素

        （1）事件源：网页上的元素。如：按钮，输入框等
        （2）事件类型：为用户或浏览器的行为。如：鼠标点击，选中输入框等
        （3）事件处理程序：事件发生后定义的程序。如：跳转网页、算数运算等。

3.掌握给元素绑定事件的方法

        （1）在DOM元素中直接绑定
        （2）在JavaScript代码中绑定
        （3）使用监听函数addEventListener() 绑定

4.掌握给元素解绑事件的方法

（1）直接删除法，使用“对象.οnclick=false;”
（2）使用addEventListener绑定事件，使用removeEventListener删除绑定

5.掌握常用的事件

6.代码分享

（1）JS事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>123</div>
    <button>点击</button>
    <button class="btn2">点击</button>
    <button onclick="alert('111')">点击</button>
    <script>
        // 事件三要素
        /**
         * 事件源
         * 网页元素
         * 
         * 事件类型
         * 用户与浏览器交互的行为，鼠标点击、输入框选中等
         * 
         * 事件处理程序
         * 事件发生后的处理程序(函数/方法)
         * 
         */

        //  绑定事件
        //  有三种方法
        // ①onclick
        // 同一个元素同一个事件只能定义一个监听函数
        // 语法： ele.事件类型 = 事件处理程序(函数) function(){}
        // 解绑方法：  ele.事件类型 = false;
        var a = 5;
        var btn = document.querySelector('button');
        btn.onclick = function () {
            alert('我们单击了按钮一');
            if (a <= 0) {
                btn.onclick = false;
            }
            a--;
            console.log(a);
        }



        // ②addEventListener
        // 可针对同一个元素，添加多个监听处理函数
        // ele.addEventListener('事件类型',事件处理函数 function(){})
        // 解绑方法：ele.removeEventListener('事件类型',事件处理函数名)
        var btn2 = document.querySelector('.btn2');
        btn2.addEventListener('click', function a() {
            alert('点击第二个按钮');
            btn2.removeEventListener('click', a);
        });

        // ③行内标签绑定
        // 不推荐
        // 解绑方式：互联网搜索看看
    </script>

</body>

</html>

（2）百度换肤

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度换肤</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(./百度换肤/images/1.jpg);
        }
        
        div {
            overflow: hidden;
            width: 460px;
            height: 90px;
            margin: 1px auto;
            background-color: white;
        }
        
        div ul {
            margin: 5px 10px;
        }
        
        div ul li {
            list-style: none;
            float: left;
        }
        
        div ul li img {
            width: 110px;
            height: 80px;
        }
    </style>
</head>
 
<body>
    <div>
        <ul>
            <li><img src="./百度换肤/images/1.jpg" alt=""></li>
            <li><img src="./百度换肤/images/2.jpg" alt=""></li>
            <li><img src="./百度换肤/images/3.jpg" alt=""></li>
            <li><img src="./百度换肤/images/4.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        // 获取所有的li元素
        var lis = document.querySelectorAll('li');
        var body = document.body;
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                var img = this.querySelector('img');
                var src = img.src;
                body.style.background = 'url(' + src + ')';
            }
        }
    </script>
</body>
 
</html>