JavaScript进阶之DOM
Posted Huang_xianlong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript进阶之DOM相关的知识，希望对你有一定的参考价值。
六、排他操作
1.排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
-
所有元素全部清除样式（干掉其他人）
-
给当前元素设置样式 （留下我自己）
-
注意顺序不能颠倒，首先干掉其他人，再设置自己
代码实现：
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++)
btns[i].onclick = function()
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++)
btns[i].style.backgroundColor = '';
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
</script>案例1：百度换肤
代码实现：
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++)
imgs[i].onclick = function()
// this.src 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
</script>
</body>案例2：表格隔行变色
代码实现：
<script>
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++)
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function()
// console.log(11);
this.className = 'bg';
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function()
this.className = '';
</script>案例3：全选操作
代码实现：
<script>
// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 全选按钮注册事件
j_cbAll.onclick = function()
// this.checked 当前复选框的选中状态
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++)
j_tbs[i].checked = this.checked;
// 给所有的子复选框注册单击事件
for (var i = 0; i < j_tbs.length; i++)
j_tbs[i].onclick = function()
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++)
if (!j_tbs[i].checked)
flag = false;
break;
// 设置全选按钮的状态
j_cbAll.checked = flag;
</script>七、自定义属性操作
1.获取属性值
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>2. 设置属性值
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是3. 移出属性
// class 不是className
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');4.案例：tab切换案例
实现代码：
<script>
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环，给选项卡绑定点击事件
for (var i = 0; i < lis.length; i++)
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function()
// 1. 上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想）
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++)
lis[i].className = '';
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++)
items[i].style.display = 'none';
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
</script>5. H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>八、节点操作
1. 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
html DOM 树中的所有节点均可通过 javascript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
2. 节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
3. 父级节点
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>4. 子节点
所有子节点
子元素节点
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>第1个子节点
最后1个子节点
第1个子元素节点
最后1个子元素节点
5.案例：新浪下拉菜单
代码实现：
<script>
// 1. 获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4个小li
// 2.循环注册事件
for (var i = 0; i < lis.length; i++)
lis[i].onmouseover = function()
this.children[1].style.display = 'block';
lis[i].onmouseout = function()
this.children[1].style.display = 'none';
</script>6.兄弟节点
下一个兄弟节点
上一个兄弟节点
下一个兄弟元素节点（有兼容性问题）
上一个兄弟元素节点（有兼容性问题）
7. 创建节点
8. 添加节点
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>9. 案例：简单版发布留言
代码实现：
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function()
if (text.value == '')
alert('您没有输入内容');
return false;
else
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value;
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
</script>
</body>10. 删除节点
node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function()
if (ul.children.length == 0)
this.disabled = true;
else
ul.removeChild(ul.children[0]);
</script>11.案例：删除留言
代码实现：
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function()
if (text.value == '')
alert('您没有输入内容');
return false;
else
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// (3) 删除元素 删除的是当前链接的li 它的父亲
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++)
as[i].onclick = function()
// 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
</script>12.复制节点
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>13.案例：动态生成表格
代码实现：
<script>
// 1.先去准备好学生的数据
var datas = [
name: '魏璎珞',
subject: 'JavaScript',
score: 100
,
name: '弘历',
subject: 'JavaScript',
score: 98
,
name: '傅恒',
subject: 'JavaScript',
score: 99
,
name: '明玉',
subject: 'JavaScript',
score: 88
,
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
];
// 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
// 遍历数组
for (var i = 0; i < datas.length; i++)
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数
// 使用for in遍历学生对象
for (var k in datas[i])
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
td.innerHTML = datas[i][k];
tr.appendChild(td);
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
// 4. 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++)
as[i].onclick = function()
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
</script>14.创建元素的三种方式
<script>
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
var btn = document.querySelector('button');
btn.onclick = function()
document.write('<div>123</div>');
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++)
inner.innerHTML += '<a href="#">百度</a>'
var arr = [];
for (var i = 0; i <= 100; i++)
arr.push('<a href="#">百度</a>');
inner.innerHTML = arr.join('');
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++)
var a = document.createElement('a');
create.appendChild(a);
</script>15.innerTHML和createElement效率对比
innerHTML字符串拼接方式（效率低）
<script>
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();
</script>createElement方式（效率一般）
<script>
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();
</script>innerHTML数组方式（效率高）
<script>
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();
</script>九、DOM的核心总结
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
1.创建
2. 增加
3. 删
4. 改
5. 查
6. 属性操作
7. 事件操作（重点）
给元素注册事件，采取 事件源.事件类型 = 事件处理程序
十、事件高级
1. 注册事件（2种方式）
2. 事件监听
addEventListener()（IE9以后支持）
attacheEvent()（IE678支持）
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function()
alert('hi');
btns[0].onclick = function()
alert('hao a u');
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function()
alert(22);
)
btns[1].addEventListener('click', function()
alert(33);
)
// 3. attachEvent ie9以前的版本支持
btns[2].attachEvent('onclick', function()
alert(11);
)
</script>事件监听兼容性解决方案
封装一个函数，函数中判断浏览器的类型：
3. 删除事件（解绑事件）
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function()
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn()
alert(22);
divs[1].removeEventListener('click', fn);
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);
function fn1()
alert(33);
divs[2].detachEvent('onclick', fn1);
</script>删除事件兼容性解决方案
4. DOM事件流
比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。
DOM 事件流会经历3个阶段：
-
捕获阶段
-
当前目标阶段
-
冒泡阶段
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
事件冒泡：
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// onclick 和 attachEvent（ie） 在冒泡阶段触发
// 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略
// son -> father ->body -> html -> document
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function()
alert('son');
, false);
// 给father注册单击事件
var father = document.querySelector('.father');
father.addEventListener('click', function()
alert('father');
, false);
// 给document注册单击事件，省略第3个参数
document.addEventListener('click', function()
alert('document');
)
</script>事件捕获：
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
// document -> html -> body -> father -> son
var son = document.querySelector('.son');
// 给son注册单击事件，第3个参数为true
son.addEventListener('click', function()
alert('son');
, true);
var father = document.querySelector('.father');
// 给father注册单击事件，第3个参数为true
father.addEventListener('click', function()
alert('father');
, true);
// 给document注册单击事件，第3个参数为true
document.addEventListener('click', function()
alert('document');
, true)
</script>5. 事件对象
什么是事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
比如：
-
谁绑定了这个事件。
-
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
-
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
事件对象的使用
事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。
所以，在事件处理函数中声明1个形参用来接收事件对象。
事件对象的兼容性处理
事件对象本身的获取存在兼容问题：
-
标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
-
在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。
<div>123</div>
<script>
var div = document.querySelector('div');
div.onclick = function(e)
// 事件对象
e = e || window.event;
console.log(e);
</script>事件对象的属性和方法
e.target 和 this 的区别
-
this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
-
e.target 是事件触发的元素。
常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象，
而target指向的是子元素，因为他是触发事件的那个具体元素对象。
<div>123</div>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function(e)
// e.target 和 this指向的都是div
console.log(e.target);
console.log(this);
);
</script>事件冒泡下的e.target和this
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e)
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this); // ul
// e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
console.log(e.target); // li
);
</script>6. 阻止默认行为
html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。
<a href="http://www.baidu.com">百度</a>
<script>
// 2. 阻止默认行为 让链接不跳转
var a = document.querySelector('a');
a.addEventListener('click', function(e)
e.preventDefault(); // dom 标准写法
);
// 3. 传统的注册方式
a.onclick = function(e)
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;
</script>7. 阻止事件冒泡
事件冒泡本身的特性，会带来的坏处，也会带来的好处。
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e)
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
, false);
var father = document.querySelector('.father');
// 给father注册单击事件
father.addEventListener('click', function()
alert('father');
, false);
// 给document注册单击事件
document.addEventListener('click', function()
alert('document');
)
</script>阻止事件冒泡的兼容性处理
8. 事件委托
事件冒泡本身的特性，会带来的坏处，也会带来的好处。
什么是事件委托
把事情委托给别人，代为处理。
事件委托也称为事件代理，在 jQuery 里面称为事件委派。
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
事件委托的原理
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
事件委托的作用
-
我们只操作了一次 DOM ，提高了程序的性能。
-
动态新创建的子元素，也拥有事件。
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e)
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
)
</script>十一、常用鼠标事件
1. 案例：禁止选中文字和禁止右键菜单
代码实现：
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e)
e.preventDefault();
)
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e)
e.preventDefault();
)
</script>
</body>2. 鼠标事件对象
3. 获取鼠标在页面的坐标
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e)
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
)
</script>4. 案例：跟随鼠标的天使
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e)
// 1. mousemove只要我们鼠标移动1px 就会触发这个事件
// 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标，
// 把这个x和y坐标做为图片的top和left 值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x, 'y坐标是' + y);
//3 . 千万不要忘记给left 和top 添加px 单位
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
);
</script>十二、常用的键盘事件
1.键盘事件
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function()
console.log('我弹起了');
)
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function()
console.log('我按下了press');
)
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function()
console.log('我按下了down');
)
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>2. 键盘事件对象
使用keyCode属性判断用户按下哪个键
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e)
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65)
alert('您按下的a键');
else
alert('您没有按下a键')
)
document.addEventListener('keypress', function(e)
// console.log(e);
console.log('press:' + e.keyCode);
)
</script>3. 案例：模拟京东按键输入内容
注意：触发获得焦点事件，可以使用 元素对象.focus()
代码实现：
<input type="text">
<script>
// 获取输入框
var search = document.querySelector('input');
// 给document注册keyup事件
document.addEventListener('keyup', function(e)
// 判断keyCode的值
if (e.keyCode === 83)
// 触发输入框的获得焦点事件
search.focus();
)
</script>4. 案例：模拟京东快递单号查询
代码实现：
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
// 获取要操作的元素
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// 给输入框注册keyup事件
jd_input.addEventListener('keyup', function()
// 判断输入框内容是否为空
if (this.value == '')
// 为空，隐藏放大提示盒子
con.style.display = 'none';
else
// 不为空，显示放大提示盒子，设置盒子的内容
con.style.display = 'block';
con.innerText = this.value;
)
// 给输入框注册失去焦点事件，隐藏放大提示盒子
jd_input.addEventListener('blur', function()
con.style.display = 'none';
)
// 给输入框注册获得焦点事件
jd_input.addEventListener('focus', function()
// 判断输入框内容是否为空
if (this.value !== '')
// 不为空则显示提示盒子
con.style.display = 'block';
)
</script>以上是关于JavaScript进阶之DOM的主要内容，如果未能解决你的问题，请参考以下文章