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>