• document事件及例子


    一、关于鼠标事件:onclick:鼠标单击触发

                      ondbclick:鼠标双击触发

                      onmouseover:鼠标移上触发

                      onmouseout:鼠标离开触发

                      onmousemove:鼠标移动触发

    二、关于键盘事件:onkeydown:键盘按下瞬间触发

                      onkeyup:按键抬起触发

                      onkeypress:按键触发

    三、关于表单事件:onfocus获得焦点时触发

                      onblur:失去焦点时触发

                      onchange:内容改变时触发在下拉列表中作为选中值变化触发

    事件可以写在标签中也可写在js中 

    eg:var a=document.getElementById("anniu");

    a.onclick=function(){

    匿名函数

    };在js中不支持给多个元素加事件

    this代表该元素本身

    例子:注意:backgroundColor中的color首字母不大写,无法实现

    <!--选中一个背景颜色变,其他不变-->
    <div id="a">
    <div class="item" onclick="sel(this)"></div>
    <div class="item" onclick="sel(this)"></div>
    <div class="item" onclick="sel(this)"></div>
    <div class="item" onclick="sel(this)"></div>
    <div class="item" onclick="sel(this)"></div>
    <div class="item" onclick="sel(this)"></div>
    <div class="item" onclick="sel(this)"></div>
    </div>
    </body>
    <script type="text/javascript">
    function sel(a){
        var sy=document.getElementsByClassName("item");
        for(var i=0;i<sy.length;i++){
            sy[i].style.backgroundColor="blue";
            }
            a.style.backgroundColor="red";
        }
    </script>

    <style type="text/css">
    *{ margin:0px auto;
    padding:0px;}
    #aa{
        280px;
        height:40px;
        border:1px solid #C33;
        margin-top:100px;
        line-height:40px;
        vertical-align:central;
        padding-left:20px;
        
        }
    #bb{
        300px;
        height:200px;
        border:1px solid #C33;
        
        }
    .list{
        280px;
        height:39px;
        border-bottom:1px solid #C33;
        line-height:40px;
        vertical-align:central;
        padding-left:20px;
        
        }
    </style>
    </head>
    
    <body>
    <div id="aa" ></div>
    <div id="bb" style="display:none">
    <div class="list" onmouseover="xz(this)" onclick="sel(this)" >济南</div>
    <div class="list" onmouseover="xz(this)" onclick="sel(this)">淄博</div>
    <div class="list" onmouseover="xz(this)" onclick="sel(this)">青岛</div>
    <div class="list" onmouseover="xz(this)" onclick="sel(this)">潍坊</div>
    <div class="list" onmouseover="xz(this)" onclick="sel(this)">烟台</div>
    </div>
    </body>
    <script type="text/javascript">
    function xz(a){
        var sy=document.getElementsByClassName("list");
        for(var i=0;i<sy.length;i++){
            sy[i].style.backgroundColor="white";
            sy[i].style.color="black";
            }
        a.style.backgroundColor="blue";
        a.style.color="white";
        }
        var aa=document.getElementById("aa");
        aa.onclick=function (){
            var c=document.getElementById("bb");
            if(c.style.display=="none"){
                c.style.display="block";
                }else{c.style.display="block";
                }
            }
        function sel(a){
            document.getElementById("bb").style.display="none";
            document.getElementById("aa").innerText=a.innerText;
            }
    </script>

  • 相关阅读:
    数据结构化与保存
    使用正则表达式,取得点击次数,函数抽离
    爬取校园新闻首页的新闻
    网络爬虫基础练习
    词频统计
    试题----编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串。 但是要保证汉字不被截半个
    试题---求出现重现次数最多的字母,如有多个重复的则都求出来
    试题----为什么Java的string类要设成immutable(不可变的)
    面试题---题目
    复制文件夹中所有内容到指定位置
  • 原文地址:https://www.cnblogs.com/NCL--/p/7056709.html
Copyright © 2020-2023  润新知