1.点击更换背景图片案例
<div class="box">
<a href="javascript:;"><img src="images/1.jpg" alt=""></a>
<a href="javascript:;"><img src="images/2.jpg" alt=""></a>
<a href="javascript:;"><img src="images/3.jpg" alt=""></a>
<a href="javascript:;"><img src="images/4.jpg" alt=""></a>
</div>
<script>
var box = document.querySelector('.box');
var as = box.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].addEventListener('click', function() {
// console.log(this.children[0].src);
var address = this.children[0].src;
// console.log(this.children[0]);
// 记住backgroundImage属性前面需要加style
document.body.style.backgroundImage = 'url(' + address + ')';
});
}
</script>
- 刚开始document.body.backgroundImage = ‘url(’ + address + ‘)’;是这么写的,backgroundImage前面没有加style,导致点击图片没有达到更换效果
- 完整的应该是 document.body.style.backgroundImage = ‘url(’ + address + ‘)’; backgroundImage是元素属性,修改需要通过style的方式,这个以后要记得
2. 自定义属性的操作
获取属性值:
- 元素对象.属性; 一般用来获取元素自带的属性值,获取自定义属性的值时这种方式获取不到,显示undefined
- 元素对象.getAttribute(‘属性’); 用来获取自己定义的属性值
设置属性值:
- 元素对象.属性 = 值;设置元素自带的属性
- 元素对象.setAttribute(‘属性’,值); 一般用来自己定义属性的值
移除属性:
元素对象.removeAttribute(‘属性’);
注意:移除类的时候,不是写className了,这里写class
3.自定义属性
- 自定义属性目的是为了保存并使用数据
- 自定义属性的获取是通过getAttribute(‘属性’)获取
- H5规定自定义属性以 data- 开头作为属性名并赋值
4.节点操作
1.节点 :有 节点类型(nodeType)、节点名称(nodeName)、节点值(nodeValue) 这三个属性
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodeType为3 (包括文字、空格、换行等)
2.父级节点 parentNode 可返回某节点的一个最近的父节点,如果没有父节点则返回null
3.子节点
- childNodes 返回的是一个集合,不仅返回元素节点,还返回文本节点 使用的时候,父节点.childNodes
- children 返回所有子元素节点,只返回元素节点,不返回文本节点,一般这个用的比较多 父节点.children
- 另外如果想返回第一个子元素节点 用children[0] 中括号里面跟数字,就可返回第几个节点,第一个元素节点 从0 开始
返回第一个子元素节点 父节点.children[0]
最后一个可以用 父节点.children[父节点.children.length - 1]
4.创建节点 document.createElement(‘标签名’);
5.添加节点
- node.appendChild(child) 将一个节点添加到指定父节点的子节点的列表末尾
ul.appendChild(li) // 表示在ul下面添加一个li
- node.insertBefore(child,指定元素) 将一个节点添加至父节点的指定子节点的前面
ul.insertBefore(lis, li) // 将ul下面的li前面添加一个名为lis节点
6.删除节点
node.removeChild(child) // 删除当前节点的一个子节点
7.克隆(复制)节点
node.cloneChild() // 复制一个节点
- 如果括号里面为空或者false ,为浅拷贝,只复制节点本身,不复制里面的子节点
- 如果括号里面加true,为深拷贝,会复制节点本身及里面所有子节点,包括文本节点、元素节点等等
<ul>
<li>
<a href="#"></a> 1
</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 只复制li标签
// var li1 = ul.children[0].cloneNode();
// 会复制整个li以及里面的子元素
var li1 = ul.children[0].cloneNode(true);
ul.appendChild(li1);
console.log(ul);
</script>
5.事件高级
1.注册事件(两种)
- 传统注册方式
带on 开头的事件 如onclick
特点:注册事件唯一性
同一个元素同一个事件只能设置一个处理函数,而后面注册的函数 会覆盖前面注册的,以最后注册的那个为准 - 监听注册方式
使用addEventListener()方法 事件前不带on
特点:同一个元素同一个事件可以设置多个监听器
按注册事件的顺序依次执行
2.删除(解绑)事件
- 传统注册方式
eventTarget.onclick = null;
- 监听注册方式
eventTarget.addEventListener('事件类型', fn)
function fn(){
eventTarget.removeEventListener('事件类型', fn);
}
6.DOM事件流
- 事件捕获:从DOM顶层节点开始,逐级向下传播到具体元素的接受过程
- 事件冒泡:事件开始由具体的元素接受,然后逐级向上传播到DOM顶层节点的过程
DOM事件流经历三个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- js只能执行捕获或冒泡的其中一个阶段
- onclick 只能到冒泡阶段
- addEventListener(‘事件类型’,事件处理函数,[可选参数,为一个布尔值,默认为false]) 可选参数设置为true时,表示事件捕获阶段调用函数,false则为冒泡
注意:
有些事件是没有冒泡的, 比如 (on)focus,(on)blur,(on)mouseenter,(on)mouseleave
7.事件对象
事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象。
例如:
- 谁绑定了这个事件。
- 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
- 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
事件对象属性方法 | 说明 |
---|---|
e.target | 返回触发事件的对象 |
e.type | 返回事件的类型 如:click mouseover 不带on |
e.preventDefault() | 阻止默认事件 |
e.stopPropagation | 阻止冒泡 |
事件委托
原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
延伸案例:
1. 禁止鼠标右键菜单
contextmenu 主要控制应该何时显示上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
2. 禁止鼠标选中(selectstart)
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
3.鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
e.pageX | 返回鼠标相当于文档页面X坐标 IE9+支持 |
e.pageY | 返回鼠标相当于文档页面Y坐标 IE9+支持 |
e.screenX | 返回鼠标相当于电脑屏幕的X坐标 |
e.screenY | 返回鼠标相当于电脑屏幕的Y坐标 |
// 跟随鼠标的天使案例
// 1.图片要移动距离不占位置,因此需要绝对定位
// 2.每次移动鼠标都可以得到鼠标在页面中的坐标,把鼠标的X和Y 给图片的left和top 后面记住一定要加单位px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="images/angel.gif" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// console.log(e.pageX, e.pageY);
img.style.left = e.pageX - 50 + 'px';
img.style.top = e.pageY - 40 + 'px';
})
</script>
</body>
</html>
4. 键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下时触发 但是它不识别功能键 如 ctrl shift 箭头等 |
注意:
- 使用addEventListener不需要加on
- 三个事件的执行顺序:keydown --> keypress --> keyup
5. 键盘事件对象
键盘事件对象属性 | 说明 |
---|---|
keyCode | 返回该键的ASCII值 |
注意:
- onkeyup和onkeydown不区分字母大小写,onkeypress区分字母大小写
- onkeypress不识别功能键,keyCode能区分字母的大小写,返回不同的ASCII 值