表单事件
onfocus 获取焦点
onblur 元素失去焦点
onchange 用户改变域的内容
onsubmit 表单提交事件不支持input标签,支持form标签
onreset 表单重置事件不支持input标签,支持form标签
onreset 使用这个事件 除了默认的可以清除表单外
还可以做一些 清除表单之后的事情 ,比如把输入的背景色改回来
冒泡和捕获
点击子元素 把父元素的事件也调用了 事件冒泡
false表示冒泡(从里到外触发事件)
true表示捕获 (从外到里触发事件)
div1.addEventListener('click',function (){
alert(1)
},true)
div2.addEventListener('click',function (){
alert(2)
},true)
事件源对象
console.log(e);
阻止事件冒泡的方法
e.stopPropagation();
取消冒泡属性
e.cancelBubble = true;
event是一个js的关键字 这个关键字变量保存了事件源对象的属性*/
console.log(event);
event.stopPropagation()
event.cancelBubble = true;
兼容写法 让谷歌和ie都支持
let eObj = e || event;
eObj.stopPropagation()
eObj.cancelBubble = true;
监听onclick事件
和onclick的区别 区别一 写的方法不会被覆盖
区别二 false表示冒泡(从里到外触发事件
true表示捕获 (从外到里触发事件
window.addEventListener('click',function(){
alert(1)
})
window.addEventListener('click',function(){
alert(2)
})
window.addEventListener('click',function(){
alert(3)
})
鼠标事件
鼠标双击
h1.ondblclick = function(){
alert('我双击了')
}
h1.addEventListener('dblclick',function(){
alert('我双击了')
})
鼠标在指定的区域内移动事件 */
h1.onmousemove = function (){
console.log('我移动了');
}
h1.addEventListener('mousemove',function(){
console.log('我移动了');
})
转义符
div1.onclick = function(){
\ 转义符 \" 把" 当作一个字符串
div1.innerHTML = "<h1 style=\"color:red;\">我是div</h1>"
div1.innerHTML = "<h1 style='color:red;'>我是div</h1>"
}