JavaScript事件案例

阿新 • • 發佈：2017-06-26

案例 1.0 put ext head button name tel als

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    /*
        window.onload = function () {
            alert(‘onload‘);
        }

        window.onfocus = function () {
            alert(‘onfocus‘);
        }

        window.onblur = function () {
            alert(‘onblur‘);
        }

        window.onscroll = function () {
            alert(‘onscroll‘);
        }

        window.onresize = function () {
            alert(‘onresize‘);
        }
        */
    </script>
    <script type="text/javascript">
        var msg = "";
        var myAlert = function () {
            msg += " Click Event End\n";
            alert(msg);
        }
    </script>
</head>
<body 
onclick="javascript:msg+=‘-->Body Event‘;myAlert();">
    <table border="1" 
    onclick="javascript:msg+=‘-->Table Event‘;myAlert();event.cancelBubble=true;">
    <tr 
    onclick="javascript:msg+=‘-->TR Event‘;myAlert();">
        <td 
        onclick="javascript:msg+=‘-->TD Event‘;myAlert();">
            我是單元格
            <p 
            onclick="javascript:msg+=‘-->P Event‘;myAlert();">
                我是段落
            </p>
        </td>
    </tr>
    </table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $ = function (id) {
            return document.getElementById(id);
        }

        var changeSize = function (id, size, obj) {
            var inp = $(id);
            obj.value += size;
            inp.size += size;
        }

        var onclickEvent = function () {
            alert("提交內容" + $(‘MyButton‘).value);
        }
    </script>
</head>
<body>
<input type="text" id="txt" size="15"/>
<input type="button" value="加長" onclick="changeSize(‘txt‘,30,this);"/>

<center>
<br>
<p>單擊“事件測試”按鈕，通過匿名函數處理事件</p>
<form name="myForm" id="myForm">
  <input type="button" name="myButton" id="myButton" value="事件測試">
</form>
<script type="text/javascript">
    /*
    $("myButton").onclick = function () {
        alert(‘myButton onclick‘);
    };
    */
    //$("myButton").onclick = onclickEvent;

    /*
    $("myButton").addEventListener(‘click‘
    , function () {
        alert("first click Event");
    }, false);

    $("myButton").addEventListener(‘click‘
    , function () {
        alert("second click Event");
    }, false);

    $("myButton").addEventListener(‘click‘
    , function () {
        alert("third click Event");
    }, false);
    */

    EventUtil.addHandler(
    $("myButton")
    ,‘click‘
    , function () {
        alert("I am compatible1 click Event");
    });

    EventUtil.addHandler(
    $("myButton")
    , ‘click‘
    , function () {
        alert("I am compatible2 click Event");
    });
</script>
</center>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $ = function (id) {
            return document.getElementById(id);
        }

        var changeSize = function (id, size, obj) {
            var inp = $(id);
            obj.value += size;
            inp.size += size;
        }

        var onclickEvent = function () {
            alert("提交內容" + $(‘MyButton‘).value);
        }
    </script>
</head>
<body>
<input type="text" id="txt" size="15"/>
<input type="button" value="加長" onclick="changeSize(‘txt‘,30,this);"/>

<center>
<br>
<p>單擊“事件測試”按鈕，通過匿名函數處理事件</p>
<form name="myForm" id="myForm">
  <input type="button" name="myButton" id="myButton" value="事件測試">
</form>
<script type="text/javascript">
    /*
    $("myButton").onclick = function () {
        alert(‘myButton onclick‘);
    };
    */
    //$("myButton").onclick = onclickEvent;

    /*
    $("myButton").addEventListener(‘click‘
    , function () {
        alert("first click Event");
    }, false);

    $("myButton").addEventListener(‘click‘
    , function () {
        alert("second click Event");
    }, false);

    $("myButton").addEventListener(‘click‘
    , function () {
        alert("third click Event");
    }, false);
    */

    EventUtil.addHandler(
    $("myButton")
    ,‘click‘
    , function () {
        alert("I am compatible1 click Event");
    });

    EventUtil.addHandler(
    $("myButton")
    , ‘click‘
    , function () {
        alert("I am compatible2 click Event");
    });
</script>
</center>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
     .whiteStar  
     {
         float:left;
         width:64px;
         height:64px;
         background-image:url(/Images/starwhite.png)
     }
     .blueStar  
     {
         float:left;
         width:64px;
         height:64px;
         background-image:url(/Images/starblue.png)
     }
    </style>
    <script type="text/javascript">
        var $ = function (id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<div id="div1" class="whiteStar"></div>
<div id="div2" class="whiteStar"></div>
<div id="div3" class="whiteStar"></div>
<div id="div4" class="whiteStar"></div>
<div id="div5" class="whiteStar"></div>


<script type="text/javascript">
    //星星1
    $(‘div1‘).onmouseover = function () {
        $(‘div1‘).className = ‘blueStar‘;
    };

    $(‘div1‘).onmouseout = function () {
        $(‘div1‘).className = ‘whiteStar‘;
    };

    //星星2
    $(‘div2‘).onmouseover = function () {
        $(‘div1‘).className = ‘blueStar‘;
        $(‘div2‘).className = ‘blueStar‘;
    };

    $(‘div2‘).onmouseout = function () {
        $(‘div1‘).className = ‘whiteStar‘;
        $(‘div2‘).className = ‘whiteStar‘;
    };

    //星星3
    $(‘div3‘).onmouseover = function () {
        $(‘div1‘).className = ‘blueStar‘;
        $(‘div2‘).className = ‘blueStar‘;
        $(‘div3‘).className = ‘blueStar‘;
    };

    $(‘div3‘).onmouseout = function () {
        $(‘div1‘).className = ‘whiteStar‘;
        $(‘div2‘).className = ‘whiteStar‘;
        $(‘div3‘).className = ‘whiteStar‘;
    };

    //星星4
    $(‘div4‘).onmouseover = function () {
        $(‘div1‘).className = ‘blueStar‘;
        $(‘div2‘).className = ‘blueStar‘;
        $(‘div3‘).className = ‘blueStar‘;
        $(‘div4‘).className = ‘blueStar‘;
    };

    $(‘div4‘).onmouseout = function () {
        $(‘div1‘).className = ‘whiteStar‘;
        $(‘div2‘).className = ‘whiteStar‘;
        $(‘div3‘).className = ‘whiteStar‘;
        $(‘div4‘).className = ‘whiteStar‘;
    };

    //星星5
    $(‘div5‘).onmouseover = function () {
        $(‘div1‘).className = ‘blueStar‘;
        $(‘div2‘).className = ‘blueStar‘;
        $(‘div3‘).className = ‘blueStar‘;
        $(‘div4‘).className = ‘blueStar‘;
        $(‘div5‘).className = ‘blueStar‘;
    };

    $(‘div5‘).onmouseout = function () {
        $(‘div1‘).className = ‘whiteStar‘;
        $(‘div2‘).className = ‘whiteStar‘;
        $(‘div3‘).className = ‘whiteStar‘;
        $(‘div4‘).className = ‘whiteStar‘;
        $(‘div5‘).className = ‘whiteStar‘;
    };

</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script src="Scripts/KeyCodeList.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" id="txt" />
    <script type="text/javascript">
        var objTxt = document.getElementById(‘txt‘);
        EventUtil.addHandler(objTxt, ‘keypress‘, function () {
            var event = EventUtil.getEvent();
            alert(keyCodeList[event.keyCode]);
        });
    </script>
</body>
</html>

var keyCodeList = {
    65: ‘A‘,
    66: ‘B‘,
    67: ‘C‘,
    68: ‘D‘,
    69: ‘E‘,
    70: ‘F‘,
    71: ‘G‘,
    72: ‘H‘,
    73: ‘I‘
    //...  
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        var doClick = function (id) {
            var btn = document.getElementById(id);
            alert(btn.value);
        }

        window.onload = function () {
            var oBtn1 = document.getElementById(‘btn1‘);
            EventUtil.addHandler(oBtn1, ‘click‘,
            function () {
                alert(oBtn1.value)
            });

            //document.write(myClass.name);
            //document.write(myClass.name1());
            //myClass.action();
        }

        var myClass = {
            name: ‘Nick.Chung‘,
            name1: function () {
                return ‘Nick.Chung‘;
            },
            action: function () {
                alert(‘eating...‘);
            }
        };
    </script>
</head>
<body>
<input type="text" id="btn1" value="button1" />
<input type="button" id="btn1" value="button1" 
onclick = "doClick(‘btn1‘)"/>
<input type="button" id="btn3" value="button3" />
<input type="button" id="btn4" value="button4" />
<input type="button" id="btn5" value="button5" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--引入兼容事件類-->
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        //當HTML文檔內容加載完成
        window.onload = function () {
            //獲取按鈕對象
            var oBtn =
            document.getElementById(‘btn‘);

            //獲取復選框對象
            var oChk =
            document.getElementById(‘chk‘);

            //為復選框添加單擊事件
            EventUtil.addHandler(oChk, ‘click‘,
            function () {
                
                //如果復選框選中了
                if (oChk.checked) {
                    //禁用按鈕
                    oBtn.disabled = true;
                }
                else {
                    //沒選中則啟動按鈕
                    oBtn.disabled = false;
                }
            })


        }
    </script>
</head>
<body>
<input type="checkbox" id="chk" />禁用按鈕
<br />
<br />
<input type="button" id="btn" 
disabled="disabled" value="我是按鈕"/>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/EventUtil.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var oBtn1 = document.getElementById(‘btn1‘);
            var oBtn2 = document.getElementById(‘btn2‘);
            var oBtn3 = document.getElementById(‘btn3‘);
            var oBtn4 = document.getElementById(‘btn4‘);
            var oBtn5 = document.getElementById(‘btn5‘);

            EventUtil.addHandler(
            oBtn1,
            ‘click‘,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn2,
            ‘click‘,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn3,
            ‘click‘,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn4,
            ‘click‘,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });

            EventUtil.addHandler(
            oBtn5,
            ‘click‘,
            function () {
                var o = EventUtil.getEvent().srcElement;
                alert(o.value);
            });
        }
    </script>
</head>
<body>
<input type="button" id="btn1" value="button1" />
<input type="button" id="btn2" value="button2" />
<input type="button" id="btn3" value="button3" />
<input type="button" id="btn4" value="button4" />
<input type="button" id="btn5" value="button5" />
</body>
</html>

JavaScript事件案例

案例 1.0 put ext head button name tel als <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

JavaScript事件三要素（小案例實現）

js的基礎為HTML與CSS，那麼在實現對他們進行一些互動操作時我們首先要明白的是事情三要素事件三要素： 1.事件源（你是要對什麼東西進行操作） 2.事件（你要做什麼實現所要的互動效果） 3.處理函式（在事件進行後你要目標變成什麼樣子）案例：下面小編舉一個很簡單的例子去

Javascript小案例（一）：仿淘寶搜尋框使用者輸入事件的實現

淘寶是我們經常用的一個網上購物平臺，開啟淘寶網首頁，找到淘寶首頁的搜尋框，如下如所示：（截圖日期：2017年6月18日）大家可以看到，當頁面一開啟，搜尋框中就可以看到灰色字型“少女高跟鞋”，還有閃爍的游標。當用戶點選輸入的時候，灰色字消失。當用戶清空

javascript事件處理程序

跨瀏覽器包括 document 事件 else if asc 事件處理程序瀏覽器操作 javascript 事件處理程序 1、普通事件處理程序 <input type="button" value="click me" onclick="sh

JavaScript 事件

asc 失去焦點 eset nbsp 文檔 script abort style 屬性屬性當以下情況發生時，出現此事件FFNIE onabort 圖像加載被中斷 1 3 4 onblur 元素失去焦點 1 2 3 on

javaScript事件綁定

java out 是否常用 element 事件處理 tac 結構 tex 事件綁定，就是要對某一個東西進行操作。（因為你想讓他實現什麽效果，所以就得綁定他，哈哈哈！）要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處

javascript-事件冒泡、鼠標跟隨、鍵盤跟隨、鍵盤提交

事件冒泡、鼠標跟隨、鍵盤跟隨、鍵盤提交1、事件冒泡<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

javascript-事件綁定

javascript-事件綁定1、事件綁定與解除<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <s

JavaScript事件方法

content 用戶登錄 onclick ++ org btn 數字 dom return <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

JavaScript入門案例

tran ext ring ble .org lis rip xhtml date <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

javascript事件冒泡

performed index 分析事情過程 lis eve num 輸出 1. 事件在瀏覽器客戶端應用平臺，基本生都是以事件驅動的，即某個事件發生，然後做出相應的動作。瀏覽器的事件表示的是某些事情發生的信號。事件的闡述不是本文的

JavaScript事件對象EventUtil

asf rem function src form 屬性處理程序 elb top 　　JS中事件對象有很多種，兼容性參差不齊，這個對象封裝了大部分所需的各種方法 var EventUtil={ addHandler:function(element,ty

JavaScript事件代理和事件委托

遍歷我們重繪 down 核心 on() his 事件代理 lur 一、概述：　　那什麽叫事件委托呢？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。那這是什麽意思呢？網上

javascript-事件

不支持如果中斷 tel 虛擬鍵盤 spa logs 大小 event 　　HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應對事件做出反應　　我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。　　如需在

javascript事件學習筆記

n) 耦合 white 最大時間消失 ole 生成依次 1 國慶過完了雖然系統的學習了BOM, DOM, DOM擴展，DOM2, DOM3的相關內容但是為國慶制定的學習計劃卻未能完成還是太懶了！ 2 今天來看看 js的事件流，事件處理程序，事件對

javascript事件相關4

人員 int window html ade cache 能夠完成定義 1 繼續javascript事件相關的學習 gogogo！！！！ 2 3 HTML5事件

JavaScript事件監聽

element ack mat 事件 rem 內部一個 pre 才會 HTML DOM Event 對象參考手冊 addEventListener() 方法：向指定元素添加事件句柄，添加的事件句柄不會覆蓋已存在的事件句柄。 1.語法： element.addEvent

JavaScript--事件委托--冒泡

-- order case click pointer list win logs document <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

javascript事件委托和jQuery事件綁定on、off 和one

作用 clas title 現實調用指定更強 die() 停止一. 事件委托什麽是事件委托？用現實中的理解就是：有100 個學生同時在某天中午收到快遞，但這100 個學生不可能同時站在學校門口等，那麽都會委托門衛去收取，然後再逐個交給學生。而在jQuery 中，我們

在selenium中一些相對常用的JavaScript事件

指定元素 executor 滑動輸入其中對齊 key tex 應用輸入框輸入： 1.找到輸入框的id，然後進行輸入操作 ordinal ：輸入框的id parameter ：需要輸入的內容 browser.execute_script("document.g

JavaScript事件案例

相關推薦