Event对象
<script>
window.onload = function(){
document.onclick = function(ev){
var oEvent = ev || event //为了兼容低版本的ie和火狐
alert(oEvent.clientX +','+ oEvent.clientY)
}
}
</script>事件冒泡
在一个元素上执行事件，事件会逐层向上传递
<body>
<input type="button" value="点击" id="btn1">
<div id="div1"></div>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1')
var oBtn = document.getElementById('btn1')
oBtn.onclick = function(ev){
var oEvent = ev || event
oDiv.style.display = 'block'
oEvent.cancelBubble = true //取消冒泡事件
}
document.onclick = function(ev){
oDiv.style.display = 'none'
}
}
</script>鼠标事件
<body>
<div id="div1"></div>
<script>
function getPos(ev) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //可视区的高度 + 滚动高度
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
return pos = {
x: ev.clientX + scrollTop,
y: ev.clientY + scrollLeft
}
}
var oDiv = document.getElementById('div1')
document.onmouseover = function (ev) {
console.log(9)
var oEvent = ev || event
var pos = getPos(oEvent)
oDiv.style.left = pos.x + 'px'
oDiv.style.top = pos.y + 'px'
}
</script>
</body>鼠标跟随实例
<script>
function getPos(ev) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
return pos = {
x: ev.clientX + scrollTop,
y: ev.clientY + scrollLeft
}
}
document.onmouseover = function (ev) {
var aDiv = document.getElementsByTagName('div')
for (var i = aDiv.length - 1; i > 0; i--) {
aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px' //最后一个div跟随前一个div
aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px'
}
var oEvent = ev || event
var pos = getPos(oEvent)
aDiv[0].style.left = pos.x + 'px' //第一个div跟随鼠标
aDiv[0].style.top = pos.y + 'px'
}
</script>键盘事件
实例：左右键盘控制元素移动
<script>
document.onkeydown = function (ev) {
var oEvent = ev || event
var oDiv = document.getElementById('div1')
if (oEvent.keyCode == 37) { //判断为左键
oDiv.style.left = oDiv.offsetLeft - 10 + 'px'
} else if (oEvent.keyCode == 39) { //判断为右键
oDiv.style.left = oDiv.offsetLeft + 10 + 'px'
}
}
</script>实例：ctrl + 回车提交
<script>
window.onload = function(){
var oTxt1 = document.getElementById('txt1')
var oTxt2 = document.getElementById('txt2')
oTxt1.onkeydown = function(ev){
var oEvent = ev || event
if(oEvent.keyCode == 13 && oEvent.ctrlKey){
oTxt2.value += oTxt1.value+'\n'
oTxt1.value=''
}
}
}
</script>ctrl：ctrlKry
shift：shiftKey
alt：altKey