js事件
什么是事件
一个事件的组成
触发谁的事件:事件源
触发什么事件:事件类型
触发后做什么:事件处理函数
例
btn(元素).onclick = function(){}
触发谁的事件:btn 事件源:btn(元素)
触发什么事件:onclick 事件类型:click
触发后做什么:function(){} 事件处理函数:function(){}
鼠标事件
鼠标左键事件
单击事件
语法:
元素.onclick = function(){}
var div = document.querySelector('div')//获取第一个div
div.onclick = function(){console.log('鼠标单击时触发')}
上述代码表示当鼠标左键点击获取到的div时会运行事件里的代码控制台就会打印出 '鼠标单击时触发' 这段文字
双击事件
语法:
元素.ondblclick = function(){}
var div = document.querySelector('div')
div.ondblclick = function(){console.log('鼠标双击时触发')}
上述代码表示当鼠标左键双击获取到的div时会运行事件里的代码控制台就会打印出 '鼠标双击时触发' 这段文字
鼠标按下事件
语法:
元素.onmousedown = function(){}
注意:此事件鼠标按下时,不管抬不抬起都会触发
var div = document.querySelector('div')
div.onmousedown = function(){console.log('鼠标按下时触发')}
上述代码表示当鼠标左键在获取到的div里按下时会运行事件里的代码控制台就会打印出 '鼠标按下时触发' 这段文字
鼠标抬起事件
语法:
元素.onmouseup = function(){}
var div = document.querySelector('div')
div.onmouseup = function(){console.log('鼠标抬起时触发')}
上述代码表示当鼠标左键在获取到的div里按下后抬起时会运行事件里的代码控制台就会打印出 '鼠标按下时触发' 这段文字
鼠标右键事件
单击事件
语法:
元素.oncontextmenu = function(){}
var div = document.querySelector('div')
div.oncontextmenu = function(){console.log('鼠标右击触发')}
上述代码表示当鼠标右键单击获取到的div时会运行事件里的代码控制台就会打印出 '鼠标右击触发' 这段文字
鼠标移入事件
语法1:
元素.onmouseover = function(){}
var div = document.querySelector('div')
div.onmouseover = function(){console.log('鼠标移入时触发')}
上述代码表示当鼠标移入获取到的div里时会触发事件代码,控制台就会打印出 '鼠标移入时触发' 这段文字
注意:此方法如果div里还包含着一个子元素时,当鼠标从父元素移入到子元素时,也会触发这个事件
语法2:
元素.onmouseenter = function(){}
var div = document.querySelector('div')
div.onmouseenter = function(){console.log('鼠标移入时触发')}
上述代码表示当鼠标移入获取到的div里时会触发事件代码,控制台就会打印出 '鼠标移入时触发' 这段文字
注意:此方法在移入子元素时不触发
鼠标移出
语法1:
元素.onmouseout = function(){}
var div = document.querySeiector('div')
div.onmouseout = function(){console.log('鼠标移出时触发')}
上述代码表示当鼠标移出获取到的div里时会触发事件代码,控制台就会打印出 '鼠标移入时触发' 这段文字
注意:此方法如果div里还包含着一个子元素时,当鼠标从父元素移入到子元素时,也会触发这个事件
语法2:
元素.onmouseleave = function(){}
var div = document.querySeiector('div')
div.onmouseleave = function(){console.log('鼠标移出时触发')}
上述代码表示当鼠标移出获取到的div里时会触发事件代码,控制台就会打印出 '鼠标移入时触发' 这段文字
注意:此方法在移入子元素时不触发
键盘事件
注意:键盘事件只有两个元素可以触发
1.document(当前文档)
2.input(输入框)
键盘抬起事件
语法:
document / input元素.onkeyup = function(){}
document.onkeyup = function(){console.log('键盘抬起时触发')}
上述代码表示在当前文档按下键盘上的任意键抬起后会触发事件,然后就会将字符串 '键盘抬起时触发' 打印到控制台上
键盘按下事件
语法:
document / input元素.onkeydown = function(){}
document.onkeydown = function(){console.log('键盘按下时触发')}
上述代码表示在当前文档按下键盘上的任意键后会触发事件,然后就会将字符串 '键盘按下时触发' 打印到控制台上
键盘按下抬起事件
语法:
document / input元素.onkeypress = function(){}
document.onkeypress = function(){console.log('键盘按下抬起时触发')}
上述代码表示在当前文档按下键盘上的任意键抬起后会触发事件,然后就会将字符串 '键盘按下抬起时触发' 打印到控制台上
表单事件
注意:此事件只有表单元素才能使用
获得焦点事件
语法:
表单元素.onfocus = function(){}
var inp = document.querySelector('input')//获取表单元素
inp.onfocus = function(){console.log('获取焦点时触发')}
上述代码表示当input获取焦点时触发事件,将字符串 '获取焦点时触发' 打印到控制台
失去焦点事件
语法:
表单元素.onblur = function(){}
var inp = document.querySelector('input')
inp.onblur = function(){console.log('失去焦点时触发')}
上述代码表示当inpu失去焦点时触发事件,将字符串 '失去焦点时触发' 打印到控制台
文本框内容改变事件(且失去焦点后触发)
语法:
表单元素.onchange = function(){}
var inp = document.quserySelector('input')
inp.onchange = function(){console.log('文本框内容改变且失去焦点后触发')}
上述代码表示当文本框内容发生改变且失去焦点时触发事件,将字符串 '文本框内容改变且失去焦点后触发' 打印到控制台
文本框内容发生改变时触发
语法:
表单元素.oninput = function(){}
var inp = document.querySelector('input')
inp.oninput =function(){console.log('文本框内容改变时触发')}
上述代码表示当文本框内容发生改变时触发事件,将字符串 '文本框内容改变时触发' 打印到控制台
