SOURCE

console 命令行工具 X clear

                    
>
console
/*在实际开发中,我们更倾向于在script标签中调用事件,因为这种方式
可以使得结构(HTML)与行为(JavaScript)分离,代码更具有可读性和维护性。*/
window.onload = function(){

    //单击事件onclick
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function(){
        alert("欢迎您");
    }

    //我们可以为任何元素添加鼠标单击事件!
    var oDivBtn=document.getElementById("divBtn");
    divBtn.onclick=function(){
        alert("我不是按钮");
    }

    //鼠标移入和鼠标移出
    var oPContent=document.getElementById("content");
    //当用户将鼠标移入到某个元素上面时,就会触发onmouseover事件
    oPContent.onmouseover=function(){
        this.style.color="red";
    }
    //如果将鼠标移出某个元素时,就会触发onmouseout事件
    oPContent.onmouseout=function(){
        this.style.color="black";
    }

    //鼠标按下和鼠标松开
    //当用户按下鼠标时,会触发onmousedown事件。
    var oUpdownBtn=document.getElementById("updown");
    oUpdownBtn.onmousedown=function(){
        oPContent.style.color="blue";
    }
    //当用户松开鼠标时,则会触发onmouseup事件。
    oUpdownBtn.onmouseup=function(){
        oPContent.style.color="black";
    }
    //当用户鼠标移动时,则会触发onmousemove事件。
    oUpdownBtn.onmousemove=function(){
       this.style.background="lightskyblue";
    }


    //(1)键盘按下:onkeydown;(2)键盘松开:onkeyup。

    //eg1:用户输入字符串后,会自动计算字符串的长度。
    var oString=document.getElementById("string");
    var oLength=document.getElementById("length");
    oString.onkeyup=function(){
        var str=oString.value;
        oLength.innerHTML=str.length;
    }
    //focus()是一个方法,仅仅用于让元素获取焦点。
    //oString.focus();

    //eg2:验证输入是否正确
    var oNumber=document.getElementById("number");
    var oHint=document.getElementById("hint");
    oNumber.onkeyup=function(){
        //定义一个变量,保存正则表达式
        var regex=/^[0-9]*$/;
        //判断是否输入为数字
        if(regex.test(oNumber.value)){
            oHint.innerHTML="输入正确";
            oHint.style.color="green";
        }
        else{
            oHint.innerHTML="必须输入数字";
            oHint.style.color="red";
        }
    }

    var oSearch=document.getElementById("search");
     //获取元素对象
            var oSearch = document.getElementById("search");
            //获取焦点
            oSearch.onfocus = function () 
            {
                if (this.value == "百度一下,你就知道") 
                {
                    this.value = "";
                }
            };
            //失去焦点
            oSearch.onblur = function () 
            {
                if (this.value == "") 
                {
                    this.value = "百度一下,你就知道"; 
                }
            };

    //在JavaScript中,当我们选中“单行文本框”或“多行文本框”中的内容时,就会触发onselect事件。
    //单行文本框和多行文本框的选择事件
    var oSingleText=document.getElementById("singleText");
    var oMultipleText=document.getElementById("multipleText");

    oSingleText.onselect=function(){
       // alert(this.value);
    }
    oSingleText.onclick=function(){
        //select()是一个方法,仅仅用于全选文本。
        this.select();
    }
    oMultipleText.onselect=function(){
        alert(this.value);
    }
    //具有多个选项的表单元素
    var oFruits=document.getElementsByName("fruit");
    var oPFruit=document.getElementById("fruitchosen");
    for(var i=0;i<oFruits.length;i++){
        oFruits[i].onchange=function(){
            if(this.checked){
                oPFruit.innerHTML = "你选择的是:" + this.value;
                }
            }
        }
        
    var oSelectAll=document.getElementById("selectAll");
    var oFruits1=document.getElementsByName("fruit1");

    oSelectAll.onchange=function(){
        if(this.checked){
            for(var i=0;i<oFruits1.length;++i){
                oFruits1[i].checked=true;
            }
        }else{
            for(var i=0;i<oFruits1.length;++i){
                oFruits1[i].checked=false;
            }
        }
    }

    var oLineList=document.getElementById("linelist");
    oLineList.onchange = function () 
            {
                var link = this.options[this.selectedIndex].value;
                window.open(link);
            };


    //防止页面内容被复制oncopy
    document.body.oncopy=function(){
        return false;
    }
    //防止页面内容被选取onselectstart
    document.body.onselectstart=function()
    {
       return false;
    }
    //禁止鼠标右键oncontextmenu
    document.oncontextmenu = function () 
    {
        return false;
    }

} 

function alertMes(){
    alert("新华学院");
}

//总结:
/*
1.onfocus,onblur 获取焦点,失去焦点,所有表单元素和超链接都有的事件 
2.onselect只有单行文本和多行文本有的事件 
3.onchange只有单选框,复选框和下拉列表有的事件 
4.表单元素包括 单选框,复选框,下拉列表,多行文本,单行文本 
 */
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        </script>
    </head>
    <body>
        <button onclick="alertMes()">弹出信息</button>
        <br/>
        <br/>
        <button id="btn">弹出欢迎信息</button>
        <br/>
        <br/>
        <div id="divBtn">点我</div>
        <br/>
        <br/>
        <div >
            <p id="content">广州新华学院</p>
            <button id="updown">按下松开</button>
        </div>
        <br/>
        <br/>
        <div>
            <label>输入任意字符:</label>
            <input type="text" id="string"></input>
            <br />
            <label>字符串长度为:</label>
            <span id="length">0</span>
        </div> 
         <br/>
         <div>
            <label>输入数字:</label>
            <input type="text" id="number"></input>
        <br/>
        <div id="hint"></div>
        </div>
        <br/>
        <br/>
        <div>
            <input id="search" type="text" value="百度一下,你就知道"/>
            <button >搜索</button>
        </div>
        <br/>
        <div>
            <input id="singleText" type="text" value="我是单行框"> </input>
            <br/>
            <textarea id="multipleText" cols="20" row="6">我是多行文本框,可以输入很多行</textarea> 
        </div>
        <br/>
        <div>
            <label><input type="radio" name="fruit" value="苹果" />苹果</label>
            <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
            <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
            <br/>
            <p id="fruitchosen"></p>
        </div>
        <div>
            <p><label><input id="selectAll" type="checkbox"/>全选/反选:</label></p>
            <label><input type="checkbox" name="fruit1" value="苹果" />苹果</label>
            <label><input type="checkbox" name="fruit1" value="香蕉" />香蕉</label>
            <label><input type="checkbox" name="fruit1" value="西瓜" />西瓜</label>
        </div>
        <br/>
        <select id="linelist">
            <option value="http://wwww.baidu.com">百度</option>
            <option value="http://www.sina.com.cn">新浪</option>
            <option value="http://www.qq.com">腾讯</option>
            <option value="http://www.sohu.com">搜狐</option>
        </select>
        <br/> 
        <br/> 
    </body>
</html> 
#divBtn {
    display: inline-block;
    width: 80px;
    height: 24px;
    line-height: 24px;
    font-family:微软雅黑;
    font-size:15px;
    text-align: center;
    border-radius: 3px;
    background-color: deepskyblue;
    color: White;
    cursor: pointer;
} 
#search{
    color:#bbbbbb;
}