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操作元素

操作元素属性

常用的元素属性修改

  1. 标签的内容innerText,innerHTML
  2. src,href
  3. 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

  1. element.style 行内样式的操作
  2. element.className类名样式操作(直接修改类名)

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

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

注意:

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

案例:关闭按钮的实现

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

x号

    <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天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://blog.yxqin.top/2021/01/11/dom-caozuoyuansu
最后更新于:  318  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟