HTML DOM Event

時間 2019-11-13

標籤 html dom event 欄目 HTML 简体版

原文原文鏈接

HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。html

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               //練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect      文本被選中。
onsubmit      確認按鈕被點擊。

　　練習1、event及輸入框瀏覽器

<input class="keyword" type="text" onfocus="func1();" onblur="func2()" value="請輸入用戶名" >

<script>
    function func1(){
//        alert(111)
        var ky=document.getElementsByClassName("keyword")[0];
        ky.value=""
    }
    function func2(){
//        alert(222)
                var ky=document.getElementsByClassName("keyword")[0];
                if (ky.value.trim().length==0){
                    ky.value="請輸入用戶名"
                }

    }
</script>

　　練習2、事件延伸及阻止時間傳播app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 300px;
            height: 200px;
            background-color: chartreuse;
        }
        #div2{
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="div1" onclick="alert('div1')">div1
<div id="div2" onclick="func1(event)">div2</div>
</div>


<script>
    function func1(e){
        alert('div2');
        e.stopPropagation()
    }
</script>
</body>
</html>

　　練習3、增刪演示ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            height: 200px;
            background-color: aqua;
        }

    </style>
</head>
<body>



<div id="div1">
    <div id="div2">hello div2</div>
    <p>hello p</p>
</div>
<input type="button" value="add" onclick="add()">
<input type="button" value="remove" onclick="remove()">

<script>
    function add(){
        var ele=document.getElementById('div1');
        var son=document.createElement("p");
//        son.innerHTML="i'm p"
        son.innerText="XXXXX"
        ele.appendChild(son)
    }
    function remove(){
        var ele=document.getElementById('div1');
        var last_son=ele.lastElementChild;
        ele.removeChild(last_son);
    }

</script>

</body>
</html>

　　練習4、js添加標籤&屬性this

<div class="div1">
    hello div
</div>
<input id="add" type="button" value="add" >

<script>
        var ele=document.getElementById('add')
        ele.onclick=function(){
            var div1=document.getElementsByClassName("div1")[0];
            //添加標籤;
            var img=document.createElement("img");
            //標籤添加屬性
            img.setAttribute("src","1.jpg");
            div1.appendChild(img)

//img.src="1.jpg"

} </script>

練習5、模態對話框spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        #div1{
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            height: 2000px;
            background-color: gainsboro;
            z-index: 1000;
        }
        #div2{
             position: fixed;
            width: 100%;
            height: 200px;
            background-color: red;
            opacity: 0.1;
            z-index: 1001;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #div3{

            height: 300px;
            width: 200px;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1002;
            margin-left: -100px;
            margin-top: -100px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="div1">
        <input type="button" value="click" onclick="show()">
    </div>
<div id="div2" class="hide div"></div>
<div id="div3" class="hide div">
    <input type="button" value="cncel" onclick="cncel()"></div>

    <script>
        function show(){
            var ele=document.getElementsByClassName("div")
            for (var i=0;i<ele.length;i++){
                    ele[i].classList.remove("hide")
            }
        }

        function cncel(){
            var ele=document.getElementsByClassName("div")
            for (var i=0;i<ele.length;i++){
                    ele[i].classList.add("hide")
            }
        }
    </script>
</body>
</html>

練習6、省市二級聯動code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<select name="" id="province"  onchange="func1(this)">
    <!--<option value="sd">山東</option>-->
    <!--<option value="hb">河北</option>-->
    <!--<option value="nmg">內蒙古</option>-->
 </select>


<select name="" id="city">

</select>

<script>
    data={"河北":["衡水","承德"],"山東":["煙臺","青島"],"內蒙古":["呼倫貝爾","滿洲里"]}
    //方式一：
    var pro=document.getElementById('province');
    var city=document.getElementById('city')
    for (var i in data){
        //建立option標籤
        var option_pro=document.createElement("option")
        option_pro.innerHTML=i;
        pro.appendChild(option_pro);

    }
    function func1(self){
        //self.selectedIndex  取字典索引值  self.options 取option標籤 innerhtml取標籤裏內容
//        alert((self.options[self.selectedIndex]).innerHTML)
        var choice=(self.options[self.selectedIndex]).innerHTML;

//        var options=city.children;

//        for (var v=0;v<options.length;v++){
//            city.removeChild(options[v--]);
//        }
        city.options.length=0

//        console.log(data[choice])
        for (var i in data[choice]){
            var option_city=document.createElement("option")
            option_city.innerHTML=data[choice][i];//取出城市
                    city.appendChild(option_city)
        }
    }





//    function func1(){
//        var ele=document.getElementById('province')
//    console.log(ele.value)
//    }

</script>

</body>
</html>

相關標籤/搜索

每日一句

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