javascript dom事件与如何操作元素|越行勤‘s Blog

dom 事件

事件的三要素

    <button id="btn">事件</button>
    <script>
        //获得事件源 btn
        var btn = document.getElementById('btn');
        //事件类型 onclick
        //事件处理程序 ---匿名函数函数
        btn.onclick = function () {
            alert('你点到我了');
        }
    </script>

事件源：谁？网页上的元素
事件类型：咋样？鼠标点击鼠标进过按键被按下等
事件处理程序：要做什么

知道是事件的三要素，那么对于的事件的处理，我们就要

获取事件源
绑定事件（如果什么事件都不绑定，那就每次页面刷新的时候执行）
添加事件处理程序：通过匿名函数赋值的方式完成

常见的鼠标事件

事件	描述
`onmousedown`	鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
`onmouseup`	鼠标按钮被释放弹起时触发。不能通过键盘触发。
`onclick`	单击鼠标左键或者按下回车键时触发。
`onfocus`	获得鼠标焦点时触发
`onblur`	失去鼠标焦点触发
`onmouseover`	鼠标经过
`onmouseout`	鼠标离开
`mousemove`	鼠标在元素内部移到时不断触发。不能通过键盘触发。

DOM操作元素

操作元素属性

常用的元素属性修改

标签的内容innerText,innerHTML
src,href
id,alt,title

这些属性都是我们获取的元素后的属性，我们可以赋值修改他，也可以给其他元素赋值取出来他。

`innerText`,`innerHTML`的区别

修改标签内内容，如果被修改的标签里面有html元素会被覆盖

我们给这两个属性赋值可以修改，赋值给别的变量就可以获内容

element.innerText
- 如果内容里有html 继续当文字来处理
- 空格和换行会被无视

elwment.innerHTML

如果内容里有html内容，会被当成html来处理
空格和换行会被保留

    <!-- strong也会被修改 -->
    <button id="btn1">innerText</button>
    <div id="Text"><strong>Text</strong></div>
    <button id="btn2">innerHTML</button>
    <div id="HTML"><strong>HTML</strong></div>
    <script>
        var text = document.getElementById('Text');
        var HTML = document.getElementById('HTML');
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        btn1.onclick = function () {
            // i会被当成文字输出 
            text.innerText = '<i>我爱你</i> ';
        }
        btn2.onclick = function () {
            HTML.innerHTML = '<i>我爱你</i>';
        }
    </script>

案例：显示和隐藏密码

Animation

我们通过修改表单的type属性和img的src属性来实现本次操作，，为了能实现循环操作，我们定义一个flag变量，注意的是flag不能是函数的局部变量，这样的话flag永远是1了。

    <div class="box">
        <label for="password"><img src="img/close.png" alt="" id="eye"></label>
        <input type="password" name="" id="pwd" vaule="请输入密码">
        <a href="#">忘记密码</a>
    </div>
    <script>
        var flag = 0;
        var pwd = document.getElementById('pwd');
        var eye = document.getElementById('eye');
        eye.onclick = function () {

            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'img/open.png';
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = 'img/close.png';
                flag = 0;
            }
        }
    </script>

修改样式 style

element.style 行内样式的操作
element.className类名样式操作（直接修改类名）

我们如果要修改具体的样式比如说字体颜色可以给 element.style.color='#666',如果我们修改的样式太多的话，推荐这样修改

我们可以先写个类，然后修改类名即可。

注意:

js里的属性名字采用驼峰命名法，和css的名字不一样
element.style 修改的样式属于行内样式，比css权重要高

案例：关闭按钮的实现

控制 visibility = 'hidden';来实现隐藏，visibility 还会继续占用原来的位置，不会影响格局。

    <div id="box" class="box">
        <img src="img/QQ图片20210114221347.png" alt="" title="不要关掉我">
        <i id="close-btn">x</i>
    </div>
    二次元
    <script>
        var btn = document.querySelector('#close-btn');
        var box = document.querySelector('#box');
        btn.onclick = function () {
            box.style.visibility = 'hidden';
        }

放假咸鱼的第17天
微信小程序