1. 初识DOM
DOM: 文档对象模型
是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
w3c已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。
DOM树：文档：一个页面就是一个文档, DOM中使用document来表示；元素：页面中的所有标签都是元素，DOM中用element表示；节点：网页中的 [所有内容] 都是节点（标签，属性，文本，注释等），DOM中使用node表示。
1.1 获取元素1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="time">Hello World</div><ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li></ul><ul id="ID"><li>1</li><li>2</li><li>3</li></ul><script>
//1. getElementById():以对象的形式返回var obj = document.getElementById('time');// console.log(obj);// console.log(typeof obj);//console.dir()： 列出了对象的详细信息// console.dir(obj);//2. getElementsByTagName():以伪数组的形式返回：所有的li的集合var lis = document.getElementsByTagName('li');console.log(lis);for(var i =0;i < lis.length;i++) {console.log(lis[i]);}console.log('--------------------------');var ul = document.getElementById("ID"); //ID下的li的集合var liss = ul.getElementsByTagName("li");console.log(liss);for(var i =0;i < liss.length;i++) {console.log(liss[i]);}</script>
</body>
</html>
1.2 获取元素2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=b, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- getElementsByClassName(): => html5 querySelector('选择器') => html5 返回指定选择器的第一个对象，选择器要加符号，.box,#nav; querySelectorAll: => html5 返回选择器里的所有元素对象的集合 ; --><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>//var Box = document.getElementsByClassName('box');console.log(Box);//var firstbox = document.querySelector('.box');console.log(firstbox);var nav = document.querySelector('#nav');console.log(nav);var firstli = document.querySelector('li');console.log(firstli);//var allbox = document.querySelectorAll('.box');console.log(allbox);</script>
</body>
</html>
1.3 获取元素3
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//1.获取body元素console.log(document.body);//2获取html元素console.log(document.documentElement);</script>
</body>
</html>
2. 属性操作
2.1 修改样式属性1
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {width: 200px; height: 200px; background-color: red; }</style>
</head>
<body><!-- 通过element.style 修改样式; --><div></div><script>var div = document.querySelector('div');div.onclick = function() {this.style.backgroundColor = 'purple';}</script>
</body>
</html>
2.2 修改样式属性2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}.change {background-color: purple;color: #fff;font-size: 25px;margin-top: 100px;}</style>
</head><body><!-- 通过element.className 修改样式; --><div class="first">文本</div><script>// [1.] 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用var test = document.querySelector('div');test.onclick = function () {// this.style.backgroundColor = 'purple';// this.style.color = '#fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// [2.] 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况;// [3.] className会覆盖原先的类名; (通过浏览器调试就可以看出)// this.className = 'change';// [4.] 如果想要保留原先的类名，我们可以这么做 多类名选择器;this.className = 'first change';}</script>
</body></html>
2.3 获取修改属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1. element.属性; 2. getAttribute()/setAttribute(); 3. removeAttribute(); -->
</head><body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// [1.] 获取元素的属性值(获取内置的属性值, 元素本身自带的属性)// (1) element.属性; console.log(div.id);// (2) element.getAttribute('属性') (既可以获取内置的属性值, 又可以获取自定义属性值)console.log(div.getAttribute('id'));console.log(div.getAttribute('index')); //获取自定义属性值/******************************************************************************************************/// [2.] 设置元素属性值// (1) element.属性= '值'; div.id = 'test';div.className = 'navs';// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性div.setAttribute('index', 2);div.setAttribute('class', 'footer'); /******************************************************************************************************/// [3.] 移除属性 removeAttribute(属性) div.removeAttribute('index');</script>
</body></html>
2.4 H5自定义属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div style="color: red" getTime="20" data-index="2" data-list-name="andy"></div><script>var div = document.querySelector('div');console.log(div.getTime); //undefined(因为不是内置属性)console.log(div.getAttribute('getTime')); //20console.log('-------------------------------');/* 通过以上可以看出：自定义属性的属性值不能通过element.属性来获取, 必须通过getAttribute()来获取;h5新增自定义属性的方法, 约定属性只能以data-开头; dataset 是一个集合里面存放了所有以data开头的自定义属性; */div.setAttribute('data-time', 20);console.log(div.getAttribute('data-index')); // 2console.log(div.getAttribute('data-list-name')); // andyconsole.log('-------------------------------');// 1. dataset是一个集合, 里面存放了所有以data开头的自定义属性; console.log(div.dataset); //是一个集合console.log(div.dataset.index); //相当于获取data-index属性值, 2console.log(div.dataset['index']); //同上// 2. 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法console.log(div.dataset.listName); //andyconsole.log(div.dataset['listName']); //同上</script>
</body></html>
3. 节点操作
3.1 init
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 背景：获取元素通常有两种方式：(1) 利用DOM提供的方法来获取元素; document.getElementById(), .getElementByTagName(),,, 逻辑型不强, 繁琐; (2) 利用节点层级关系来获取元素; 利用父子兄弟节点关系来获取元素; -->
</head>
<body><!-- 一般地，节点至少拥有nodeType, nodeName, nodeValue这三个基本属性; 元素节点: nodeType = 1;属性节点: nodeType = 2;文本节点: nodeType = 3; (文本节点包括：文字，空格，换行等)Notice: 在实际开发中, 节点操作主要操作的是元素节点; -->
</body>
</html>
3.2 获取父子节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div class="demo"><div class="box"><span class="erweima">×</span></div></div><script>
/* 通过属性获取父子节点： */
/***********************************************************************/// 1. 获取父节点var erweima = document.querySelector('.erweima');var box = document.querySelector('.box'); //之前写法console.log(erweima.parentNode); //现在写法/***********************************************************************/// 2. 获取子节点// (0) 之前：var ul = document.querySelector('ul');var lis = ul.querySelectorAll('li');// (1) childNodes: 获取[所有子节点]: 包含 元素节点, 文本节点等等; console.log(ul.childNodes);console.log(ul.childNodes[0].nodeType); // 3 console.log(ul.childNodes[1].nodeType); // 1 // (2) children: 获取[所有子元素]节点 也是我们实际开发常用的; console.log(ul.children);</script>
</body></html>
3.3 获取首尾子节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><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>
</body></html>
3.4 获取兄弟节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div');// 1.nextSibling: 下一个兄弟节点, 包含元素节点或者 文本节点等等; console.log(div.nextSibling);console.log(div.previousSibling);// 2. nextElementSibling: 得到下一个兄弟元素节点; console.log(div.nextElementSibling);console.log(div.previousElementSibling);</script>
</body></html>
3.5 创建添加节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><ul><li>我是li</li></ul><script>var ul = document.querySelector('ul');// 1. 创建添加元素节点 （appendChild）var li = document.createElement('li');li.style.backgroundColor = 'green';ul.appendChild(li);// 3. 创建添加元素节点 （insertBefore）var lili = document.createElement('li');lili.style.backgroundColor = 'purple';ul.insertBefore(lili, ul.children[0]);</script>
</body></html>
3.6 删除节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button>删除</button><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul><script>var ul = document.querySelector('ul');var btn = document.querySelector('button');btn.onclick = function() {if (ul.children.length == 0) {this.disabled = true;} else {ul.removeChild(ul.children[0]);}}</script>
</body></html>
3.7 克隆节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><ul><li>1111</li><li>2</li><li>3</li></ul><script>// 1. node.cloneNode(false): 括号为空或者里面是false, 则是浅拷贝, 只复制标签不复制里面的内容// 2. node.cloneNode(true): 括号为true,则是深拷贝,既复制标签同时又复制里面的内容var ul = document.querySelector('ul');var copyLi = ul.children[0].cloneNode(true);ul.appendChild(copyLi);</script>
</body></html>
3.8 3种动态创建元素的区别
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1. document.write(); //很少使用2. element.innerHTML; 3. document.createElement(); -->
</head><body><button>点击</button><p>abc</p><div class="inner"></div><div class="create"></div><script>// window.onload = function() {// document.write('<div>123</div>');// }// 三种创建元素方式区别 // 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('');console.log(arr.join(''));/**************************************************************************************************/// 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');a.innerText = 'Hello';create.appendChild(a);}var Arr = ['1','2','3','4'];console.log(Arr.join('')); //1234</script>
</body></html>
3.9 效率测试
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>效率测试</title>
<!-- (1) document.write是直接将内容写入页面的内容流，但是文档流执行完毕, 则它会导致页面全部重绘; (2) innerHTML 是将内容写入某个DOM节点, 不会导致页面全部重绘; (3) innerHTML 创建多个元素效率更高（不要拼接字符串,采用数组形式拼接）,但结构稍微复杂; (4) createElement() 创建过个元素效率稍微低点, 但是结构更为清晰;
-->
</head><body>
</body>
<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();
/**********************************************************************************************/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();/**********************************************************************************************/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></html>
4. 事件基础
4.1 响应机制
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 事件：事件源 + 事件类型 + 事件处理程序; 事件源：例如，按钮; 事件类型：比如，鼠标经过，键盘按下; 事件处理程序：函数; 常见鼠标事件：onclick,onmouseover,onmouseout,onfocus,onblur,onmousemove,onmouseup,onmousedown; -->
</head><body><button id='btn'>Hello World!</button><script>var btn = document.getElementById('btn');btn.onclick = function () {alert('触发了！');}console.log('------------');var a = [];var b = a;b[0] = 1;console.log(a);console.log(b);console.log(a == b); //=>true,b实际上是变量a的引用，并不是拷贝var num = 6;console.log(num.toString(2)); //二进制console.log("0" + num.toString(8)); //八进制console.log("0x" + num.toString(16)); //16进制//Js中 => 函数时可以嵌套定义的function test() {console.log('hello');function tt() {console.log('world');}tt();}test();</script>
</body></html>
4.2 操作元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>Hello</div><p>我是文字<span>1324</span></p><script>var div = document.querySelector('div');
//innerText 和 innerHTML的区别//一、//1. innerText不识别HTML标签(当做寻常的text内容使用即可), 去除空格会换行; // div.innerText = '<strong>今天是：</strong>jlkkj', 保留空格和换行;//2. innerHTML识别HTML标签; div.innerHTML = '<strong>今天是：</strong>lljl';//二、var p = document.querySelector('p');console.log(p.innerText); //我是文字 1324console.log(p.innerHTML); //我是文字 [换行] <span>1324</span> </script>
</body>
</html>
4.2 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id='first'>第一张图片</button><button id='second'>第二张图片</button> <br/><img src="./images/1.jpg" alt="" title="第一张图片"><link rel="stylesheet" href="" id="test"><script>var first = document.getElementById('first');var second = document.getElementById('second');var img = document.querySelector('img');first.onclick = function() {img.src = './images/2.jpg'; img.title = '第二张图片'; }second.onclick = function() {img.src = './images/1.jpg'; img.title = '第一张图片'; }</script>
</body>
</html>
5.事件高级
5.1 注册事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><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) 同一个元素,同一个事件,可以添加多个监听器（事件处理程序）; // (3) ie9之前不支持此方法, 可用attachEvent来代替; 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>
</body></html>
5.2 删除事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: red;border: 2px solid black;}</style>
</head>
<body><div>1</div><div>2</div><div>3</div><script>//1.传统方式的删除事件var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);divs[0].onclick = null; //删除事件}//2.监听方式的删除事件: removeEventListenerdivs[1].addEventListener('click',fn)function fn() {alert('listen');divs[1].removeEventListener('click', fn);}//3.attach方式的删除事件divs[2].attachEvent('onclick',fn1);function fn1(){alert('attach');divs[2].detachEvent('onclick',fn1);}</script>
</body>
</html>
5.3 dom事件流
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 200px;background-color: red;}.son {width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><!-- 事件流描述的是从页面中接收事件的顺序; 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流; DOM事件流分为3个阶段：1.捕获阶段; 2.当前目标阶段; 3.冒泡阶段; 可以这么理解：捕获阶段 => 从最外层开始 向目标元素 层层靠近; 冒泡阶段 => 从目标元素开始 向外 逐层冒泡; (1) JS代码只能处于其中一个阶段，要么是冒泡阶段，要么是捕获阶段; (2) onclick 和 attachEvent只能得到冒泡阶段; (3) addEventListener()的第3个参数可以决定处于哪个阶段：冒泡阶段还是捕获阶段; true => 捕获阶段; false或省略 => 冒泡阶段; --><div class="father"><div class="son"></div></div><script>// 1.捕获阶段// body-father->sondocument.addEventListener('click', function() {alert('document-捕获');}, true);var father = document.querySelector('.father');father.addEventListener('click',function(){alert('father-捕获');}, true);var son = document.querySelector('.son');son.addEventListener('click',function(){alert('son-捕获');}, true);// 2.冒泡阶段// son->father->bodyvar son = document.querySelector('.son');son.addEventListener('click',function(){alert('son-冒泡');}, false);var father = document.querySelector('.father');father.addEventListener('click',function(){alert('father-冒泡');}, false);document.addEventListener('click',function(){alert('document-冒泡');}, false);</script>
</body>
</html>
5.4 事件对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: green;}span {display: block;width: 100px;height: 100px;background-color: purple;}</style>
</head><body><!-- 事件对象：事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里面，这个对象就是事件对象event，它有很多属性和方法。--><div>123</div><span>HelloWorld</span><script>var div = document.querySelector('div');div.onclick = function(event) { console.log(event);}/*上述函数中的形参event就是一个事件对象; 事件对象只有有了事件才会存在, 它是系统自动给我们创建的; 事件对象是与此事件相关的一系列数据的集合; */var span = document.querySelector('span');span.addEventListener('click', function (event) {console.log(event);// console.log(window.event);event = event || window.event; //考虑兼容性问题})//另外，事件对象可以自己命名，event,ev,e都可以的！//兼容性问题： IE678通过 window.event进行获得事件对象！</script>
</body></html>
5.5 事件对象的属性和方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 50px;height: 50px;background-color: green;}ul li {width: 50px;height: 50px;background-color: red;border: 2px solid black;}a {width: 50px;background-color: yellow;}.father {width: 100px;height: 100px;background-color: purple;}.son {width: 50px;height: 50px;background-color: blue;}/* 事件对象的属性和方法e.target: 返回触发事件的对象; e.srcElement: 返回事件的对象 非标准IE6—8使用; e.type: 返回事件的类型， 比如click，mouseover，，，; e.cancelBubble: 该属性阻止冒泡; e.returnValue: 该属性阻止默认事件，比如不让链接跳转; e.preventDefault(): 该方法阻止默认事件，比如不让链接跳转; e.stopPropagation(): 阻止冒泡; */</style>
</head>
<body><div>123</div><ul><li>abc</li><li>abc</li><li>abc</li></ul><a href="www.baidu.com">百度</a><div class="father"><div class="son">儿子</div></div><script>
/****************************************************************************/// [1.] event.target返回的是触发事件的对象，this返回的是绑定事件的对象; var div = document.querySelector('div');div.addEventListener('click',function(event) {console.log(event.target); //divconsole.log(this); //div});//var ul = document.querySelector('ul');ul.addEventListener('click',function(event) {console.log(this); //ulconsole.log(event.target); //li});/****************************************************************************/// [2.] preventDefault():阻止默认行为，让链接不跳转或者让提交按钮不提交; var a = document.querySelector('a');//监听注册a.addEventListener('click',function(event) {event.preventDefault();}) //传统注册a.onclick = function(event) { event.preventDefault(); //普通浏览器// event.returnValue; //低版本IE-678return false; //也可以阻止默认行为, 没有兼容性问题，但是return后的代码无法执行了};/****************************************************************************/// [3.] 阻止冒泡标准:stopPropagation() //false：冒泡阶段var son = document.querySelector('.son');son.addEventListener('click',function(event) {alert('son-冒泡');event.stopPropagation();// event.cancelBubble = true; //低版本}, false); var father = document.querySelector('.father');father.addEventListener('click',function(event) {alert('father-冒泡');},false); document.addEventListener('click',function(event) {alert('document');}); //第三个参数useCapture：默认就是false</script>
</body>
</html>
5.6 事件委托
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><Ul><li>Hello World</li><li>Hello World</li><li>Hello World</li><li>Hello World</li><li>Hello World</li></Ul><div>禁止复制文字</div><script>/* 事件委托：也称为事件代理，jQuery里面称为事件委派; 事件委托的原理：不用给每个子结点单独设置事件监听器了，而是给其父结点安装事件监听器，然后利用冒泡影响设置每个子结点; 冒泡： li -> ul -> body -> html -> document -> window; */var ul = document.querySelector('ul');ul.addEventListener('click', function(e) { //给父结点ul安装事件监听器e.target.style.backgroundColor = 'blue'; //e.target => li})/* 之前的话，把所有小li都给获取过来, 然后用依次给每个小li绑定click事件;（如果小li多就麻烦了） 现在，给小li的父结点添加点击事件, 因为点击li，会冒泡，冒到ul上，此时event.target => 就是点击的小li; 事件委托作用：只操作了一次dom, 提高了程序的性能; *///两个事件: 菜单事件， 选择事件// 1.禁用右键菜单document.addEventListener('contextmenu', function(event){event.preventDefault();})// 2.禁用鼠标选择document.addEventListener('selectstart', function(event) {event.preventDefault();})</script>
</body>
</html>
5.7 鼠标事件对对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {height: 3000px;}</style>
</head><body><script>// 鼠标事件对象 MouseEventdocument.addEventListener('click', function(e) {console.log(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>
</body></html>
5.8 键盘事件对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- keyup: 可以识别功能键; keydown: 可以识别功能键; keypress: 不能识别功能键(control,shift,<-, ->,,,); 执行顺序: keydown -> keypress -> keyup; --><!-- onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。在实际开发中，更多的使用的是keydown和keyup，因为它能识别所有的键(包括功能键)keypress: 不识别功能键(比如 ctrl shift 左右箭头,,,); keydown/keyup: 识别功能键; keyCode属性：返回该键的ASCII码值！keyup 和keydown事件不区分字母大小写 => a 和 A 得到的都是65; keypress 事件 区分字母大小写 => a-97 和 A-65; --><script>document.addEventListener('keydown', function(event) {console.log('keydown' + event.keyCode);}); document.addEventListener('keypress', function(){console.log('press' + event.keyCode);}); document.addEventListener('keyup', function(event) {console.log('keyup' + event.keyCode);}); </script>
</body>
</html>
