事件的監聽

時間 2019-11-13

標籤事件監聽简体版

原文原文鏈接

<style>
    #d1{width: 200px;height: 200px;background: red;}
    #d2{width: 200px;height: 200px;background: yellow;display: none;}
    
    </style>
<script type="text/javascript">
    //綁定html元素方式
    function test1(){
        alert("這是綁定html元素的方式");
    }
    //綁定dom的方式
    function test2(){
        alert("這是綁定dom的方式");
    }
    //添加一個頁面加載完成執行
    window.onload=function(){
        //獲取按鈕來執行test2函數
        var button=document.getElementById("test2");
        //給按鈕添加監聽
        button.onclick=test2;
    }
    
    /*更換*/
    
    function over(){
        //獲取id爲d2的元素
        var d2=document.getElementById("d2");
        //設置d2的元素顯示
        d2.style.display="block";
    }
    function out(){
        //獲取id爲d2的元素
        var d2=document.getElementById("d2");
        //設置d2的元素顯示
        d2.style.display="none";
    }
    </script>
    
</head>

<body>
<a href="https://www.baidu.com/" >點擊我</a>
<input type="button" value="測試1" id="mytest1"  onClick="test1()">
<button type="button" id="test2"><b>測試2</b></button>


<div id="d1" onMouseOver="over()" onMouseOut="out()"></div>
<div id="d2"></div>
</body>

這是最普通的一個點擊出現下拉滑塊。javascript

其中比較經常使用的事件是html

常見的事件類型：

onclickjava	單擊鼠標左鍵觸發dom
ondblclick函數	雙擊鼠標左鍵觸發測試
onmousedownspa	單擊任意一個鼠標按鍵時觸發指針
onmouseoutcode	鼠標指針移出一個元素邊界時觸發orm
onmousemove	鼠標在某個元素上移動時持續觸發
onmouseup	鬆開鼠標任意一個按鍵時觸發
onmouseover	鼠標指針移到一個元素上時觸發

經常使用的鍵盤事件：

onkeydown	按下鍵盤上某個按鍵時觸發，一直按會持續觸發
onkeyup	釋放某個按鍵時觸發
onkeypress	按下某個按鍵併產生字符時觸發，忽略shift等功能鍵

HTML事件：

onload	頁面徹底加載後在window對象上觸發 window.onload=function（）{ }頁面加載完成的經常使用語句
onunload	頁面徹底卸載後再window對象上觸發
onselect	選擇了文本框的一個或多個字符時觸發
onchange	文本框失去焦點時，而且在它獲取焦點後內容發生過改變時觸發
onsubmit	單擊「提交」按鈕時在表單form上觸發
onfocus	任何元素或窗口得到焦點時觸發當鼠標移入表單
onblur	任何元素或窗口失去焦點時觸發當鼠標移出表單

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。