【鼠标双击 】
h1.ondblclick = function(){
alert('我双击了')
}
h1.addEventListener('dblclick',function(){
alert('我双击了')
})
【 鼠标在指定的区域内移动事件】
h1.onmousemove = function (){
console.log('我移动了');
}
h1.addEventListener('mousemove',function(){
console.log('我移动了');
})
【 点击一下 分别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)
})
【冒泡和捕获】
【兼容写法 让谷歌和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;
false表示冒泡(从里到外触发事件)
true表示捕获 (从外到里触发事件)
div1.addEventListener('click',function (){
alert(1)
},true或false)
div2.addEventListener('click',function (){
alert(2)
},truefalse)
【表单事件】
【onsubmit 表单提交事件不支持input标签,支持form标签】
【onreset 表单重置事件不支持input标签,支持form标签】
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 = ''
}