程序员书籍笔记
yuadh
2022-02-03
目录

节点操作

# 节点操作

# 删除节点

node.removeChild();

var ul = document.querySelector('ul');
var btn = document.querySelector('button');
btn.onclick = function(){
    ul.removeChild(ul.children[0]);
}
1
2
3
4
5

删除节点案例

See the Pen 节点添加删除案例 by yuandehua (@yuandehua) on CodePen.

# 复制节点

node.cloneNode(); 括号为空或者为 flase 浅拷贝 只复制标签不复制标签里面的内容

node.cloneNode(true); 括号为 true 深拷贝 复制标签不复制里面的内容

# 创建元素

  • document.write()
  • element.innerHTML
  • document.createElement()

注意

document.write 是直接将内容写入页面的内容流 ， 但是文档执行完毕，则它会导致页面全部重绘

var btn = document.querySelector('button');
btn.onclick = function(){
    //注册事件 页面已经加载完毕 
    //触发事件后 页面会被覆盖
	document.write('<div>yuadh</div>');
}
or
window.onload = function(){
    document.write('<div>yuadh</div>');
}
1
2
3
4
5
6
7
8
9
10

innerHTML

创建多个元素效率更高

需要采用数组形式，不采用直接拼接字符串

//字符串拼接效率测试
function fn() {
   var d1 = +new Date();
   var str = '';
   for (var i = 0; i < 1000; i++) {
       document.body.innerHTML += '<div style="width:100px; 				height:2px; border:1px solid blue;"></div>';
   }
   var d2 = +new Date();
   console.log(d2 - d1);
}
fn();
1
2
3
4
5
6
7
8
9
10
11
//数组形式效率测试
function fn() {
    var d1 = +new Date();
    var array = [];
    for (var i = 0; i < 1000; i++) {
        array.push('<div style="width:100px; height:2px; border:1px 		solid blue;"></div>');
    }
    document.body.innerHTML = array.join('');
    var d2 = +new Date();
    console.log(d2 - d1);
}
fn();
1
2
3
4
5
6
7
8
9
10
11
12
//createElement效率测试
function fn() {
    var d1 = +new Date();

    for (var i = 0; i < 1000; i++) {
        var div = document.createElement('div');
        div.style.width = '100px';
        div.style.height = '2px';
        div.style.border = '1px solid red';
        document.body.appendChild(div);
    }
    var d2 = +new Date();
    console.log(d2 - d1);
}
fn();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 添加事件

给元素添加事件，称为注册事件或者绑定事件

  • 传统方式

    element.onclick = function(){}

    唯一性，后面注册的处理函数会覆盖前面注册的处理函数

  • 方法监听

    addEventLinstener(type,listener,[useCapture]) 事件监听方式

    type : 事件类型字符串 如，click、mouseover

    listener ： 事件处理函数，事件发生时，会调用该监听函数

    useCapture ： true ： 事件捕获阶段 | flase ： 事件冒泡阶段

    注意：同一个元素 同一个事件可以添加多个监听器

    btn.addEventLinstener('click',function(){
	alert(2);
});
btn.addEventLinstener('click',function(){
	alert(33);
});
    1
    2
    3
    4
    5
    6

    attachEvent(eventNameWithon,callback)

    eventNameWithOn : 事件类型字符串 如，onclick、onmouseover

    callback ： 事件处理函数，当目标触发事件时回调函数被调用

解决兼容性问题

function addEventListener(element,eventName,fn){
    if(element.addEventListener){
       element.addEventListener(eventName,fn);
    }else if(element.attachEvent){
       element.attachEvent('on'+eventName,fn);      
    }else {
       element['on'+eventName] = fn;
    }
}
1
2
3
4
5
6
7
8
9

# 删除事件

  1. 传统方式

    btn.onclick = null;

    删除单个监听器适用

  2. .removeEventListener(type,listener,[useCapture])

    btn.addEventListener('click',fn);
function fn(){
	alert(1);
	btn.removeEventListener('click',fn);
}
    1
    2
    3
    4
    5

  3. detachEvent(eventNameWithOn,callback);

    btn.attachEvent('onclick',fn);
function fn(){
	alert(1);
	btn.detachEvent('onclick',fn);
}
    1
    2
    3
    4
    5

解决兼容性问题

function removeEventListener(element,eventName,fn){
    if(element.removeEventListener){
       element.removeEventListener(eventName,fn);
    }else if(element.detachEvent){
       element.detachEvent('on'+eventName,fn);      
    }else {
       element['on'+eventName] = null;
    }
}
1
2
3
4
5
6
7
8
9

# 事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

在获取目标阶段时 会有一个 捕获阶段 - 目标阶段 - 冒泡阶段 的过程

<div class=".father">
    <div class=".son">
        
    </div>
</div>
1
2
3
4
5

捕获阶段

document - html - body - father - son

冒泡阶段

son - father - body - html - document

**有些事件是没有冒泡的 **

onblur、onfocus 、onmouseenter 、 onmouseleave

# 事件对象

event对象 代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

事件发生后，跟事件相关的一些列信息数据的集合都放到这个对象里面，这个对象就是 event对象 ，它有很多属性和方法

eventTarget.onclick = function(event){
    ...
}
evenTarget.addEventListener('click',function(event){})
1
2
3
4

  1. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要传递参数

  2. 事件对象可以自己命名，event、evt

  3. 有兼容性问题

    解决方法 e = e|| windos.event

事件对象属性方法 说明
e.target 返回触发事件的对象
e.srcElement 放回触发事件的对象
e.type 返回事件的类型 比如 click、mouseover
e.cancelBubble 该属性阻止冒泡
e.returnValue 该属性阻止默认事件，如禁止链接跳转
e.preventDefault（） 该方法阻止默认事件
e.stopPropagation（） 防止冒泡标准

# this和e.target

this ：犯回给绑定事件的元素 || 相似属性 e.currentTarget

e.target ：返回触发事件的元素

# 阻止默认行为

var a = documemt.querySelector('a');
a.addEventListener('click',function(){
    e.preventDefault();//dom标准写法
    a.onclick = returnValue; //第二种方法
    return false; //第三种方法 return后面的代码不会继续执行
})
1
2
3
4
5
6

# 阻止冒泡

son.addEventListenner('click',function(e){
    alert('son');
    e.stopPropagation(); //注意兼容性问题
    e.cancelBubble = true;//非标准 
})
1
2
3
4
5

# 事件委托（代理）

不是每个子节点单独设置事件监听器，而是事件鉴定器在其父节点上，然后利用冒泡原理影响设置每个子节点

可以提高程序的性能

ul.addEventListener('click',function(e){
    e.target.style.backgroundColor = 'red';
})
1
2
3

# 鼠标事件

鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX 返回鼠标相对于文档页面的 X 坐标
e.pageY 返回鼠标相对于文档页面的 Y 坐标
e.screenX 返回鼠标相对于电脑屏幕的 X 坐标
e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标

图片跟随案例

var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
    var x = e.pageX;
    var y = e.pageY;
    pic.style.left = x + 'px';
    pic.style.left = y + 'px';
})
1
2
3
4
5
6
7

# 补充

# 阻止链接跳转

javascript:;

# 禁止选中和快捷菜单

contextmenu

//此方法可以禁止右键菜单
document.addEventListener('contextmenu',function(e){
    e.preventDefault();
})
1
2
3
4

selectstart

//此方法可以禁止选中文字
document.addEventListener('selectstart',function(e){
    e.preventDefault();
})
1
2
3
4
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
DOM案例
BOM接口

← BOM接口→

Theme by Vdoing | Copyright © 2021-2023 yuadh
×