事件基础二

xiaoxiao2021-02-28 102

事件对象

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件对象</title> </head> <body> <script type="text/javascript"> /* event 事件对象必须在一个事件调用函数里面使用event对象才有内容事件函数事件调用的函数，一个函数是不是事件函数，不是在定义的时候决定的，而是取决于这个函数调用的时候当一个事件发生时，和当前这个事件有关的一些详细信息都会被临时保存到一个指定的地方，这个地方就是事件对象event中，供我们在需要的时候调用，有点类似于飞机的黑匣子兼容 ie、chrome：event是一个内置的全局对象（内置对象不需要实例化） ff：事件对象是通过事件函数的第一个参数传入如果一个函数是被事件调用的，那么这个函数的第一个参数就是事件对象 clientX/clientY 事件发生时，鼠标到可视区的距离 */ //兼容处理 function fn(ev){ var ev=ev || event; console.log(ev); alert(ev.clientX); } document.onclick=fn; </script> </body> </html>

事件对象小应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件对象</title> <style type="text/css"> div{width: 50px;height: 50px;background: #f00;position: absolute;} </style> </head> <body style="height:2000px"> <div></div> <script type="text/javascript"> /* clientX/clientY 事件发生时，鼠标到可视区的距离 onmousemove 当鼠标在一个元素上面移动的时候触发，触发频率是时间间隔，在一个指定的时间内鼠标位置相对于上一个位置发生了移动，就会触发 */ var oDiv=document.getElementsByTagName('div')[0]; document.onmousemove=function (ev){ var ev=ev || event; //滚动条距离窗口顶端的距离 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.left=ev.clientX+'px'; oDiv.style.top=ev.clientY+scrollTop+'px';//加上滚动条到窗口的距离，如果有横向滚动条，也要加上 }; </script> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-68867.html

技术

最新回复(0)