表单事件
<script>
let user=document.getElementById('user')
/* onfocus 获取焦点*/
user.onfocus=function(){
user.style.background='yellow'
}
/* onblur 失去焦点 */
user.onblur=function(){
user.style.background=''
}
let car =document.getElementById('car')
/* onchange 用户改变域的内容 */
function changefn(){
/* value值是后台所需要的值如果想传给后台请把value属性上写上你需要传的值 */
}
let restid =document.getElementById('restid')
/* onreset */
/* 表单重置事件不支持input标签,支持form标签 */
let formid=document.getElementById('formid')
formid.onreset=function(){
console.log('重置');
}
/* onsubmit */
/* 表单提交事件不支持input标签,支持form标签 */
</script>
捕获和冒泡
<body>
<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){
/* event是一个js的关键字这个关键字变量保存了事件源对象的属性 */
/* 阻止事件冒泡的方法 */
/*event.stopPropagation() */
/* 取消冒泡属性 */
/*event.cancelBubble=true */
/* 兼容写法,让IE和谷歌都兼容 */
let eObj=e || event
eObj.cancelBubble=true
/* 事件源对象 */
console.log(e);
/* 阻止事件冒泡的方法 */
/* e.stopPropagation() */
/* 取消冒泡属性 */
/* e.cancelBubble=true */
alert(2)
}
/* false就表示冒泡(从里到外触发事件) */
/* true就表示捕获 (从外到里触发事件) */
/* div1.addEventListener('click',function(){
alert(1)
},false)
div2.addEventListener('click',function(){
alert(2)
},false) */
</script>
</body>