鼠标事件、事件监听、冒泡和捕获、表单事件

193 阅读1分钟

 【鼠标双击 】

 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 = ''

}