前端开发者| google前端开发书写规范 |
| 前端开发模式和规范 |
| 腾讯 前端开发规范 |
event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。
事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候
兼容
ie/chrome : event是一个内置全局对象
标准下 : 事件对象是通过事件函数的第一个参数传入
如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象
html 代码
document.onclick = function(ev) {
var ev = ev || event
alert(ev)
}
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
#box2 {
width: 500px;
height: 500px;
background: #ccc;
text-align: center;
line-height: 500px;
font-size: 20px;
}
</style>
</head>
<body>
<div id=”box1″></div>
<div id=”box2″>鼠标移入可视区域即可获取坐标</div>
<script>
var oBox1 = document.getElementById(‘box1’)
var oBox2 = document.getElementById(‘box2’)
oBox2.onmousemove = function(ev) {
var ev = ev || event
oBox1.innerHTML = ‘X:’ + ev.clientX + ‘,Y:’ + ev.clientY
}
</script>
</body>
</html>
跟随鼠标移动的盒子
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
}
</style>
</head>
<body>
<div id=”box1″></div>
<script>
var oBox1 = document.getElementById(‘box1’)
document.onmousemove = function(ev) {
var ev = ev || event
oBox1.style.left = ev.clientX + ‘px’
oBox1.style.top = ev.clientY + ‘px’
}
</script>
</body>
</html>
| google前端开发规范 |
| 腾讯前端开发规范 |
| 前端开发尺寸规范 |
» 本文来自：前端开发者 » 《前端开发js event事件对象》
» 本文链接地址：https://www.rokub.com/6323.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册