表单监听事件,冒泡和捕获

142 阅读1分钟

表单事件:

onfocus 获取焦点

onblur 元素失去焦点

onchange 用户改变域的内容(value值是后台所需要的值 如果想传给后台 请把value属性上 写上你需要传的值)

onreset 表单重置事件不支持input标签,支持form标签。

onreset 使用这个事件 除了默认的可以清除表单外还可以做一些 清除表单之后的事情 ,比如把输入的背景色改回来。

formId.onreset = function (){          console.log('重置')          user.style.background = ''       }

onsubmit 表单提交事件不支持input标签,支持form标签

监听事件:

监听addEventListener事件

和onclick的区别 区别一 写的方法不会被覆盖

区别二 false表示冒泡(从里到外触发事件)

true表示捕获 (从外到里触发事件)

window.addEventListener('click',function(){

alert(1)

 })

window.addEventListener('click',function(){

alert(2)

})

window.addEventListener('click',function(){

alert(3)

})

点击子元素 把父元素的事件也调用了 事件冒泡

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)