【web】JavaScript——Web APIs笔记小结 dom 样式属性（dom+事件）

    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        window.onload = function() {
                document.write('<div>123</div>');
            }
        var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>');
        }
    </script>

window.onload = function() {
    document.write('<div>123</div>');
}

※※ element.innerHTML和document.createElement()

创建少量元素差别不大，但多个元素时，innerHTML 效率更高

I.DOM 重点核心

dom的元素操作主要有创建、增、删、改、查、属性操作和事件操作

①创建 → document.write()、innerHTML、createElement()

②增 → appendChild、insertBefore

③删 → removeChild

④改

⑤查

⑥属性操作

⑦事件操作

忘了的戳这 → 增删，其他的可能在别的博客里Orz

II.事件

① 注册事件(绑定事件)

※※ 传统和方法监听注册方式概述

※※※※ addEventListener 事件监听方式（推荐）

※※※※ 代码

※※ attachEvent 注册事件（ie9前支持，不推荐用）

MCD上没搜到pink这个界面orz

※※※※代码

② 删除事件

※※ 兼容性方案

※※ 代码

③ DOM 事件流

※※ 理论部分

即：捕获 → 从上往下，冒泡 → 从下往上

※※ 代码验证

※※※※ 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        /*var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true); 
        */
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

</html>

④ 事件对象

※※ 概念

※※ 使用语法

※※※※ 兼容性方案

※※ 代码部分

<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;
                console.log(e);


            }
            // div.addEventListener('click', function(e) {
            //         console.log(e);

        //     })
        // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
        // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
        // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
        // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    </script>
</body>

⑤ 常见属性和方法

※※ e.target 和this的区别

※※※※ 返回的东西不同

e.target → 返回的是触发事件的对象 / 元素

this → 返回的是绑定事件的对象 / 元素

※※※※ currentTarget

与this很相似，都指向实际绑定的事件

※※ 阻止默认行为

※※ 阻止事件冒泡

※※ 代码（两种方式）

※※ 事件委托（代理、委派）

※※※※ 理论

※※※※ 代码

⑥ 常用鼠标事件

※※ 禁止右键菜单/选中文字

※※ 鼠标事件对象

page常用，screen不常用

※※ 案例跟随鼠标的天使（略过）

⑦ 常用键盘事件

※※ 类型

※※ 案例模拟京东按键输入内容（略过）

~~时间不够只能略过案例了呜呜呜，每周都在赶ddl啊啊啊~~

~~要准备开始刷题了呜呜~~

~~要努力卷起来啊！~~

恭喜看到这的小伙伴，你已经完成 JavaScript 中 DOM 部分的学习了~！！

~~接下来我准备直接开始准备蓝桥杯了qwq，下周二还有个省赛选拔要打啊啊啊~~

~~祝我好运T^T~~

有用的话欢迎点赞评论收藏哦嘿嘿嘿~ ！

进击的文文文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web】JavaScript——Web APIs笔记小结 dom 样式属性（dom+事件）

在学了在学了qwq 每天都被周围的卷王带着卷orz 又又又鸽了一个多月没学习呜呜orz 期末考成绩出了决定这学期痛改前非qwq 还有一周就蓝桥杯了qwq得赶紧收心学习了啊啊啊！来源：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts目录⑥ 三种动态创建元素区别※※ document.write()※※ element.innerHTML和document.createElement()I.DOM 重点核心II.事件① 注册事件(绑定事件)※
复制链接

扫一扫