当前位置：网站首页>js之什么是事件？事件三要素以及操作元素

js之什么是事件？事件三要素以及操作元素

2022-04-23 06:25:00 【小白蛋挞】

事件是可以被js侦测到的行为 触发--响应机制

1.页面中每个元素都可以产生触发js的事件，例如我们可以在用户点击时产生一个事件，然后去执行某些操作。下拉列表，鼠标经过显示；密码隐藏和显示，通过点击某个元素。

事件三要素（点击一个按钮，弹出一个对话框）

1.事件源 事件被触发的对象 谁 按钮

2.事件类型 怎末触发的 比如点击触发 经过 键盘按下... 鼠标点击

3.事件处理程序 通过函数赋值的方式，要做什么事 弹出对话框

执行事件的过程

1.获取事件源

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

3.添加事件处理程序（采取函数赋值的方式）

//获取事件源
        var div = document.getElementById('dd');
        //注册事件 处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }

操作元素-修改元素内容

element.innerText='要修改的内容'，或者element.innerHTML='要修改的内容'

从起始位置到终止位置的内容

1.innerText不识别html标签，里面的标签会直接显示，非标准，同时换行和空格也会去掉

2.innerHTML用的最多 识别html标签 W3C标准，使用多，保留空格和换行

div.innerText = '<strong>今天是</strong>2022';
       
        div.innerHTML = '<strong>今天是</strong>2022';

 

 操作元素-修改元素的属性

<body>
    <!-- src href id alt title 
    点击不同的按钮修改不同的图片-->
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="ldh.jpg" alt="" title="刘德华">
    <script>
        //修改元素属性 src
        //1.获取元素 三个元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2.注册事件 处理程序
        zxy.onclick = function() {
            img.src = 'zy.jpg';
            img.title = '张学友'
        }
        ldh.onclick = function() {
            img.src = 'ldh.jpg';
            img.title = '刘德华';
        }
    </script>
</body>

操作元素-修改表单属性

比较特殊，不能用innerHTML和innerText

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <!-- type value checked seleccted disabled -->
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件 处理程序
        btn.onclick = function() {
                // input.innerHTML = '点击了';
                // 不变化 inner HTML时普通盒子才有的 表单里面的值是通过value来修改
                input.value = '被点击了';
                // btn.disabled = true;
                this.disabled = true;
                //指向的是事件函数的调用者 btn
            }
            // disabled被禁用了  如果想让某个表单被禁用 不能再点击
    </script>
</body>

操作元素-修改样式属性

<script>
        var div = document.querySelector('div');
        div.onclick = function() {
            //div.style里面的属性采取驼峰命名法
            //js中会把修改的样式加到行内样式中，所以权重高，
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>

使用className修改样式属性

  var div = document.querySelector('div');
        div.onclick = function() {
            // this.style.color = '#666';
            // this.style.backgroundColor = 'pink';
            // this.style.width = '300px';
            //要改的样式多了写起来麻烦 可以用className
            div.className = 'first change';
            // 如果要保留之前的样式 还要加上 因为这个是把之前的类名直接给覆盖了
        }

版权声明
本文为[小白蛋挞]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_61547956/article/details/124179958

边栏推荐

猜你喜欢

随机推荐