为所有a标签绑定同一个事件（闭包）

最新推荐文章于 2020-03-17 10:45:23 发布

name_zj

最新推荐文章于 2020-03-17 10:45:23 发布

阅读量1.8k

点赞数

文章标签：闭包事件绑定标签

本文链接：https://blog.csdn.net/King_crazy/article/details/77918668

版权

css代码：

body{text-align:center;}
body table{margin:0 auto;}
table{border-collapse:collapse; border:solid 1px Black; }
table td,th{border:solid 1px; padding:5px;}

html代码：

<html>
  <head>
    <title>user.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">

    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>

        <table id="usertable">
            <tr>
                <th>姓名</th>
                <th>email</th>
                <th>电话</th>
                <th>&nbsp;</th>
            </tr>

            <tr>
                <td>Tom</td>
                <td>tom@tom.com</td>
                <td>5000</td>
                <td><a href="deleteEmp?id=Tom">Delete</a></td>
            </tr>

            <tr>
                <td>Jerry</td>
                <td>jerry@sofu.com</td>
                <td>8000</td>
                <td><a href="deleteEmp?id=Jerry">Delete</a></td>
            </tr>
        </table>

  </body>

  <script type="text/javascript">

    //为a标签绑定事件
    //错误示例：
    /* a.onclick = function(){
        var res = confirm("你确认要删除【"+name+"】吗？");
        if(res){            a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
        }
        return false;       //阻止a标签的默认行为：跳转新标签
    }; */
    //正确方法
      var aNodes = document.getElementsByTagName("a");
      for(var i=0;i<aNodes.length;i++){
            (function(j){
                 aNodes[j].onclick=function(){
                     var res = confirm("你确认要删除【"+aNodes[j].id+"】吗？");
                    if(res){
                    aNodes[j].parentNode.parentNode.parentNode.removeChild(aNodes[j].parentNode.parentNode);
                    }
                return false;       //阻止a标签的默认行为：跳转新标签
                }
             })(i)
        }

  </script>
</html>