zoukankan      html  css  js  c++  java
  • JS事件委托

    事件委托

    通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
    也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

    实现事件委托步骤:

                    1、先找到父节点或者祖先节点
                    2、将事件添加到找到的节点上
                    3、判断触发对象,是否符合条件,然后进行后续操作
    

    例子

    例如点击ul下的li标题

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                ul{
                     200px;
                    height: 400px;
                    background-color: gray;
                }
                ul li {
                     200px;
                    line-height: 100px;
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <ul>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
            </ul>
        </body>
        <script>
            var oul =document.querySelector("ul")
            oul.onclick=function(eve){
                var e = eve ||window.event;
                var target = e.target || e.srcElement;
                console.log(target)
                if(target.nodeName =="LI"){
                    target.style.backgroundColor="red"
                }
            }
        </script>
        </html>
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    java实验四
    C# 和SQL Server 类型转换
    C# 通过this关键字来扩展方法
    类型转换
    获取屏幕高度,兼容性问题解决
    LinqToDataTable
    jQuery层级元素选择器
    Javascript 常用系统内置函数
    JSON-JQuery常用技巧
    .net 调用SAP RFC函数获取数据的两种方式
  • 原文地址:https://www.cnblogs.com/cupid10/p/13179070.html
Copyright © 2011-2022 走看看