鼠标事件2
<body>
<h1 style="background-color: bisque;">点我一下</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(){
// console.log('我移动了');
// })
</script>
</body>
事件监听
<script>
let btn = document.querySelector('button');
/* 点击一下 分别alert出 1 2 3 */
// btn.onclick = function () {
// alert(1)
// }
// btn.onclick = function () {
// alert(2)
// }
// /* 这样设置会被覆盖 只保留最后一个 */
// btn.onclick = function () {
// alert(3)
// }
/* 监听onclick事件 */
/* 和onclick的区别 区别一 写的方法不会被覆盖 */
/* 区别二 false表示冒泡（从里到外触发事件） */
/* true表示捕获 （从外到里触发事件） */
// window.addEventListener('click',function(){
// alert(1)
// })
// window.addEventListener('click',function(){
// alert(2)
// })
// window.addEventListener('click',function(){
// alert(3)
// })
</script>
表单事件
<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>
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>
冒泡和捕获
<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){
/* 兼容写法 让谷歌和ie都支持 */
let eObj = e || event;
// eObj.stopPropagation()
eObj.cancelBubble = true;
/* event是一个js的关键字 这个关键字变量保存了事件源对象的属性*/
// console.log(event);
// event.stopPropagation()
// event.cancelBubble = true;
/* 事件源对象 */
// console.log(e);
/* 阻止事件冒泡的方法 */
// e.stopPropagation();
/* 取消冒泡属性 */
// e.cancelBubble = true;
alert(2)
}
/* false表示冒泡（从里到外触发事件） */
/* true表示捕获 （从外到里触发事件） */
// div1.addEventListener('click',function (){
// alert(1)
// },true)
// div2.addEventListener('click',function (){
// alert(2)
// },true)
</script>
