事件监听
<button>点我</button>
<script>
let btn =document.querySelector('button');
/* 点击三下分别弹出1，2，3 */
/* 监听onclick事件 */
addEventListener('click',function(){
alert(1)
})
addEventListener('click',function(){
alert(2)
})
addEventListener('click',function(){
alert(3)
})
</script>
冒泡捕获
<div class="div1">
<div class="div2"></div>
</div>
<script>
/* 点击子元素，把父元素的事件也调用了，事件冒泡 */
let div1=document.querySelector('.div1')
let div2=document.querySelector('.div2');
div1.onclick=function(){
alert(1);
}
/* div2.onclick=function(e){
let eObj=e||event;
eObj.cancelBubble=true;
} */
div2.onclick=function(e){
//event是js的一个关键字，这个关键字变量保存了事件源对象的属性
console.log(event);
console.log(e);
e.stopPropagation();
alert(2);
}
/* false表示冒泡（从里到外触发事件）
true表示捕获 （从外到里触发事件） */
/* let div1=document.querySelector('.div1')
let div1=document.querySelector('.div2');
div1.addEventListener('click',function(){
alert(1)
},ture)
div12.addEventListener('click',function(){
alert(2)
},ture) */
</script>
鼠标点击事件
/* 鼠标双击 */
/* h1.ondblclick=function(){
alert('我双击了')
}
h1.addEventListener('dblclick',function(){
alert('我双击了')
}) */
/* h1.onmousemove=function(){
console.log('我移动了');
}
h1.addEventListener('mousemove', function () {
console.log('我移动了');
}) */
表单事件
<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="奔驰">奔驰AMG</option>
<option value="宝马">宝马M4</option>
<option value="雪佛兰">大黄蜂</option>
</select>
</p>
<input type="submit" value="提交">
<input type="reset" value="重置" id="resetId">
</form>
<script>
let user=document.getElementById('user');
let car=document.getElementById('car');
let resetId=document.getElementById('resetId')
let formId=document.getElementById('formId')
/* onfocus 获取焦点 */
user.onfocus=function(){
user.style.backgroundColor='yellow'
}
/* onblur 元素失去焦点 */
function blurFn(){
user.style.backgroundColor='red'
}
/* onchange 用户改变域的内容*/
function changeFn(){
alert(car.value)
//alert(car.childNodes[1])
/* value是后台需要的值，如果想传给后台，请把value属性上写你需要传的值 */
}
/* onreset 使用这个事件 除了默认的可以清除表单外，还可以做一些清除表单之后的事情，比如把输入框的背景色改回来 (不支持input标签，支持form标签)*/
formId.onreset=function(){
console.log('重置');
user.style.backgroundColor='#fff'
}
/* onsubmit (不支持input标签，支持form标签) */
formId.onsubmit=function(){
alert('我触发了');
}
</script>
