获取元素的方法 根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

2019-9-9

> // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer);

根据标签名获取

语法：document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）操作里面的元素需要遍历

• 知否知否，应是等你好久11
• 知否知否，应是等你好久22
• 知否知否，应是等你好久33
• 知否知否，应是等你好久44
• 知否知否，应是等你好久55

• 生僻字
• 生僻字
• 生僻字
• 生僻字
• 生僻字

> // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的 var lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } // 3. element.getElementsByTagName()可以得到这个元素里面的某些标签 var nav = document.getElementById('nav'); // 这个获得nav 元素 var navLis = nav.getElementsByTagName('li'); console.log(navLis);

h5新增获取元素的方式

document.getElementByClassName('类名'); //根据类名返回元素对象集合 document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 document.querySelectorAll('选择器'); // 根据指定选择器返回

querySelector和querySelectorAll里面的选择器需要加符号

盒子1

盒子2

• 首页
• 产品

> // 1. getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); // 2. querySelector 返回指定选择器的第一个元素对象切记 里面的选择器需要加符号 .box#nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis);

获取body和html元素

document.body; //返回body元素对象 document.documentElement; //返回html元素对象

事件 事件三要素

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

唐伯虎 > // 点击一个按钮，弹出对话框 // 1. 事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素 //(1) 事件源 事件被触发的对象谁按钮 var btn = document.getElementById('btn'); //(2) 事件类型如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序通过一个函数赋值的方式 完成 btn.onclick = function() { alert('点秋香'); }

执行事件的步骤

• 获取事件源
• 注册事件（绑定事件）
• 添加事件处理程序（采用函数赋值的形式）

123

> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick // 3.添加事件处理程序 div.onclick = function() { console.log('我被选中了'); }

鼠标事件

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

改变元素内容（innerText&innerHTML）

element.innerText //从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会被去掉 element.innerHTML //起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

innerText和innerHTML的区别

• 获取内容时的区别：
  ? innerText会去除空格和换行，而innerHTML会保留空格和换行
• 设置内容时的区别：
  ? innerText不会识别html，而innerHTML会识别

排他思想

1. 所有元素全部清除样式
2. 给当前元素设置样式

// 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'; } }

自定义属性操作 获取属性值

• element.属性 获取属性值
• element.getAttribute(‘属性’);

区别：
element.属性 获取的是元素本身自带的属性
element.getAttribute(‘属性’); 主要是获取自定义的属性

设置属性值

• element.属性='值'
• element.setAttribute('属性', '值')

区别：
element.属性='值'设置内置属性值
element.setAttribute('属性', '值') 主要设置自定义的属性值

移除属性

// class 不是className // 3 移除属性 removeAttribute(属性) div.removeAttribute('index');

h5自定义属性 设置h5自定义属性

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

或者使用js设置 element.setAttribute('data-index', 2)

获取h5自定义属性

兼容性获取 element.getAttribute('data-index'); //h5新增 element.dataset.index或者element.sataset['index']//ie11才开始支持

> 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']);

节点操作

• 网页中所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示
• HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
• 一般地，节点至少拥有nodeType（节点类型）、**nodeName（节点名称）和nodeValue（节点值）**这三个基本属性。

• 元素节点nodeType 为 1
• 属性节点nodeType 为 2
• 文本节点nodeType 为 3
  在实际开发中，节点操作主要操作的是元素节点

父级节点node.parentNode

• parentNode属性可返回某节点的父节点（最近的一个父节点）
• 如果指定的节点没有父节点则返回null

class="erweima">×

> // 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(erweima.parentNode);

子节点
所有子节点

parentNode.childNodes(标准)

• parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合

返回值里面包含了所有的子节点，包括元素节点、文本节点
如果向获取里面的元素节点，则需要专门处理，所以一般不推荐使用childNodes

子元素节点（重点）

parentNode.children(非标准)

• parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不反回

• 我是li
• 我是li
• 我是li
• 我是li

> // 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);

第一个子节点parent.firstChild

• parent.firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

最后一个子节点parent.lastChild

• parent.lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

第一个子元素节点parent.firsteElementChild

• parent.firsteElementChild返回第一个子元素节点，找不到则返回null

ie9以上版本支持

最后一个子元素节点parent.lastElementChild

• parent.lastElementChild返回最后一个子元素节点，找不到则返回null

ie9以上版本支持

获取第一个子节点与最后一个子节点的最佳办法

// 获取第一个子元素节点 parentNode.children[0] // 获取最后一个子元素节点 parentNode.children[parentNode.children.length - 1]

1. 我是li1
2. 我是li2
3. 我是li3
4. 我是li4
5. 我是li5

> var ol = document.querySelector('ol'); // 1. firstChild 第一个子节点 不管是文本节点还是元素节点 console.log(ol.firstChild); console.log(ol.lastChild); // 2. firstElementChild 返回第一个子元素节点 ie9才支持 console.log(ol.firstElementChild); console.log(ol.lastElementChild); // 3. 实际开发的写法既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); console.log(ol.children[ol.children.length - 1]);

创建节点

// document.createElement()方法创建由tagName指定的html元素。因为这些元素事先不存在，是根据需求动态生成，多以也成为动态创建元素节点 document.createElement('tagName')

添加节点

//该方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素 node.appendChild(child)

//该方法将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素 node.insertBefore(child, 指定元素)

• 123

> // 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. 添加元素

删除节点

// 方法从nide系欸但中删除一个子节点，返回删除的节点 node.removeChild()

删除

• 熊大
• 熊二
• 光头强

> // 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]); } }

克隆节点

// 该方法返回调用该方法节点的一个副本，也成为克隆节点/拷贝节点 node.cloneNode()

注意：
如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为false，则是深拷贝，会复制节点本身以及里面所有的子节点

• 1111
• 2
• 3

> var ul = document.querySelector('ul'); // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容 // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容 var lili = ul.children[0].cloneNode(true); ul.appendChild(lili);

创建元素三种方式

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

• document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
• innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
• createElement()创建多个元素效率稍微低一点，但是结构更清晰

innerHTML创建多个元素效率更高（不用拼接字符串，采用数组形式拼接），结构稍微复杂

注意：
不同浏览器下，innerHTML效率要比createElement高

// 三种创建元素方式区别 // 1. document.write() 创建元素如果页面文档流加载完毕，再调用这句话会导致页面重绘 var btn = document.querySelector('button'); btn.onclick = function() { document.write('123'); }// 2. innerHTML 创建元素 var inner = document.querySelector('.inner'); for (var i = 0; i <= 100; i++) { inner.innerHTML += '百度' } ------------效率高-------------- var arr = []; for (var i = 0; i <= 100; i++) { arr.push('百度'); } 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); }

总结

• 针对DOM元素的增、删、改、查操作
• 增加
  • appendChild
  • insertBefore
• 删除
  • removeChild
• 修改
  • 修改元素属性：src、href、title
  • 修改普通元素内容：innerHTML、innerText
  • 修改表单元素：value、type、disabled
  • 修改元素样式：style、className
• 查
  • DOM提供API方法：getElementById、getElementByTagName（不推荐)
  • H5提供的新方法：querySelector、getSelectorAll（提倡）
  • 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)（提倡）
• 属性操作
  • setAttribute：设置DOM的属性值
  • getAttribute：得到DOM的属性值
  • removeAttribute：移除属性

注册事件（重要） 传统注册

• 利用on开头的事件onclick
• 注册事件唯一性质
• 同一元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

监听注册（推荐）

• 使用addEventListener()注册事件
• IE9以上支持，IE9以下版本可使用attachEvent()代替
• 同一元素同一事件可以注册多个监听器，并按注册顺序依次执行

事件监听addEventListener()

• eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
  写法：
  eventTarget.addEventListener(type, listen[, useCapture])
  该方法接收三个参数：
  
• type：事件类型字符串，比如click、mouseover、注意这里不要带on
  
• listener：事件处理函数，事件发生时，会调用该监听函数
  
• useCapture：可选参数，是一个布尔值，默忍是false
  
• attacheEvent()事件监听（IE678支持）
  

传统注册事件 方法监听注册事件 ie9 attachEvent > 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); })

事件监听兼容性解决方案

function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持addEventListener方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数默认是false } else if (element.attachEvent) { element.attachEvent("on" + eventName, fn); } else { element["on" + eventName] = fn; } }

删除事件

// 传统删除 eventTarget.onclick = null; // 方法监听注册方式 eventTarget.removeEventListener(type, listener[,useCapture]) eventTarget.detachEvent(eventNameWithOn, callback)

1

2

3

> 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); }

删除事件兼容性处理

function removeEventListener(element, eventName, fn) { // 判断当前浏览器是否支持addEventListener方法 if (element.removeEventListener) { element.removeEventListener(eventName, fn); // 第三个参数默认是false } else if (element.detachEvent) { element.detachEvent("on" + eventName, fn); } else { element["on" + eventName] = fn; } }

DOM事件流

• 事件流描述的是从页面中接收事件的顺序
• 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
  
  文章图片
  
  DOM 事件流会经历3个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

事件冒泡

son盒子

> // 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'); })

事件捕获

son盒子

> // 如果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)

事件对象

• 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

事件对象的使用

• 事件触发时就会产生事件对象，并且系统会以实参的形式传给事件处理函数

eventTarget.onclick = function(event){ //这个event就是事件对象，通常会写成e或者evt } eventTarget.addEventListener('click', function(event){ //这个event就是事件对象，通常会写成e或者evt }) eventTarget.addEventListener('click', fn) function(event){ // 这个event就是事件对象，通常写成e或者evt }

事件对象兼容性处理
事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event中获取查找。

e = e || window.event;

• 只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。
• 只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。

事件对象的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象，非标准ie6-8使用
e.type	返回事件的类型（click、mouseover等）
e.cancelBubble	该属性组织冒泡，ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准ie6-8使用 比如不让连接跳转
e.preventDefault()	该方法组织默认事件（默认行为）标准比如不让连接跳转
e.stopPropagation	组织冒泡 标准

• 事件冒泡下的e.target和this

• abc
• abc
• abc

> 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 });

阻止事件默认行为

百度 > // 2. 阻止默认行为 让链接不跳转 var a = document.querySelector('a'); a.addEventListener('click', function(e) { e.preventDefault(); //dom 标准写法 }); // 3. 传统的注册方式 a.onclick = function(e) { // 普通浏览器 e.preventDefault(); 方法 e.preventDefault(); // 低版本浏览器 ie678returnValue属性 e.returnValue = https://www.it610.com/article/false; // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 return false; }

阻止事件冒泡

• 标准写法：利用事件对象里面的stopPropagation()方法
  e.stopPropagation()
• 非标准写法：IE6-8利用事件对象cancelBubble属性
  e.cancelBubble = true

son儿子

> 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'); })

阻止事件冒泡的兼容性处理

if( e && e.stopPropagation){ e.stopPropagation }else { window.event.cancelBubble = true; }

事件委托

• 不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！

> // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { // e.target 这个可以得到我们点击的对象 e.target.style.backgroundColor = 'pink'; })

禁止选中文字和禁止右键菜单

我是一段不愿意分享的文字 > // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart document.addEventListener('selectstart', function(e) { e.preventDefault(); })

鼠标事件对象

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

获取鼠标在页面的坐标

// 鼠标事件对象 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); })

键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时 触发(不识别功能键 比如 ctrl shift箭头等)

【WebAPI---DOM】注意:
如果使用addEventListener不需要加on
onkeypress和前面两个的区别时,它不识别功能键,比如 ctrl shift箭头等
三个事件的执行顺序是: keydown – keypress – keyup

// 常用的键盘事件 //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

键盘事件对象

• keyCode返回该键的ASCII码值

注意:
onkeydown和onkeyup不区分字母大小写, onkeypress区分字母大小写
实际开发中,更多使用的是keydown和keyup,它能识别所有的键(包括功能键)
keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII码值

使用keyCode属性判断用户按下哪个键

// 键盘事件对象中的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); })

推荐阅读

• 

  同类色对比照片 摄影同类色
• 

  珂的意思和含义
• 

  聊城有哪些县 聊城都有哪些区县
• 

  为什么像汉字一样的象形文字很少,多数语言是拼音文字呢？
• 

  button的超级链接
• 

  支付宝商户如何开通花呗收款？花呗收钱开通的方法
• 

  画新娘妆和盘头多少钱，画一个新娘妆大概多少钱
• 

  坐飞机可以戴隐形眼镜吗？
• 

  茯苓绿豆粥——清热祛湿利尿消肿
• 

  嘉宝果泡酒多久可以喝
• 

  星巴克全职星级咖啡师面试难吗？
• 

  建筑软件,我的世界导入建筑软件
• 

  听书 安卓1.5,喜马拉雅蜻蜓fm懒人听书不错!
• 

  医保卡余额怎么用 医保卡余额使用技巧
• 

  iOS|iOS 碰撞角度矫正 及 applyImpulse 和 applyForce的区别
• 

  唇色发紫日常养护 嘴唇发黑是什么原因
• 

  为什么梦见打雪仗
• 

  榴莲一半硬一半软是什么原因
• 

  顾炀樊渊是哪部小说
• 

  梦见理发 你知道预示着什么吗

• Network|非安装版Tomcat不能手动启动问题解决