1、总结
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1. 节点的属性和方法
// 节点类型的属性:
// nodeType 1 标签
// nodeName 字符串 大写的标签名
// nodeValue null
// 节点层级的属性:
// parentNode 父节点
// childNodes 子节点
// children 子元素
// nextElementSibling 下一个兄弟元素
// previousElementSibling 上一个兄弟元素
//
// 节点的方法
// appendChild 往后面加子节点
// insertBefore 往参考子节点前插入一个新的节点
// replaceChild 替换掉一个子节点
// removeChild 删除子节点
// cloneNode 传true, 就是复制所有, 否则就复制元素本身
//
// 2. js动态的创建元素
//
// innerHTML 直接赋值一个html形式的字符串,会识别标签,并且直接渲染到页面上
// document.createElement() 只是创建元素,并没有添加到dom树上
</script>
</body>
</html>
2、注册事件的其它方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">123</div>
<script>
var box = document.getElementById('box');
// box.onclick = function(){
// console.log('假装这是一百行代码');
// }
//
// box.onclick = function(){
// console.log('新增的逻辑代码');
// }
// addEventListener 可以给同一个元素,多次注册同一个事件
// 语法: 元素.addEventListener('事件名', 事件处理函数, false);
// box.addEventListener('click', function(){
// console.log('假装这是一百行代码');
// }, false);
// box.addEventListener('click', function(){
// console.log('新增的逻辑');
// }, false);
box.addEventListener('click', fn, false);
function fn(){
console.log('ahah ');
}
</script>
</body>
</html>
3、移除事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">点击按钮,移除div的事件</button>
<div id="box"></div>
<script>
var box = document.getElementById('box');
// box.onmouseover = function(){
// console.log('有个胖子叫哆啦A梦');
// }
box.addEventListener('mouseover', fn, false);
box.addEventListener('mouseover', fn1, false);
function fn(){
console.log('多啦a梦明天穿件蓝色的衣服');
}
function fn1(){
console.log('啊哈哈哈哈');
}
var btn = document.getElementById('btn');
btn.onclick = function(){
//移除box的鼠标移入的事件
// box.onmouseover = null;
//addEventListener对应移除事件的方法是removeEventListener
box.removeEventListener('mouseover', fn, false);
// 注意: 如果我们后面要移除事件,那么在注册的时候,第二个参数就不要使用匿名函数的方式
}
</script>
</body>
</html>
4、事件对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 3000px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 1. 为什么要学习事件对象?
// 因为我们需要获取事件触发时的一些信息,比如说触发事件时鼠标的坐标,比如说,触发的是谁的事件... ,而我们需要的这些信息,都存储在事件对象身上
// 2. 什么是事件对象?
// 触发事件的那一刻,浏览器会自动创建一个对象出来,这个对象身上存储了我们需要的信息,这个对象就叫做事件对象
// 3. 如何使用事件对象?
// 3.1 如何获取事件对象
var box = document.getElementById('box');
box.addEventListener('mouseover', function(e){
//如果我们需要使用事件对象的话,只需要在事件处理函数上写一个形参,来接收一下即可
// ,因为浏览器会自动把事件对象当做实参,传递进来
//3.2 事件对象身上存储哪些东西
// console.log(e);
// console.log(e.type); //事件类型(事件名)
// console.log(e.target) //事件目标 (触发了谁的事件,谁就是事件目标)
// console.log(e.clientX); //触发事件时,鼠标相对浏览器可视区的水平坐标
// console.log(e.clientY); //触发事件时,鼠标相对浏览器可视区的垂直坐标
// console.log(e.pageX); //触发事件时,鼠标相对整个页面的水平坐标
// console.log(e.pageY); //触发事件时,鼠标相对整个页面的垂直坐标
}, false);
</script>
</body>
</html>
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>
<style>
body {
height: 1500px;
}
/*div{*/
/*width: 300px;*/
/*height: 300px;*/
/*background-color: pink;*/
/*}*/
</style>
</head>
<body>
<!--<div id='box'></div>-->
<img src="images/tianshi.gif" alt="" id="img">
<script>
// var box = document.getElementById('box');
注册鼠标移动事件 mousemove
box.onmousemove = function(){
console.log(1);
}
// //如果要监听鼠标在页面上移动就要把事件注册给document.document代表整个页面
// document.onmousemove = function(){
// console.log(1);
// }
// 需求: 鼠标到哪,小天使跟着到哪
// 获取img
var img = document.getElementById('img');
img.style.position = 'absolute';
// 1. 给document注册鼠标移动的事件
document.onmousemove = function(e){
//2. 在事件处理函数中,获取鼠标的坐标 client
// var x = e.clientX;
// var y = e.clientY;
var x = e.pageX;
var y = e.pageY;
//3. 把鼠标的坐标赋值给img的left和top
img.style.left = x + 'px';
img.style.top = y + 'px';
}
</script>
</body>
</html>
6、事件对象的keyCode属性和键盘事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt">
<script>
// keydown 按下时触发 不区分大小写 大写的ASCII码
// keyup 抬起时触发
// keypress 按下时触发 区分大小写
var txt = document.getElementById('txt');
txt.onkeydown = function(e){
console.log('keydown:' + e.keyCode); //返回的是对应的按下的键的数字 随便是标准里移除的,但是浏览器都支持,放心使用
// e.key这个属性,在mdn中推荐使用,但是由于是新标准,所以存在兼容性问题,很多浏览器不支持
// console.log(e);
}
txt.onkeypress = function(e){
console.log('keypress:' + e.keyCode);
}
//把ASCII码转换成对应的字符
console.log(String.fromCharCode(81));
console.log(String.fromCharCode(113));
</script>
</body>
</html>
7、KeyCode案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<script>
// 按tab键,浏览器有默认的行为,会让下一个input获得焦点
// 当我们按回车键的时候,也要让下一个input获取的焦点
// 1. 获取元素 input
var inputs = document.querySelectorAll('input');
// 2. 给每一个input注册鼠标按下的事件
for(var i = 0; i < inputs.length; i++) {
inputs[i].onkeydown = fn;
}
function fn(e){
// 3. 在事件处理函数中判断是否是回车键
// console.log(e.keyCode);
if(e.keyCode == 13){
// 4. 如果是回车键,就下一个input获得焦点
// 4.1 获取到下一个input
console.log(this.nextElementSibling);
// 4.2 让下一个input获得焦点 focus方法会获得焦点
this.nextElementSibling.focus();
}
}
</script>
</body>
</html>
8、keyCode案例增强版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<div></div>
<input type="text"><br>
<input type="text"><br><br><br><br><br>
<input type="text"><br><br><br>
<input type="text"><br>
<script>
// 按tab键,浏览器有默认的行为,会让下一个input获得焦点
// 当我们按回车键的时候,也要让下一个input获取的焦点
// 1. 获取元素 input
var inputs = document.querySelectorAll('input');
// 2. 给每一个input注册鼠标按下的事件
for(var i = 0; i < inputs.length; i++) {
inputs[i].onkeydown = fn;
}
function fn(e){
// 3. 在事件处理函数中判断是否是回车键
// console.log(e.keyCode);
if(e.keyCode == 13){
// 4. 如果是回车键,就下一个input获得焦点
// 4.1 获取到下一个input
var result = getNextInput(this);
console.log(result);
// 4.2 让下一个input获得焦点 focus方法会获得焦点
// 判断result如果不是null才调用focus方法
if(result){ //如果result是元素,转布尔一定是true,如果是null,转布尔一定是false
result.focus();
}
}
}
//用于获取下一个input
// ele: 获取ele的下一个input
function getNextInput(ele){
// 获取ele的下一个兄弟元素
var next = ele.nextElementSibling;
//判断有没有下一个了,如果没有就直接结束了
if(next == null){
return null;
}
// 判断是否是input
if(next.nodeName === 'INPUT'){
return next;
}else{
//进入到这里,证明此时next不是input
return getNextInput(next);
// return undefined
}
}
</script>
</body>
</html>
9、总结二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1. 注册事件的其他方式:
// addEventListener('事件名', 事件处理函数, false)
// 注意: 如果后面有移除事件的逻辑,那么在注册的时候,事件处理函数不要使用匿名函数
// 2. 移除事件:
// 元素.on + 事件名 = null;
// addEventListener -- > removeEventListener('事件名', 事件处理函数, false);
// 3. 事件对象:
// type 事件类型
// target 事件目标 (触发了谁的事件,谁就是事件目标)
// clientX/clientY 鼠标在可视区的坐标
// pageX/pageY 鼠标在页面的坐标
// keyCode 键盘按键对应的数字(ASCII码)
</script>
</body>
</html>
10、其它类型转布尔
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var result = 1;
// if(result){
//
// }
// console.log('1' == 1);
// 数字转布尔 ,除了0 都是true NaN 转布尔也是false NaN != NaN是true
// 字符串转布尔: 出了空的字符串, 都是true '' ""
// null 转布尔一定是false
// undefined 转布尔一定是false
// 对象 转布尔一定是true
</script>
</body>
</html>
11、事件流
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#grandfar{
width: 300px;
height: 300px;
background-color: pink;
}
#far{
width: 200px;
height: 200px;
background-color: green;
}
#son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="grandfar">
<div id="far">
<div id="son"></div>
</div>
</div>
<script>
// 1.只要点击/移入...发生了,就一定触发了事件,跟我们有没有注册事件没有关系
// 2.一旦,触发了事件,就会产生一个事件流.
// 3.然后马上要确定下来一个事件路径
// 假如点击了grandfar,那么事件路径就是: window - > document - > body > grandfar
// 假如点击了son,那么事件路径就是: window - > document - > body > grandfar --> far --> son
var son = document.getElementById('son');
var far = document.getElementById('far');
var grandfar = document.getElementById('grandfar');
// son.onclick = function(){
// console.log('son的点击事件');
// }
far.onclick = function(){
console.log('far的点击事件');
}
grandfar.onclick = function(){
console.log('grandfar的点击事件');
}
document.body.onclick = function(){
console.log('body的点击事件');
}
</script>
</body>
</html>
12、事件委托案例
<!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>
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid blue;
}
ul {
padding: 20px;
}
li {
list-style: none;
margin-top: 10px;
background-color: skyblue;
height: 30px;
line-height: 30px;
}
button {
width: 100%;
height: 50px;
background-color: white;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li>你见，或者不见我 </li>
<li>我就在那里 </li>
<li>不悲不喜 </li>
<li>你念，或者不念我 </li>
<li>情就在那里 </li>
<li>不来不去 </li>
<li>你爱，或者不爱我 </li>
<li>爱就在那里 </li>
<li>不增不减 </li>
</ul>
<button id="btn">点击加载更多..</button>
</div>
<script>
var arr = [
'你跟，或者不跟我',
'我的手就在你手里',
'不舍不弃',
'来我的怀里',
'或者',
'让我住进你的心里',
'默然 相爱',
'寂静 喜欢',
]
// 需求:
// 1.无序列表中每一个li都有点击事件,点击之后,把对应的文本打印到控制台上
// // 1. 获取元素 li
// var lis = document.querySelectorAll('li');
var ul= document.querySelector('#ul');
//
// // 2. 给每一个li注册点击事件
// for (var i = 0; i < lis.length; i++) {
// lis[i].onclick = fn;
// }
// function fn() {
// // 3. 在事件处理函数中,打印对应的文本
// console.log(this.innerText);
// }
//事件委托: 本来是自己做的事件,委托给父级元素
// 事件委托的优点:
// 1. 代码简洁
// 2. 节省内存
// 事件委托的原理:
// 事件流(事件冒泡)
ul.onclick = function(e){
//找到点的是那个li
console.log(e.target.innerText);
}
// 2. 点击按钮,加载更多
// 2.1 获取元素
var btn = document.querySelector('#btn');
// 2.2 给按钮注册点击事件
btn.addEventListener('click', function(){
// 2.3 在事件处理函数中,动态的创建li,添加到ul中
for(var i = 0; i < arr.length; i++) {
var li = document.createElement('li');
li.innerText = arr[i];
// li.onclick = fn; //由于后创建的没有注册事件,所以必须给他们在注册一遍
ul.appendChild(li);
}
}, false);
</script>
</body>
</html>
13、addEventListener的第三个参数.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#grandfar{
width: 300px;
height: 300px;
background-color: pink;
}
#far{
width: 200px;
height: 200px;
background-color: green;
}
#son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="grandfar">
<div id="far">
<div id="son"></div>
</div>
</div>
<script>
var son = document.getElementById('son');
var far = document.getElementById('far');
var grandfar = document.getElementById('grandfar');
// 第三个参数: 要求传入一个布尔值 ,如果是true,则事件处理函数在事件捕获阶段执行,如果是false,则在事件冒泡阶段执行.如果这个元素是事件目标,那么true/false就无效了
son.addEventListener('click', function(){
console.log('son的点击');
}, true);
far.addEventListener('click', function(){
console.log('far的点击');
}, true);
grandfar.addEventListener('click', function(){
console.log('grandfar的点击');
}, false);
</script>
</body>
</html>
14、事件对象的两个方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#grandfar{
width: 300px;
height: 300px;
background-color: pink;
}
#far{
width: 200px;
height: 200px;
background-color: green;
}
#son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="grandfar">
<div id="far">
<div id="son"></div>
</div>
</div>
<a href="" id="link">点击打印1</a>
<script>
// event.stopPropagation() //阻止事件传播
// event.preventDefault() //阻止默认行为
var link = document.getElementById('link');
link.addEventListener('click', function(e){
console.log(1);
// return false; //在addEventListener中不能使用return false 来阻止默认行为
e.preventDefault();
})
//
// var son = document.getElementById('son');
// var far = document.getElementById('far');
// var grandfar = document.getElementById('grandfar');
// son.addEventListener('click', function(e){
// console.log('son的点击');
e.stopPropagation(); //阻止事件传播的
// }, false);
// far.addEventListener('click', function(e){
// console.log('far的点击');
// e.stopPropagation();
// }, true);
// grandfar.addEventListener('click', function(){
// console.log('grandfar的点击');
// }, false);
</script>
</body>
</html>
