1.事件监听：
<button>点我</button>
<script>
let btn = document.querySelector('button');
/* 点击三下分别 alert出现 123 */
/* btn.onclick=function(){
alert(1)
}
btn.onclick=function(){
alert(2)
}
btn.onclick=function(){
alert(3)
} */
/* 监听onclick事件 */
/* 和onclick区别，事件不会被覆盖 */
window.addEventListener('click',function(){
alert(1)
})
window.addEventListener('click',function(){
alert(2)
})
window.addEventListener('click',function(){
alert(3)
})
</script>
2.冒泡和捕获：
<div onclick="alert(1)" class="div1">
<div onclick="alert(2)" class="div2"></div>
</div>
<script>
/* 点击子元素 会把父元素的事件也调用 */
let div1 = document.querySelector('.div1')
let div2 = document.querySelector('.div2')
/* div1.onclick = function(){
alert(1)
}
div1.onclick = function(){
alert(2)
} */
/* false就表示冒泡 从里到外触发事件*/
/* true表示捕获 从外到里触发事件*/
div1.addEventListener('click', function (){
alert(1)
},/* false */true)
div2.addEventListener('click', function (e){
/* 兼容写法 ,谷歌ie都支持*/
let eObj = e || event
/*或者 eObj.stopPropagation */
/*或者 eObj.cancelBubble = true 都能阻止冒泡*/
/* event是一个JS的关键字，这个关键字变量保存了事件源对象的属性 */
console.log(event);
/* 事件源对象 */
console.log(e);
e.stopPropagation()
/* 阻止事件冒泡的方法 */
e.cancelBubble = true
/* 取消冒泡属性 */
alert(2)
},/* false */true)
</script>
3.鼠标事件：
<h1 style="background-color: beige;">点我一下</h1>
<script>
let h1 = document.querySelector('h1');
/* 鼠标双击 */
/* h1.ondblclick = function (){
alert('我双击了')
}
h1.addEventListener('dblclick',function(){
alert('我双击了')
}) */
/* 鼠标在指定的区域移动激活事件 */
h1.onmousemove = function (){
console.log("我移动了");
}
h1.addEventListener('mousemove',function(){
alert('我双击了')
})
</script>
4.表单事件：
<form action="">
<p>
用户名：<input type="text" onblur="bluFn()" name="username" id="user">
</p>
<p>
选择跑车：
<select name="carname" id="car" onchange="changFn()">
<option value="奔驰">奔驰AMG</option>
<option value="宝马">宝马M4</option>
<option value="雪佛兰">大黄蜂</option>
</select>
</p>
<input type="submit" value="提交" id="submitId">
<input type="reset" value="重置" id="reseId">
</form>
<script>
let user = document.getElementById('user')
/* onfocus 获取焦点 */
user.onfocus = function(){
user.style.backgroundColor = 'yellow'
}
/* onblur 元素失去焦点 */
function bluFn(){
user.style.background = "#FFF"
}
/* onchange 用户改变域的内容 */
let car = document.getElementById('car');
function changeFn(){
console.log(1);
alert(car.childNodes[1].innerHTMl)
//value是后台所需要的值，如果想传给后台，需把value属性上
//写上你需要传的值
}
/* onreset */
let reseId = document.querySelector('resetId')
let formId = document.querySelector('formId')
resetId.onreset = function (){
console.log('重置');
}
/* onreset 使用这个事件除了默认的可以清除表单外还可以做一些 清除表单之后的
事情，比如把输入的背景色改回来 */
/* onsubmit事件不支持input，支持form事件 */
formId.onreset = function (){
console.log('重置');
user.style.background = ''
}
</script>
表单事件练习：
<!-- 写一个表单 有用户名和密码
输入框 获得焦点的时候 框内的文字颜色变红
输入框 失去焦点的时候 框内的文字颜色变黑
选择框 选择男女 默认男
修改的时候触发 alert 出()你选的性别
提交 alert 出 我提交了 reset alert 出我重置了 -->
<form action="" method="get" id="formId">
<p>
用户名：<input type="text" onblur="blurFn()" name="username" id="user">
</p>
<p>
选择跑车：
<select name="carname" id="car" onchange="changeFn()">
<option value="0">奔驰AMG</option>
<option value="1">宝马M4</option>
<option value="2">大黄蜂</option>
</select>
</p>
<p>
性别：
<!-- \ 转义在这里无效 -->
<input type="radio" name="1" id="nan" value="男" onclick="radioFn('男')"> 男性
<input type="radio" name="1" id="nv" value="女" onclick="radioFn('女')"> 女性
</p>
<input type="submit" value="提交" id="submitId"> |
<input type="reset" value="重置" id="resetId">
</form>
<script>
/* 写一个表单 有密码框 */
/* 输入框 获得焦点的时候 框内的文字颜色变红 */
/* 输入框 失去焦点的时候 框内的文字颜色变黑 */
/* 选择框 选择 男女 默认男 */
/* 修改的时候触发 alert出你选的性别 */
/* 提交 alert 我提交了 reset alert 我重置了 */
let user = document.getElementById('user');
let car = document.getElementById('car');
let resetId = document.getElementById('resetId');
let formId = document.getElementById('formId');
let submitId = document.getElementById('submitId');
let nan = document.getElementById('nan');
let nv = document.getElementById('nv');
function radioFn (val){
alert(val)
}
/* onsubmit 表单提交事件不支持input标签，支持form标签*/
formId.onsubmit = function (){
alert('我提交了')
}
/* onreset 表单重置事件不支持input标签，支持form标签*/
// resetId.onreset = function (){
// console.log('重置')
// }
/* onreset 使用这个事件 除了默认的可以清除表单外
还可以做一些 清除表单之后的事情 ，比如把输入的背景色改回来 */
// formId.onreset = function (){
// console.log('重置')
// user.style.background = ''
// }
/* onchange 用户改变域的内容 */
function changeFn (){
alert(car.value)
// alert(car.childNodes[1].innerHTML)
/* value值是后台所需要的值 如果想传给后台 请把value属性上 写上你需要传的值 */
}
/* onfocus 获取焦点 */
user.onfocus = function (){
// user.style.background = 'yellow'
user.style.color = 'red'
}
/* onblur 元素失去焦点 */
function blurFn(){
// user.style.background = 'red'
user.style.color = ''
}
</script>
5.转义符号：
<div id="div1" style="width: 200px;height: 200px;border:1px solid #ccc">
</div>
<script>
div1.onclick = function(){
/* \ 转义符 \" 把" 当作一个字符串 */
// div1.innerHTML = "<h1 style=\"color:red;\">我是div</h1>"
// div1.innerHTML = "<h1 style='color:red;'>我是div</h1>"
}
</script>
6.offsetLeft和left的区别：
<div id="div1" style="margin:5px;width: 200px;height: 200px;background-color: aqua;">
<div id="aa" style="margin:10px;width: 100px;height: 100px;background-color:bisque;"></div>
</div>
<script>
/*offsetLeft不可以设置 */
// aa.offsetLeft = 90;
console.log(aa.offsetLeft);
/* 没有清除内外边距的情况 */
/* 在标准文档流下 aa.offsetLeft（18）= aa.marginLeft(10) + body.marginLeft(8) */
/* 清除内外边距后 aa.offsetLeft（10）= aa.marginLeft(10)*/
/* 清除内外边距后 外层div 设置了margin
aa.offsetLeft（15）= aa.marginLeft(10) + div.marginLeft(5)*/
/*offsetLeft返回的是数字类型 number类型 */
/* 脱离文档流下 aa.offsetLeft（30） = aa.marginLeft(10) + aa的left值（20） */
// console.log( aa.offsetLeft );
/* 脱离文档流下 aa的left（20） = aa的left（20） 不包括 aa.marginLeft的值*/
/* 在标准文档流下 aa的left的值是auto */
/* aa.style.left 返回的是字符串 并且带有px单位 */
// console.log( aa.style.left );
// console.log(aa);
// console.log( window.getComputedStyle(aa,null).left );
/* aa.style.left/top是可读可写的 但是 offsetLeft只可以读取*/
</script>
