DOM_常用事件

常用事件

onload
<script>
        window.onload = function () {
            ele = document.getElementById("i")
            console.log(ele.innerHTML);
        }
    </script>
</head>
<body>
<div class="background">
    <div id="i">ivanlee</div>
</div>

window.onload的方法解决了js在从上到下编译的时候，无法先解析body里面的内容，后解析<script>标签里的事件。

现在script标签在上面，div标签在下面，加入onload方法可以在解析时进行等待，等到解析完div标签。

onsubmit

很多检验是在提交服务器之前进行的，运用onsubmit方法可以在本地进行验证，如果出错了可以立即停止，不需要交给服务器

  <form action="" id="i">
    用户名 <input type="text">
    密码 <input type="password">
    <input type="submit"></form>
</div>
<script>
    var ele = document.getElementById("i");
    var user = document.querySelector("#i [type=text]")
    var pwd = document.querySelector("#i [type=password]")
    ele.onsubmit = function (e){
        if(user.value.length < 5){
            alert(user.value+"长度应该大于5")

        return false;    // 终止事件执行
        // e.preventDefault() // 阻止元素默认行为
        }
    }
</script>

image-20220518151139820

当用户名长度小于5时，点击提交之后就会弹窗提示（这个过程不会传给服务器）

image-20220518151337145

onchange
   <select name="provonce" id="s1">
        <option value="hebei">请选择省份</option>
        <option value="hubei">湖北省</option>
        <option value="hunan">湖南省</option>
        <option value="hebei">河北省</option>
    </select>

    <select name="provonce" id="s2">
        <option value="hebei">请选择城市</option>

    </select>
</div>
<script>
    var  data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};
    var ele =  document.getElementById("s1");
    var ele2 =  document.getElementById("s2");
    ele.onchange = function (){
        var cities = data[this.value]; //Array
        ele2.options.length = 1; //1代表有一个默认显示值：请选择城市
        for (var i=0;i<cities.length;i++){
            var opt = document.createElement("option");
            opt.innerText = cities[i];
            ele2.appendChild(opt);
        }
    }
</script>

image-20220518152242489

image-20220518152300694

onmouse
<div id="container">
        <div id="title">使用了onmouse事件↓</div>
        <div id="list">
            <div class="item1">第一行</div>
            <div class="item2">第二行</div>
            <div class="item3">第三行</div>
        </div>
    </div>
<script>
    // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

    // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
    var container=document.getElementById("container");
    var title=document.getElementById("title");
    var list=document.getElementById("list");
    title.onmouseover = function(){ 
        list.style.display="block";
    }
    container.onmouseleave = function(){
        list.style.display="none";
    }
</script>

onmouseout表示鼠标悬停事件已经发生之后的动作

image-20220518153101611

如果没有离开的动作，那么这三行将会一直被显示，那就需要onmouseleave，表示鼠标离开区域之后发生的动作

image-20220518153148961

移开鼠标之后又恢复原来的样子

onkey
<input type="text" id="i1"/>

<script type="text/javascript">

  var ele=document.getElementById("i1");

  ele.onkeydown=function(e){
    console.log("onkeydown",e.key)
  };

  ele.onkeyup=function(e){
    console.log("onkeyup",e.keycode)
  };

onkeyup 事件会在键盘按键被松开时发生。

onkeydown 事件会在用户按下一个键盘按键时发生。

与onkeyup 事件相关的事件发生次序：

  1. onkeydown
  2. onkeypress
  3. onkeyup

image-20220518153802908

onblur and onfocus
var ele = document.querySelector("#i1");

// 获取焦点事件
ele.onfocus = function () {
  console.log("in")
};

// 失去焦点事件
 ele.onblur = function () {
      if(ele.value.length<5){
        ele.value = "太短了，重新输入";
      }
}

当鼠标点击框的时候，是获取焦点事件鼠标移开以后就失去了，用法就是可以实时的进行判断，如果输入结束可以立即判断输入是否合法。

image-20220518154348288

点击输入框，就输出in了，当我输入‘12’以后并且点击其他地方

image-20220518154505326

冒泡区域

image-20220518155009854

现有两块区域，小的c2，大的c1

<div class="c1">
        <div class="c2"></div>
    </div>


    <script>

        var ele1 = document.querySelector(".c1");
        ele1.onclick = function () {
            alert("c1区域")
        };

        var ele2 = document.querySelector(".c2");
        ele2.onclick = function (event) {
            alert("c2区域");

            // 如何阻止事件冒泡
            event.stopPropagation();
        }

    </script>

一般情况下，鼠标进入绿色区域后，会弹窗显示“c1区域”，到达蓝色部分后会依次弹窗显示“c2区域”，“c1区域”

如果想要达到蓝色区域只属于c2区域，不向外延伸，就加入一个stopPropagation

image-20220518155351312

posted @ 2022-05-18 16:02  ivanlee717  阅读(188)  评论(0)  编辑  收藏  举报