JS- DOM Event

Posted 2020-11-14 lynnblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS- DOM Event相关的知识，希望对你有一定的参考价值。

DOM Event

一、Event与常用方法介绍

1. Event概述

　　Event对象代表事件的状态，事件通常与函数结合使用，当浏览器中控件的Event的状态发生改变时，通过javascript所绑定的函数被触发执行。Event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数。比如onkeydown，我们想知道哪个键被按下了，就需要访问Event对象的属性。

2. 常用方法介绍

    onclick             //当用户点击某个对象时触发的操作
    ondblclick          //当用户双击某个对象时触发的操作
    onfocus             //元素获得焦点
    onblur              //元素失去焦点
    onchange            //域的内容被改变
    onkeydown           //某个键盘按键被按下
    onkeypress          //某个键盘按键被按下并松开
    onkeyup             //某个键盘按键被松开
    onload              // 一张页面或一幅图像完成加载
    onmousedown         //鼠标按钮被按下
    onmousemove         //鼠标被移动
    onmouseout          //鼠标从某元素移开
    onmouseover         //鼠标移到某元素之上
    onmouseleave        //鼠标从元素离开
    onselect            //文本被选中
    onsubmit            //确认按钮被点击

3. 方法应用

onload方法

　　onload是等一张页面或一幅图像完成加载时再执行的方法。一般而言，Js的代码块都会放在<body>标签的后面。但是由于onload的这个特性使得html页面的js代码块可以放在<head>标签里面。

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            window.onload = function () {
                var ele = document.getElementsByClassName("div1")[0];
                console.log(ele.innerHTML);
            }
        </script>
    </head>
    <body>
    <div class="div1">hello div</div>
    </body>

onsubmit方法

　　该方法用于监听<form>标签的状态。当表单被提交时onsubmit会被第一时间触发，即onsubmit方法的执行优先于表单的submit方法的行。它一般被应用于对用户信息格式的匹配检查，当信息符合要求时，表单提交通过，否则阻止表单提交。阻止表单提交的方式有两种，第一种是在onsubmit方法内部使用“return false”语句；另一种需要在onsubmit方法中传进一个参数并且内部使用“e.preventDefault()”语句。其中e为方法的参数。

    <form action="" id="form1">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>
    <script>
        var ele = document.getElementById("form1");
        ele.onsubmit = function (e) {
            console.log("hello")
        }
    </script>

二、阻止事件传播

　　下面将以一个实例来说明Event事件的传播以及如何阻止事件的传播。我们定义了两个div盒子模型，实现外层div嵌套内层div，并且为其绑定事件函数。该实例的现象是当我们单击内层div所在的区域时，首先触发内层div的事件函数，而后外层div的事件函数随之触发，这就是典型的事件传播。如果我们想阻止事件的传播，即当我们单击内层div时，只触发内层的事件函数可以通过“e.stopPropagation()”语句来实现该效果。

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .outer{
                width: 300px;
                height: 300px;
                background-color: antiquewhite;
            }
            .inner{
                width: 100px;
                height: 100px;
                background-color: rebeccapurple;
            }
        </style>
    </head>
    <body>
    <div class="outer" onclick="func2()">
        <div class="inner"></div>
    </div>
    <script>
        var ele=document.getElementsByClassName("inner")[0];
        ele.onclick= function (e) {
            alert("I am inner!");
            e.stopPropagation()
        };
        function func2() {
            alert("I am outer!")
        }
    </script>
    </body>

三、DOM结点的增删改查

下面是用于增删改查的数据

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1, .div2, .div3, .div4 {  width: 300px;  height: 100px;  }

            .div1 {  background-color: green;  }

            .div2 {  background-color: yellow;  }

            .div3 {  background-color: rebeccapurple;  }

            .div4 {  background-color: deeppink;  }
        </style>
    </head>
    <body>

    <div class="div1">
        <button onclick="add()">增</button>
        文本1
    </div>
    <div class="div2">
        <button onclick="del()">删</button>
        文本2
    </div>
    <div class="div3">
        <button onclick="change()">改</button>
        <p>文本3</p>
    </div>

增加DOM结点

　　首先使用“ createElement( ) ”语句创建需求标签元素，然后对该元素赋值处理。增加该元素完毕后需要在插入处获取该位置所处的父节点，最后将所添加的新标签元素作为参数添加到“appendChild( )”语句中即可。

    function add() {
        var ele = document.createElement("p");
        ele.innerHTML = "<h1>增加的内容</h1>";
        ele.style.color = "red";
        ele.style.fontSize = "10px";
        var father = document.getElementsByClassName("div1")[0];
        father.appendChild(ele)
    }

删除DOM结点

　　删除DOM结点需要使用到局部查找。首先获取需要删除结点的父结点，一般使用的是ClassName方法，然后使用局部查找获取子结点，最后将子结点添加到使用“removeChild( )”语句中即可。需要特别注意的是局部查找不支持id和属性名查找。

    function del() {
        var father = document.getElementsByClassName("div1")[0];
        var son = father.getElementsByTagName("p")[0];
        father.removeChild(son)
    }

修改DOM结点

　　修改DOM结点首先需要创建新标签元素，对新标签元素赋值。而后，获取需要修改的新标签元素和该元素所在的父结点，最后将新标签元素和需要修改的结点一起添加到一个由父结点所调用的“replaceChild( )”语句中即可。

    function change() {
        var img = document.createElement("img");//创建img标签
        //img.setAttribute("src","meinv.jpg");
        img.src = "meinv.jpg";   //设置img标签的属性
        var ele = document.getElementsByTagName("p")[0];
        var father = document.getElementsByClassName("div3")[0];
        father.replaceChild(img, ele)
    }

四、class属性的其他操作

    elementNode.className             //查看结点的class名字
    elementNode.classList.add          //往classList中添加属性
    elementNode.classList.remove    //移除classList中的属性

以上是关于JS- DOM Event的主要内容，如果未能解决你的问题，请参考以下文章

JS-DOM Event

js_DOM的导航属性--Dom_event事件

前端开发常用js代码片段

JS常用代码片段2-值得收藏

前端开发中最常用的JS代码片段