事件对象和事件委托

来源：互联网发布：剑侠情缘捏脸数据编辑：程序博客网时间：2024/06/04 19:12

事件对象 : 事件发生的瞬间 , 发生位置 , 时间 , 鼠标按键 , 触发的节点等信息 , 被打包成 1 个对象 .
此对象 , 系统自动传递给事件函数的第 1 个参数

//查看事件对象的全部参数<html><head><style>    div{        width:100px;        height:100px;        border:1px solid blue;    }   </style></head><body>    <div></div></body><script>   var btn = document.getElementsByTagName('div')[0];   btn.onclick = function(ev){       //为兼容IE        ev = ev || window.event;        console.log(ev);    } </script></html>

抓不到的美女

<style>img {display: block;width: 130px;height: 130px;position: relative;}</style><body><img src="./mn.png" alt="" /></body><script>var img = document.getElementsByTagName('img')[0]img.onmouseover=function (ev) {//var img = document.getElementsByTagName('img')[0];img.style.left = ev.pageX + 130 + 'px';img.style.top = ev.pageY + 130 + 'px';}</script>

事件委托

当有比较多的元素需要绑定某事件时 , 可以把事件绑定在他们的父元素上 ,
委托给父元素来处理

<head><style>    table{        border-collapse:collapse;        width:100px;        height:100px;        border:1px solid blue;    }       td{         border:1px solid red;}</style></head><body>    <table>        <tr><td></td><td></td></tr>        <tr><td></td><td></td></tr>    </table></body><script>document.getElementsByTagName('table')[0].onclick = function(ev) {ev.target = ev.target || ev.srcElement;ev.target.style.backgroundColor='black';}</script>

阅读全文

1 0