获取元素的方法
根据ID获取
语法:document.getElementById(id)
作用:根据ID获取元素对象
参数:id值,区分大小写的字符串
返回值:元素对象 或 null
<body>
<div id="time">2019-9-9</div>
<script>
// 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
根据标签名获取
语法:document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)
作用:根据标签名获取元素对象
参数:标签名
返回值:元素对象集合(伪数组,数组元素是元素对象)操作里面的元素需要遍历
<body>
<ul>
<li>知否知否,应是等你好久11</li>
<li>知否知否,应是等你好久22</li>
<li>知否知否,应是等你好久33</li>
<li>知否知否,应是等你好久44</li>
<li>知否知否,应是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 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);
</script>
</body>
h5新增获取元素的方式
document.getElementByClassName('类名'); //根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回
querySelector和querySelectorAll里面的选择器需要加符号
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 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);
</script>
</body>
获取body和html元素
document.body; //返回body元素对象
document.documentElement; //返回html元素对象
事件
事件三要素
- 事件源(谁):触发事件的元素
- 事件类型(什么事件): 例如 click 点击事件
- 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮,弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采用函数赋值的形式)
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
鼠标事件
事件类型 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获取鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
改变元素内容(innerText&innerHTML)
element.innerText //从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会被去掉
element.innerHTML //起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
innerText和innerHTML的区别
- 获取内容时的区别:
innerText会去除空格和换行,而innerHTML会保留空格和换行 - 设置内容时的区别:
innerText不会识别html,而innerHTML会识别
排他思想
- 所有元素全部清除样式
- 给当前元素设置样式
// 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-
开头作为属性名并且赋值
<div data-index="1"></div>
或者使用js设置
element.setAttribute('data-index', 2)
获取h5自定义属性
兼容性获取
element.getAttribute('data-index');
//h5新增
element.dataset.index 或者 element.sataset['index'] //ie11才开始支持
<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>
节点操作
- 网页中所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示
- HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
- 一般地,节点至少拥有nodeType(节点类型)、**nodeName(节点名称)和nodeValue(节点值)**这三个基本属性。
- 元素节点
nodeType
为 1 - 属性节点
nodeType
为 2 - 文本节点
nodeType
为 3
在实际开发中,节点操作主要操作的是元素节点
父级节点node.parentNode
parentNode
属性可返回某节点的父节点(最近的一个父节点)- 如果指定的节点没有父节点则返回null
<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>
子节点
所有子节点
parentNode.childNodes(标准)
parentNode.childNodes
返回包含指定节点的子节点的集合,该集合为即时更新的集合
返回值里面包含了所有的子节点,包括元素节点、文本节点
如果向获取里面的元素节点,则需要专门处理,所以一般不推荐使用childNodes
子元素节点(重点)
parentNode.children(非标准)
parentNode.children
是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不反回
<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>
第一个子节点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]
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
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]);
</script>
创建节点
// document.createElement()方法创建由tagName指定的html元素。因为这些元素事先不存在,是根据需求动态生成,多以也成为动态创建元素节点
document.createElement('tagName')
添加节点
//该方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素
node.appendChild(child)
//该方法将一个节点添加到父节点的指定子节点前面,类似于css里面的before伪元素
node.insertBefore(child, 指定元素)
<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>
删除节点
// 方法从nide系欸但中删除一个子节点,返回删除的节点
node.removeChild()
<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>
克隆节点
// 该方法返回调用该方法节点的一个副本,也成为克隆节点/拷贝节点
node.cloneNode()
注意:
如果括号参数为空或者false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点
如果括号参数为false,则是深拷贝,会复制节点本身以及里面所有的子节点
<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>
创建元素三种方式
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('<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);
}
总结
- 针对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
)(提倡)
- DOM提供API方法:
- 属性操作
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支持)
<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>
事件监听兼容性解决方案
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)
<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>
删除事件兼容性处理
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个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
事件冒泡
<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>
事件对象
- 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象。
事件对象的使用
- 事件触发时就会产生事件对象,并且系统会以实参的形式传给事件处理函数
eventTarget.onclick = function(event){
//这个event就是事件对象,通常会写成e或者evt
}
eventTarget.addEventListener('click', function(event){
//这个event就是事件对象,通常会写成e或者evt
})
eventTarget.addEventListener('click', fn)
function(event){
// 这个event就是事件对象,通常写成e或者evt
}
事件对象兼容性处理
事件对象本身的获取存在兼容问题:
- 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
- 在 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
<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>
阻止事件默认行为
<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>
阻止事件冒泡
- 标准写法:利用事件对象里面的
stopPropagation()
方法
e.stopPropagation()
- 非标准写法:IE6-8利用事件对象cancelBubble属性
e.cancelBubble = true
<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>
阻止事件冒泡的兼容性处理
if( e && e.stopPropagation){
e.stopPropagation
}else {
window.event.cancelBubble = true;
}
事件委托
- 不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。
<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>
禁止选中文字和禁止右键菜单
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
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箭头等) |
注意:
如果使用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);
})