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

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

<!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);

            //对p 标签 添加 点击事件

            op.οnclick=function(event){

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

                var  objdiv=window.event||event;

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

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

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

                //举例 通过目标控制子节点给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赋值为10,input内标签在网页中显示为10;

转载于:https://my.oschina.net/u/1162669/blog/145746

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值