javascript的实现事件的一些实例

页面导航:首页 > 网络编程 > JavaScript > javascript的实现事件的一些实例

javascript的实现事件的一些实例

来源: 作者: 时间:2016-02-04 09:15 【

嘿嘿,今天学习到了事件,其实在C 中事件只需要我们触发即可实现,但是在javascript并不是这样的,在这里,事件是javascript与html的交互,就是文档或者浏览器窗口发生的一件特定的交互
嘿嘿,今天学习到了事件,其实在C#中事件只需要我们触发即可实现,但是在javascript并不是这样的,在这里,事件是javascript与html的交互,就是文档或者窗口发生的一件特定的交互瞬间。其实从定义上面你很难想象吧,那么下面就简单的举例说下。
 
         一.实现文字改变位置
 
 
<head>
    <title></title>
    <script>
        function getDomText() { //该方法适用于让“链接”和“文字”交换位置显示在提示在提示框中
            var pnode = document.getElementsByTagName("p");   //获取p元素,让他的子节点交换位置
            var str = "";
            str = document.getElementById("myspan").innerHTML; //获取id为myspan的元素的文本
            str += document.getElementById("myid").innerHTML;  //获取id为myid的元素的文本
            alert(str);
        }
    </script>
</head>
<body>
    <p>
    <a id="myid" href="#">链接</a>&nbsp;&nbsp;&nbsp;
    <span id="myspan">文字</span><br />
    <input type="button" name="name" value="按钮" onclick="getDomText()" />
   </p>
</body>
 
 
 
                      
 
                 上面的button就实现了onclick单击事件,然后通过事件调用了一个方法使其文本信息改变位置。
 
          二.替换文本信息
 
 
<script>
        function replaceTextContent(){    //该方法适用于替换文本信息
            var pnode = document.getElementById("myDom");
            pnode.innerHTML = '<span>一句话</span>&nbsp;<a href="">一个链接</a>';//改变id为myDom的元素的文本信息
        }
    </script>
<body>
    <p>
        <input type="button"  value="替换内容 " onclick=" replaceTextContent()" />
    </p>
    <p id="myDom">
        <a href="#">一个链接</a> &nbsp;<span>一句话</span>
    </p>
</body>
                           
 
                  其实在这里是替换文本信息,不局限于是原来的文本信息交换位置,可以是任意内容的,嘿嘿。
 
                   三..改变图片大小
 
 
<script>
        function updateImgAttribute() {
            var imgmsg = document.getElementById("myimg"); //获取图片的元素
            imgmsg.width = "500";             //图片存在属性width和height,然后设置即可
            imgmsg.height = "500";
        }
 </script>
<body>
    <p>
        <input type="button" name="btn" value="修改属性" onclick="updateImgAttribute()" />
    </p>
    <img src="4.jpg" id="myimg" alt="加载中!" height="200" width="200"/>
</body>
 
                                 
 
                 改变图片大小其实是通过元素的属性设置即可,或者通过获取其元素,在使用setAttribute也可以实现的,这样是最简单的。
 
         四.显示另一个元素的值
 
 
<script>
        function getOthBtnValue(btn) {         //接收一个元素节点
            var pnode =btn.parentNode;         //把传进来的这个元素作为p的子节点
            for (var i = 0; i < pnode.childNodes.length; i++) {
                if (pnode.childNodes[i] != btn && pnode.childNodes[i].nodeType == btn.nodeType) {
                    alert(pnode.childNodes[i].value); //if中的条件:当子节点满足不是btn而且子节点的类型和btn一样
                }                                   
            }
        }
    </script>
<body>
    <p>
        <input type="button" name="btn1" value="显示btn2的值 " onclick="getOthBtnValue(this)"/>  <!--this在这里是指当前元素-->
        <input type="button" name="btn1" value="显示btn1的值 " onclick="getOthBtnValue(this)"/>
    </p>
</body>
 
                 在这里写if'语句中的条件时间可能不太容易理解,但是我们可以寻找下pnode.childNodes的节点的个数即可知道我们的条件为什么要这样写,子节点的个数输出的是5,包括空白的文本节点等,所以在显示时间需要注意的。
 
                  五.克隆图片
 
 
<script>
        function cloneImg() {
            var imgmsg = document.getElementById("myimg");
            var newimg = imgmsg.cloneNode(true);  //在cloneNode中需要一个bool类型的参数,true表示强度
            document.getElementById("myid").appendChild(newimg); //获取p元素,然后再p元素中添加新克隆出来的元素
        }
    </script>
<body>
    <p id="myid">
        <input type="button" name="btn" value="克隆图片" onclick="cloneImg()"/>
        <br />
        <img src="4.jpg" id="myimg" alt="加载中" height="200" width="200"/>
    </p>
</body>
 
                          
 
                   其实克隆图片,从名字上面的方法的名字cloneNode就知道了实现的功能,可以点击按钮克隆多张图片。
 
                   六.隐藏图片
 
 
<script>
        function showOrHide() {         
            var myimg = document.getElementById("myimg");
            var displaymsg = myimg.style.display;     //display是用来显示或者隐藏
            //alert(displaymsg);
            if (displaymsg != 'none') {               //当参数为none是为显示
                myimg.style.display = 'none';
            }
            else {
                myimg.style.display = '';              //当为空时间为隐藏
            }
        }
    </script>
<body>
    <p id="myid">
        <input type="button" name="btn" value="隐藏图片" onclick="showOrHide()"/>
        <br />
        <img src="4.jpg" id="myimg" alt="加载中" height="200" width="200"/>
    </p>
</body>
 
                之前没有介绍display的使用方法,它应该是style的属性,在这里需要注意的是它的参数,仅仅存在none和空。
 
         七.文本信息排序
 
 
<script>
        function changeSeriation() {
            var ulnode = document.getElementsByTagName("ul")[0];//获取页面的ul元素, 在这里[0]是代表第一个ul
            if (ulnode.hasChildNodes) {        //判断是否包含子节点
                var length = ulnode.childNodes.length;      //获取子节点的长度
                var str = [];
                for (var i = 0; i < length; i++) {
                    str[i] = ulnode.childNodes[0];        //每次获取的子节点元素放在最前面
                    ulnode.removeChild(ulnode.childNodes[0]);  //清除当前的子节点元素,按照上面的顺序依次输出
                }
                for (var i = length-1; i >=0; i--) {
                    ulnode.appendChild(str[i]);            //这个是相反的,每次输出的排在最后一个
                } 
            }
        }
    </script>
<body>
    <ul>
       <li  >item1</li>
       <li  >item2</li>
       <li  >item3</li>
       <li  >item4</li>
       <li  >item5</li>
   </ul>
<input type="button" name="btn" value="交换顺序 " onclick="changeSeriation()"/>
</body>
 
                    在这里理解起来可能刚接触不太容易理解,但是我感觉之前学习了pop方法和push方法,其实这个就是那个理解起来相似,但是最后的显示的信息还是打不同的,仅限于理解上面,
 
           八.form表单
 
 
<script>
         window.onload = function () {
             document.getElementsByName("btn").onclick = function(e){ // 在这使用一个匿名的方法实现单击事件
             //function getAllValue(e) {
                 var formmsg = document.forms[0];      //获取第一个form元素
                 var formelements = formmsg.elements;   //获取form表单中的元素
                 //var str = "";
                 var count=0;
                 for (var i = 0; i < formelements.length; i++) {
                     //str[i] = formelements[i].name = "text";
                     //alert(formelements[i].name);
                     if (formelements[i].getAttribute("type") == "text") {
                         count++;
                     }
                     alert(count);
                 }
             }
         }
     </script>
<body>
    <form action="/" method="post">
        文本框:<input type="text" name="mytext" value="文本框 " /><br />
        单选框:<input type="radio" name="myradio" value="单选框1" /><input type="radio" name="myradio" value="单选框2" /><br />
        下拉列表:
       <select name="myselect">
        <option value="下拉列表" >==请选择==
        </option>
           <option value="下拉列表1">第一项</option>
           <option value="下拉列表2">第二项</option>
       </select>
        <br />
        <input type="button" name="name" id="btn" value="得到所有控件的value" onclick="" />
    </form>
</body>
 
                  在这里需要注意的获取form表单中的元素的value的使用和name的使用,很可惜的是我没有写出来,不知道哪出了问题,希望写出来能够改正。
 
          九.通过一个按钮触发事件获取另一个按钮触发事件
 
<script>
        function changeValue() {
            var mybtnmsg = document.getElementById("btnid").click();  //元素存在一个单击事件
        }
    </script>
<body>
    <p>
        <input type="button"  value="触发按钮的事件 " onclick="changeValue()" />
        <input type="button" id="btnid"  value="按钮提示 " onclick="alert('我被触发了')" /></p>
</body>
 
                     十.创建新元素
 
 
 <script>
        function createNewElement() {
            document.getElementById("p1").innerHTML = "<span>我是新添加进来的文本1</span>"; //直接通过innerHTML添加文本元素
 
            var newspanelement = createNewElement("span");         //也可通过创建元素添加新的文本,这里创建的是span标签
            newspanelement.appendChild(document.createTextNode("我是新添加进来的文本2"));//添加文本
            var pnode = document.getElementById("p2");       //添加id为p2的p标签的的子节点span
            pnode.appendChild(newspanelement);               //把span的所有元素添加到p标签中
        }
    </script>
<body>
    <p>
    <input type="button" name="name" value="创建新元素 " onclick="createNewElement()" /></p>
    <p id="p1"></p>
    <p id="p2"></p>
</body>
 
                       十一.通过页面加载事件打开一个网页
 
 
 
 
 <script>
        //Window.onload() =function(){    //页面加载事件
        //    document.body.onclick = function () {  //元素可以实现onclick事件
        //        alert(this.innerHTML)
        //    }
        /
Tags:

文章评论


<