Lession07 javascript事件及應(yīng)用

事件注冊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>事件注冊</title>
    </head>
    <body>
        <!-- 將事件綁定到頁面元素屬性 -->
        <a href="#" onclick="alert('恭喜胶背，你中了500萬大獎')">點我看看</a>
        
        
        <form action="" name="myform">
            <!-- onblur 當(dāng)失去焦點是觸發(fā)事件 -->
            小寫：<input type="text" name="lower" onblur="conToUp(this)"><br>
            大寫：<input type="text" name="upper">
            
        </form>
        
        <!-- 將事件綁定到對象屬性 -->
        <a href="#" id="info">點我看看2</a>
        <script>
            function conToUp(textbox){
                document.myform.upper.value=textbox.value.toUpperCase();//this代表文本框
            }
            document.getElementById('info').onclick=function(){
                alert('恭喜你中了1000萬大獎');
            }
            function down(){
                alert("你點擊了鼠標(biāo)");
            }
            document.onmousedown=down;
            
        </script>
    </body>
</html>

事件處理函數(shù)的返回值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件處理函數(shù)的返回值</title>
    </head>
    <body>
        <form action="" name="myform">
            姓名：<input type="text" name="username">
            <!-- 返回false 來阻止表單提交 -->
            <input type="submit" value="提交" onclick="return false;">
        </form>
    </body>
</html>

window對象常用事件案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>window對象常用事件案例</title>
        <style>
                    body{
                        margin: 0;
                        padding: 0;
                    }
                    .nav{
                        position: fixed;
                        top:0;
                        left: 120px;
                    }
                    .box{
                        margin-top: 43px;
                        text-align: center;
                    }
                    
                    .ad1{
                        position: absolute;
                        left:0;
                        top:65px;
                    }
                    .ad2{
                        position: absolute;
                        right:0;
                        top:65px;
                    }
                    
                    
                </style>
                <script>
                    function move(){
                        var ad1 = document.getElementById('ad1');
                        var ad2 = document.getElementById("ad2");
                        //得到bo dy滾動的離頁面上邊界的值 documentElement:以一個元素對象返回一個文檔的文檔元素
                        var top = document.documentElement.scrollTop;
                        console.log(top);
                        ad1.style.marginTop=top+'px';
                        ad2.style.marginTop=top+'px';
                        
                    }
                    window.onscroll=move;
                
                </script>
    </head>
    <body>
        <div class="content">
                    <div class="nav"><img src="./img/r1_c1.png" alt=""></div>
                    <div class="box"><img src="./img/box.png" alt=""></div>
                    <div class="ad1" id="ad1" onclick="style.display='none'"><img src="./img/r2_c1.png" alt=""></div>
                    <div class="ad2" id="ad2" onclick="style.display='none'"><img src="./img/r2_c2.png" alt=""></div>
        </div>
    </body>
</html>

Document對象常用事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Document對象常用事件</title>
        <script>
            function move(){
                var img = document.getElementById('id0');
                //左
                if(event.keyCode===37){
                    img.style.left=parseInt(img.style.left)-5+'px';
                }
                //上
                if(event.keyCode===38){
                    img.style.top=parseInt(img.style.top)-5+'px';
                }
                //右
                if(event.keyCode===39){
                    img.style.left=parseInt(img.style.left)+5+'px';
                }
                //下
                if(event.keyCode===40){
                    img.style.top=parseInt(img.style.top)+5+'px';
                }
            }
        document.onkeydown=move;
        </script>
    </head>
    <body style="background: #16ffaf;">
        
        <div id="id0" style="position: absolute;left: 200px; top: 500px;">
            <img src="img/car.jpg" alt="廣告">
        </div>
        
    </body>
</html>

文本框?qū)ο?/h2> 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本框?qū)ο?lt;/title>
        <script>
        var flag = false;//標(biāo)志是否提交表單
        function cls0(){
            var val = document.myform.mainMail.value;
            if(val=="請輸入郵件地址"){
                //文本框清空
                document.myform.mainMail.value="";
            }
            document.myform.mainMail.focus();//郵箱地址得到焦點
        }
        function doAction0(){
            var email = document.myform.mainMail.value;
            var reg = /^\w+@\w+[\.]{1}\w+[\.]?\w+$/;
            if(!reg.test(email)){
                document.getElementById("td0").innerHTML="<font color='red'>郵件地址不符合要求</font>";
                document.myform.mainMail.select();//輸入框高亮顯示
                flag=false;
            }else{
                document.getElementById("td0").innerHTML="<font color='green'>郵件地址格式正確</font>";
                flag=true;
            }
        }
        function check(){
            return flag;
        }
        </script>
    </head>
    <body>
        <form name="myform" onsubmit="return check()">
            <table width="560" height="173" border="1" align="center" cellspacing="0">
                <tr>
                    <td height="31" colspan="3" align="center"><font size="+1" color="#000099">創(chuàng)建你的雅虎郵箱</font></td>
                </tr>
                <tr>
                    <td width="129" height="33" align="right">雅虎郵箱:</td>
                    <td width="175">
                        <!-- onfocus:光標(biāo)進(jìn)入文本框時觸發(fā)   onblur:光標(biāo)離開文本框時觸發(fā) -->
                        <input type="text" name="mainMail" value="請輸入郵件地址" onfocus="cls0()" onblur="doAction0()">
                    </td>
                    <td width="240" id="td0">郵箱名只能是字母巷嚣、數(shù)字和下劃線</td>
                </tr>
            </table>
            
        </form>
    </body>
</html>

復(fù)選框?qū)ο?/h2> 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>復(fù)選框?qū)ο?lt;/title>
        <script>
            function enableButton(){
                if(document.myform.tiaokuan.checked){
                    document.myform.sub.disabled=false;
                }else{
                    document.myform.sub.disabled=true;
                }
            }
            
            function checkForm(){
                var cks = document.myform.mail_directory;
                var ischeck = false;
                for(var i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        ischeck=true;
                        break;
                    }
                }
                return ischeck;
            }
            
        </script>
    </head>
    <body>
        <form action="" name="myform" onsubmit="return checkForm();">
            <table border="1" cellspacing="0" cellpadding="0" width="646" height="173">
                <tr>
                    <td height="31" colspan="3"><font size="-1" color="#000099">中國雅虎直郵</font></td>
                </tr>
                <tr>
                    <td width="46">&nbsp;</td>
                    <td width="588" colspan="2">請選擇以下直郵類別（必須選一個，可多選）</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="2">
                        <input type="checkbox" name="mail_directory" value="trl">旅游
                        <input type="checkbox" name="mail_directory" value="rlx">休閑
                        <input type="checkbox" name="mail_directory" value="fin">財經(jīng)
                        <input type="checkbox" name="mail_directory" value="car">汽車
                        <input type="checkbox" name="mail_directory" value="mus">音樂
                        <input type="checkbox" name="mail_directory" value="hos">房產(chǎn)
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="2">
                    <input type="checkbox" name="tiaokuan" onclick="enableButton()">
                    我已閱讀并同意
                    </td>
                        
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="2" align="center">
                        <textarea rows="5" cols="80">
                            1.接受條款
                            .............
                        </textarea>
                    </td>   
                </tr>
                    <tr>
                        <td colspan="3" align="center">
                            <!-- 提交表單按鈕是灰色的钳吟，同意條款才能使用 -->
                            <input type="submit" name="sub" value="提交表單" disabled="">
                        </td>
                    </tr>
                </tr>
            </table>
            
        </form>
    </body>
</html>

下拉列表框?qū)ο?/h2> 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉列表框?qū)ο?lt;/title>
        <script>
            function changeOptions(){
                var contents0 = new Array();//構(gòu)造第一個數(shù)組
                contents0[0]=["選擇區(qū)縣","海淀區(qū)","東城區(qū)","西城區(qū)","朝陽區(qū)","豐臺區(qū)","密云縣","延慶縣"];
                contents0[1]=["行政區(qū)","海淀區(qū)","東城區(qū)","西城區(qū)","朝陽區(qū)","豐臺區(qū)"];
                contents0[2]=["北京市","天津市","上海市","江蘇","浙江","安徽","福建"];
                contents0[3]=["選擇區(qū)縣","海淀區(qū)","東城區(qū)","西城區(qū)","朝陽區(qū)","豐臺區(qū)","密云縣","延慶縣"];
                var contents1 = new Array();//構(gòu)造第二個數(shù)組
                contents1[0]=['物業(yè)類型','普通住宅','公寓','別墅','經(jīng)濟適用房','廉租房','限價房','花園洋房'];
                contents1[1]=['商圈','國貿(mào)','中關(guān)村','金融街','亞運村','奧運村','公主墳'];
                contents1[2]=['展示','出租','出售','求租','求購'];
                contents1[3]=['總價','30萬元以下','30萬元-40萬元','40萬元-60萬元','60萬元-80萬元','80萬元-100萬元','100萬元以上'];
                var index = document.myform.types.selectedIndex;//得到第一個下拉列表的索引
                var option0,option1;
                document.myform.district.options.length=0;//清空第二個下拉列表
                document.myform.other.options.length=0;//清空第三個下拉列表
                for(var i in contents0[index]){ //循環(huán)生成選項并加入選項到第二個列表框
                    option0 = new Option(contents0[index][i],i);//使用new Option('文字內(nèi)容','值')生成選項對象
                    document.myform.district.options.add(option0);
                }
                for(var j in contents1[index]){//循環(huán)生成選項并加入選項到第二個列表框
                    option1=new Option(contents1[index][j],j);
                    document.myform.other.options.add(option1);
                }
            }
        </script>
    </head>
    <body>
        <form action="" name="myform">
            <span>新房</span><span>寫字樓</span><span>商鋪</span><span>別墅</span>
            <select name="types" onchange="changeOptions()">
                <option value="">新房</option>
                <option value="">寫字樓</option>
                <option value="">商鋪</option>
                <option value="">別墅</option>
            </select>
            <select name="district">
                <option value="">選擇區(qū)縣</option>
                <option value="">海淀區(qū)</option>
                <option value="">東城區(qū)</option>
                <option value="">西城區(qū)</option>
                <option value="">朝陽區(qū)</option>
            </select>
            <select name="other">
                <option value="">物業(yè)類型</option>
                <option value="">普通住宅</option>
                <option value="">公寓</option>
                <option value="">別墅</option>
                <option value="">經(jīng)濟適用房</option>
            </select>
            <select name="price">
                <option value="">選擇價格</option>
                <option value="">3000元以下</option>
                <option value="">3000-5000元</option>
                <option value="">5000-10000元</option>
                <option value="">1萬元-3萬元元</option>
                <option value="">3萬元以上</option>
            </select>
            
            
        </form>
    </body>
</html>

IE的Event事件對象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>IE的Event事件對象</title>
        <script>
        function move(){
            lay.style.pixelLeft=window.event.clientX;//獲取鼠標(biāo)的橫坐標(biāo)
            lay.style.pixelTop=window.event.clientY;//獲取鼠標(biāo)的縱坐標(biāo)
            
        }
        document.onmousemove=move;
        </script>
    </head>
    <body>
        <div id="lay" style="position: absolute; left: 50px; top:50px;width: 100px;height: 100px;">
            <img src="./img/car.jpg">
        </div>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末廷粒，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子红且，更是在濱河造成了極大的恐慌评雌，老刑警劉巖树枫，帶你破解...
    沈念sama閱讀 219,039評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件旺拉，死亡現(xiàn)場離奇詭異频轿，居然都是意外死亡陨舱，警方通過查閱死者的電腦和手機特姐，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門嘹锁，熙熙樓的掌柜王于貴愁眉苦臉地迎上來呆盖，“玉大人呢灶，你說我怎么就攤上這事曾雕『痛耄” “怎么了庄呈？”我有些...
    開封第一講書人閱讀 165,417評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長派阱。 經(jīng)常有香客問我诬留，道長，這世上最難降的妖魔是什么贫母？ 我笑而不...
    開封第一講書人閱讀 58,868評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任文兑，我火速辦了婚禮，結(jié)果婚禮上腺劣，老公的妹妹穿的比我還像新娘绿贞。我一直安慰自己，他們只是感情好橘原，可當(dāng)我...
    茶點故事閱讀 67,892評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布籍铁。 她就那樣靜靜地躺著，像睡著了一般趾断。 火紅的嫁衣襯著肌膚如雪拒名。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,692評論 1贊 305
  • 城市分裂傳說
    那天芋酌，我揣著相機與錄音靡狞，去河邊找鬼。 笑死隔嫡，一個胖子當(dāng)著我的面吹牛甸怕，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播腮恩，決...
    沈念sama閱讀 40,416評論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼梢杭，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了秸滴？” 一聲冷哼從身側(cè)響起武契，我...
    開封第一講書人閱讀 39,326評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后咒唆，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體届垫，經(jīng)...
    沈念sama閱讀 45,782評論 1贊 316
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年全释，在試婚紗的時候發(fā)現(xiàn)自己被綠了装处。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,102評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡浸船，死狀恐怖妄迁，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情李命，我是刑警寧澤登淘，帶...
    沈念sama閱讀 35,790評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站封字，受9級特大地震影響黔州，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阔籽，卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一流妻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧仿耽，春花似錦合冀、人聲如沸各薇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽峭判。三九已至开缎，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間林螃，已是汗流浹背奕删。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留疗认，地道東北人完残。 一個月前我還...
    沈念sama閱讀 48,332評論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像横漏，于是被迫代替她去往敵國和親谨设。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,044評論 2贊 355

推薦閱讀更多精彩內(nèi)容