关于在html中怎样通过js 对通过js创建的节点增加各种事件

原创
2013/07/19 23:34
阅读数 223

 对于这个内容光看标题大家可能不是很明白,我就在下边写一个简单的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <title></title>

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

        <style type="text/css">

            #main{width:960px;height:600px;background:blue;}

            #main p{width:960px;height:300px;background:red;}

        </style>

    </head>

    <body>

        <div id="main"></div>

        <script type="text/javascript">

            function $(eve){

                return document.getElementById(eve);

            }

            var main=$("main");

            var op=document.createElement("p");

            var oinput=document.createElement("input");

            op.appendChild(oinput);

            //标签 添加 点击事件

            op.onclick=function(event){

                alert(event);//这个将会打印出一个鼠标事件

                var  objdiv=window.event||event;

                var  odiv=objdiv.target||objdiv.srcElement;//获取目标

                //然后对这个目标操作即可假如这个其他事件也都可以这样添加,

                //通过这个控制它的子节点 父节点都没问题,

                //举例 通过目标控制子节点给oinput.value赋值

                odiv.firstChild.value=10;

                //这个input标签的value=10;网页上这个input标签里面的内容将显示为10

            }

            //将 一个p标签 加到 div

            main.appendChild(op);

        </script>

    </body>

</html>


上面的代码就是对用js增加的节点添加一个点击事件的例子,p标签内input标签的value默认为空 ,而我点击了用js添加的p标签时 会产生一个点击事件  而后会给p标签内的input标签的value赋值为10input内标签在网页中显示为10

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部