事件对象和事件委托

最新推荐文章于 2024-07-10 17:37:23 发布

Json_M

最新推荐文章于 2024-07-10 17:37:23 发布

阅读量315

点赞数 1

分类专栏：前端文章标签： javascript 事件对象事件委托

本文链接：https://blog.csdn.net/joeson7456/article/details/73089980

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件对象 : 事件发生的瞬间 , 发生位置 , 时间 , 鼠标按键 , 触发的节点等信息 , 被打包成 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>