JavaScript 笔记❀

变量、常量❀

保留字：let、class、return、function... 都被保留了（保留字列表）。

1
2
3

let l_info = "现代的变量声明方式。";
var v_info = "老旧的变量声明方式。一般情况下，我们不会再使用它。";// (1)!
const c_info = "类似于 let，但是变量的值无法被修改。";

1. 了解旧的var变量

addEventListener❀

事件监听器addEventListener
常用事件：

• DOMNodeInserted：节点插入事件
• DOMNodeRemoved：节点移除事件
• DOMSubtreeModified：子树修改事件
• DOMAttrModified：属性修改事件
• DOMCharacterDataModified：字符数据修改事件
• DOMNodeInsertedIntoDocument：节点插入文档事件
• DOMNodeRemovedFromDocument：节点从文档移除事件
• DOMActivate：激活事件
• DOMFocusIn：聚焦事件
• DOMFocusOut：失去焦点事件
• click：鼠标点击事件
• mouseover：鼠标悬停事件
• mouseout：鼠标移出事件
• mousedown：鼠标按下事件
• mouseup：鼠标松开事件
• keydown：键盘按下事件
• keyup：键盘松开事件
• change：元素发生变化事件
• submit：表单提交事件
• focus：元素获得焦点事件
• blur：元素失去焦点事件
• load：页面加载完成事件
• unload：页面卸载事件
• resize：窗口大小改变事件
• scroll：页面滚动事件
• select：文本选择事件
• error：错误发生事件
• contextmenu：右键菜单事件
• input：输入框输入事件
• cut：剪切事件
• copy：复制事件
• paste：粘贴事件
• drag：拖拽事件
• dragstart：拖拽开始事件
• dragend：拖拽结束事件
• dragenter：拖拽进入事件
• dragover：拖拽经过事件
• dragleave：拖拽离开事件
• drop：拖拽释放事件
• touchstart：触摸开始事件
• touchend：触摸结束事件
• touchmove：触摸移动事件
• touchcancel：触摸取消事件
• animationstart：动画开始事件
• animationend：动画结束事件
• animationiteration：动画重复事件
• transitionend：过渡结束事件
  ......

  1 2 3 4

  document.querySelector('myDom').addEventListener('click', function(){ //dom元素被点击时触发 console.log('我触发了'); });

MutationObserver❀

MutationObserver构造函数用来监听DOM的变化，比如节点增加、删除、属性改变、文本变动。
常用：①. 等所有dom操作结束后才触发，可以看成异步。
②. 会把dom的变化记录放到数组中进行处理。
③. 可以监听所有类型的dom变化，也能指定类型监听。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

let observer = new MutationObserver(function(e) {
    // 当元素发生变动时，执行函数
    for (let dom of e) {
        if((/myclass/.test(dom.target.className))){ //含指定class名称才触发函数
            console.log(dom.target);
        }
    }
});
// 调用MutationObserver对象的observe()方法，传入要监听的元素
let myDom = document.getElementById('myDom'); //监听myDom变化
observer.observe(myDom, {
    childList: true, //子节点的变动（指新增，删除或者更改）
    attributes: true, //属性的变动
    characterData: true, //节点内容或节点文本的变动
    subtree: true, //布尔值，表示是否将该观察器应用于该节点的所有后代节点
    attributeOldValue: true, //布尔值，表示观察attributes变动时，是否需要记录变动前的属性值
    characterDataOldValue: true, //布尔值，表示观察characterData变动时，是否需要记录变动前的值
    attributeFilter: ["class"] //数组，表示需要观察的特定属性（比如["class","src"]）
});