事件基础

概述：事件就是触发响应的一种机制，网页的每个元素都可以产生某些可以触发JavaScript的事件

事件由下面三部分组成

  • 事件源
  • 事件类型
  • 事件处理程序
组成部分说明
事件源事件源就是事件被触发的对象，例如一个按钮
事件类型如何触发 什么事件，例如鼠标点击（onclick)
事件处理程序通过函数赋值的方式完成

示例

<body>
    <button id="btn">按钮</button>
    <script>
        btn.onclick = function() {
            alert("这是按钮")
        }
        
        //btn属于事件源，onclick属于事件类型，function() {alert("这是按钮")}属于事件处理程序
    </script>
</body>

事件的执行步骤

获取事件源>注册事件（绑定事件）>添加事件的处理程序

常见的鼠标事件

鼠标事件触发条件
onclick鼠标点击触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发

操作元素

改变元素内容

element.innerText从开始到结束的内容，不识别html，空格和换行也会去掉

element.innerHTML开始到结束的所有内容，识别html，但是保留空格和换行

示例

<body>
  <button id="btn">按钮</button>
  <div id="time">我是时间</div>
 <script>
        btn.onclick = function() {
            time.innerText = new Date();
        }
    </script>
</body>

改变样式

行内样式

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: rgb(255, 228, 196);
    }
</style>

<body>

        <div></div>
  
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            this.style.backgroundColor = 'aqua';  //background-color的值已经被修改为aqua
        }
    </script>
</body>

类名样式

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: rgb(255, 228, 196);
    }
    
    .div1 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<body>
        <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            this.className = 'div1'
        }
    </script>
</body>

改变属性

获取属性值

  • element.属性 获取内置属性
  • element.getAttribute('属性') 获取自定义属性
<body>
    <div id="demo" id2="demo2"></div>
    <script>
        var div = document.querySelector('div')
        console.log(div.id);
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('id2'));
    </script>
</body>

>>demo
>>demo
>>demo2

设置属性值

  • element.属性 = ‘值’
  • element.setAttribute('属性','值')
<body>
    <div id="demo" id2="demo2"></div>
    <script>
        var div = document.querySelector('div')
        div.setAttribute('id2', 'test2');
    </script>
</body>

H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

例如：

<div data-index= "demo"></div>

或者Js：

element.setAttribute('data-index','demo')

节点操作

节点操作获取元素会更简单，利用父子兄弟节点关系获取，逻辑性抢，但是兼容性较差

网页中的所有内容都属于节点（标签，属性，文本，注释等），在DOM里面节点用node来表示

父节点（parentNode）

node.parentNode

得到的是离自己最近的父级节点
<body>
    <div class="box">
        <p class="son">文字</p>
    </div>

    <script>
        var son = document.querySelector('.son')
        console.log(son.parentNode);
    </script>
</body>

>> <div class="box">
   <p class="son">文字</p>
   </div>

子节点

parentNode.childNodes

得到所有的子节点，包含元素节点 文本节点等
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ol>
    <script>
        var li = document.querySelector('ul')
        console.log(li.childNodes);
    </script>
</body>

>> NodeList(7) [text, li, text, li, text, li, text]

parentNode.children

只会获取所有的子元素节点
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ol>
    <script>
        var li = document.querySelector('ul')
        console.log(li.children);
    </script>
</body>

>> HTMLCollection(3) [li, li, li]

parentNode.firstChild

返回第一个子节点，找不到则返回null，包含所有的节点
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var li = document.querySelector('ul')
        console.log(li.firstChild);
    </script>
</body>

>> #text  //第一个子节点，不管是文本还是元素

parentNode.lastChild

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var li = document.querySelector('ul')
        console.log(li.lastChild);
    </script>
</body>

>> #text

parentNode.firstElementChild

获取第一个子元素节点
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var li = document.querySelector('ul')
        console.log(li.firstElementChild);
    </script>
</body>

parentNode.lastElementChild

获取最后一个子元素节点
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var li = document.querySelector('ul')
        console.log(li.lastElementChild);
    </script>
</body>

实际开发过程中常用

考虑到兼容性的问题，在实际开发中常用children，因为children返回的是一个伪数组
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var li = document.querySelector('ul')
        console.log(li.children[2]);
    </script>
</body>

在开发过程中无法确定子元素的个数，但是又需要获取最后一个元素，可以利用数组的长度来获取
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var li = document.querySelector('ul')
        console.log(li.children[li.children.length - 1]);
    </script>
</body>

兄弟节点

node.nextSibling

得到的是下一个兄弟节点，包含元素节点或者文本节点

node.previousSibling

返回的是上一个兄弟节点，同样包含元素节点或者文本节点

node.nextElementSibling

返回下一个兄弟元素节点

node.previousElementSibling

返回的是上一个兄弟元素节点

上面四个找不到时返回null

创建节点

document.createElement('tagName')

document.createElement() 方法创建有tagName指定的html元素

添加节点

node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定的父节点的子节点列表的末尾

node是父级，child是子级

类似css的after伪元素

node.insertBefore(child,指定元素)

将一个节点添加到父节点的指定子节点前面

类似css的before伪元素

<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>

    <script>
        var li = document.createElement("li");
        var ul = document.querySelector('ul');
        ul.insertBefore(li, ul.children[0]);
    </script>
</body>

删除节点

node.removeChild(child)

删除一个节点，返回的是删除的节点

超简易留言板 

<style>
    .box {
        /* text-align: center; */
        margin: 0 auto;
        padding-top: 80px;
        width: 800px;
        text-align: center;
    }
    
    button {
        text-align: center;
    }
    
    textarea {
        width: 300px;
        height: 100px;
    }
    
    ul {
        padding-top: 40px;
        width: 400px;
        margin: 0 auto;
    }
    
    li {
        width: 325px;
        padding: 5px;
        margin: 15px 0;
        background-color: antiquewhite;
        margin-top: 10px;
        float: left;
    }
    
    li a {
        float: right;
    }
</style>

<body>
    <div class="box">
        <p><textarea id="" name=""></textarea></p>
        <button>提交留言</button>
        <ul>
        </ul>
    </div>
    <script>
        //获取到需要操作的元素
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //按钮点击事件
        btn.onclick = function() {
            //判断是否有输入内容，没有则弹窗
            if (text.value == '') {
                alert('错误');
                return false;
            } else {
                //创建li元素
                var li = document.createElement('li');
                //给li元素进行赋值
                li.innerHTML = text.value + "<a href='JavaScript:;'>删除</a>";
                //添加元素
                ul.insertBefore(li, ul.children[0]);
                text.value = ''; //点击提交之后清空输入框里面的内容
                //删除按钮事件
                var a = document.querySelectorAll('a')
                for (var i = 0; i < a.length; i++) {
                    a[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }

                }
            }
        }
    </script>
</body>

复制节点

node.cloneNode()

返回调用该方法的节点的一个副本。也可以叫克隆节点或拷贝节点

如果括号里面的内容是空或者是false，则只克隆复制节点本身，不克隆里面的子节点，如果为true则会克隆里面的内容

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.appendChild(ul.children[0].cloneNode());
        ul.appendChild(ul.children[0].cloneNode(true));
    </script>
</body>

//页面上就会有5个li，第四个li则没有任何内容，第5个li内容为1

动态表格案例 

<style>
    table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
    }

    td,
    th {
        border: 1px solid #333;
    }
    
    thead tr {
        height: 40px;
        background-color: #ccc;
    }
</style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>学号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
<script>
    var datas = [{
        name: '张三',
        age: 18,
        snum: 'A01',
    }, {
        name: '李四',
        age: 22,
        snum: 'A02'
    }, {
        name: '王麻子',
        age: 25,
        snum: 'A03'
    }]
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) {
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        for (var k in datas[i]) {
            var td = document.createElement('td');
            td.innerHTML = datas[i][k];
            tr.appendChild(td);

        }
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>'
        tr.appendChild(td);
    
    }
    var a = document.querySelectorAll('a');
    for (var i = 0; i < a.length; i++) {
        a[i].onclick = function() {
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
</script>

最后修改：2022 年 01 月 26 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏