SOURCE

//页面加载之后才能获取标签
window.onload = function(){
    //事件三要素：1、事件主角2、事件类型（按钮）3、事件的过程(显示)

/*1、事件源：哪一个标签需要发生动态改变（制作时需要获取元素改变元素和被改变元素）；
2、事件类型：指对标签执行的一系列静态页面的操作行为：如：点击、悬浮、触发未弹回、触发弹回等......
3、事件处理程序：利用函数的方法去传参改变相应数值； */
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function(){
        alert('欢迎你');
    }

//除了button,其他元素也有onclick属性
    var oBtn1=document.getElementById("divBtn");
    oBtn1.onclick=function(){
        alert('我不是按钮');
    }

//实现鼠标移进移出，颜色发生改变
    var oDivContent=document.getElementById("content");
    oDivContent.onmouseover=function(){
        this.style.color="red";
    }
//除了自身触发事件，子元素也能触发事件
    oDivContent.onmouseout=function(){
        this.style.color="black";
    }

//实现鼠标一直按下，颜色一直发生改变，松开即结束
    var oUpdownBtn=document.getElementById("updown");
    oUpdownBtn.onmousedown=function(){
        oDivContent.style.color="blue";
    }

    oUpdownBtn.onmouseup=function(){
        oDivContent.style.color="black";
    }

//实现鼠标移进移出，颜色发生改变（只能自身触发事件）
    oUpdownBtn.onmouseleave=function(){
        oUpdownBtn.style.color="black";
    }

    oUpdownBtn.onmousemove=function(){
        oUpdownBtn.style.color="green";
    }

    //实现输入一串字符串，计算个数
    var oString=document.getElementById("string");
    var oLength=document.getElementById("length");
    oString.onkeyup=function(){
        var str=oString.value;
        oLength.innerHTML=str.length;
    }

    //实现当程序运行时，光标自动加载到该输入框
    //focus()是去触发使其获得焦点，onfocus 表示获得焦点时去执行什么。
    //oString.focus();

    //判断输入的是否都是数字
    var oNumber=document.getElementById("number");
    var oHint=document.getElementById("hint");
    oNumber.onkeyup=function(){
        //正则表达式
        var regex=/^[0-9]*$/;
//str.test()指定正则表达式和指定字符串执行一次匹配，返回true或false
        if(regex.test(oNumber.value)){
            oHint.innerHTML="输入正确";
            oHint.style.color="green";
        }
        else{
            oHint.innerHTML="必须输入数字";
            oHint.style.color="red";
            
        }
    }

//实现input获取焦点和失去焦点
    var oSearch=document.getElementById("search");
    oSearch.onfocus=function(){
        if(this.value=="百度一下，你就知道"){
            this.value="";
        }
    }
    oSearch.onblur=function(){
        if(this.value==""){
            this.value="百度一下，你就知道";
        }
    }

//实现当选中输入框的内容时，显示提示的内容
    var oSingleText=document.getElementById("singleText");
    var oMutipleText=document.getElementById("multipleText");
    // oSingleText.onselect=function(){
    //     alert(this.value);
    // }

    oMutipleText.onselect=function(){
        alert(this.value);
    }

    oSingleText.onclick=function(){
        this.select();
    }
//ById只能获取一个，ByName获取整个表单
//实现选择时，在下方生成你所选择的单选框
    var oFruits=document.getElementsByName("fruit");
    var oPFruit=document.getElementById("fruitchosen");
    for(var i=0;i<oFruits.length;++i){
        //onchange发生在所有的表单中
        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;
            }
        }

    }
/*onfocus,onblur 获取焦点，失去焦点，所有表单元素和超链接都有的事件 
onselect只有单行文本和多行文本有的事件 
onchange只有单选框，复选框和下拉列表有的事件
表单元素包括 单选框，复选框，下拉列表，多行文本，单行文本 
  */

//实现页面的跳转
    var oLinkList=document.getElementById("linkList");
    oLinkList.onchange=function(){
        var link=this.options[this.selectedIndex].value;
        window.open(link);
    }

    //防止页面内容被复制（只能复制之前复制的内容）
    document.body.oncopy=function(){
        return false;
    }

    //防止页面内容被选取
    document.body.onselectstart=function(){
        return false;
    }

    //禁止使用鼠标右键
    document.oncontextmenu=function(){
        return false;
    }

} 
//不采用函数进行事件的改变
//在实际开发中，我们更倾向于在script标签中调用事件
//因为这种方式可以使得结构（HTML）与行为（JavaScript）分离，代码更具有可读性和维护性
    function alertMes(){
        alert("新华学院");
    }

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        </script>
    </head>
    <body>
        <button id="btn">弹出欢迎信息</button>
        <br/>
        <br/>
        <div id="divBtn">点我</div>
        <br/>
        <br/>
        <div id="content">广州新华学院</div>
        <button id="updown">按下松开</button>
        <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/>
        <input id="search" type="text" value="百度一下，你就知道"></input>
        <button>搜索</button>
        <br/> 
        <br/>
        <div>
        <input id="singleText" type="text" value="我是单行文本框"></input>
        <br/>
        <br/>
        <textarea id="multipleText" cols="20" rows="6">我是多行文本框，可以输入多行</textarea>
        </div>
        <br/>
        <br/>
        <div>
            <label><input type="radio" name="fruit" value="苹果"></input>苹果</label>
            <label><input type="radio" name="fruit" value="香蕉"></input>香蕉</label>
            <label><input type="radio" name="fruit" value="西瓜"></input>西瓜</label>
            <br />
            <p id="fruitchosen"></p>
        </div> 
        <br/> 
        <br/> 
        <div>
            <p><label><input id="selectAll" type="checkbox"></input>全选/反选：</label></p>
            <label><input type="checkbox" name="fruit1" value="苹果"></input>香蕉</label>
            <label><input type="checkbox" name="fruit1" value="香蕉"></input>西瓜</label>
            <label><input type="checkbox" name="fruit1" value="西瓜"></input>西瓜</label>
        </div> 
        <br/>
        <br/>
        <select id="linkList">
            <option value="http://www.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/>
        <br/>
        <button onclick="alertMes()">弹出消息</button>
        
        

    </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;
}