三、DOM事件

  • JavaScript与HTML之间的交互式通过事件实现的

onclick //点击事件
onfocus
onblur
onmouseover //鼠标移到某元素之上
onmouseout //鼠标从某元素移开
onload页面加载时触发
onchange域的内容改变时发生
onsubmit//表单中的确认按钮被点击时发生
//有事件一定有对应一个处理结果，用函数表示
onresize//浏览器的尺寸发生改变
onscroll //窗口滚动
onchange事件支持的标签input,select,textarea

3-1、鼠标点击、鼠标悬停事件

  1. <div id="test">hello world</div>
  2.     <script>
  3.         /* 内容，样式，结构 */  
  4.         var test = document.getElementById("test");
  5.        test.onclick = function(){
  6.            /* this在事件中指向正在执行事件的当前对象 */
  7.            this.style.color = "pink"
  8.            /* innerHTML */
  9.            this.innerHTML = "change"
  10.        }
  11.        // 鼠标悬停的事件
  12.        test.onmouseover = function(){
  13.            this.style.backgroundColor = 'gray'
  14.        }
  15.        // 鼠标移除的事件
  16.        test.onmouseout = function(){
  17.            this.style.backgroundColor = '#fff'
  18.        }
  19.     </script>

3-2、点击切换隐藏

点击button按钮，如果div是现实的则隐藏，如果隐藏则显示
image.png

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. </head>
  3. <body>
  4.     <div id="test" style="display: block">hello world</div>
  5.     <button id="btn">切换</button>
  6.     <script>
  7.         /* var btn = document.getElementById("btn");
  8.         var test = document.getElementById("test");
  9.         btn.onclick = function(){
  10.             var value = test.style.display;
  11.             if(value == "block"){
  12.                 test.style.display = "none"
  13.             }else{
  14.                 test.style.display = "block"
  15.             }
  16.         } */
  17.         $("#btn").click(function(){
  18.             /* is(":visible") 判断一个元素是否显示 */
  19.             var isShow = $("#test").is(":visible")
  20.             if(isShow){
  21.                 $("#test").hide(300)
  22.             }else{
  23.                 $("#test").show(300)
  24.             }
  25.         })
  26.     </script>
  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. </head>
  3. <body>
  4.     <div id="test">hello world</div>
  5.     <button id="btn">切换</button>
  6.     <script>
  7.         $("#btn").click(function(){
  8.             /* toggle()   集成了hide(),show() */
  9.             $("#test").toggle(300)
  10.         })
  11.     </script>
  12. </body>

3-3、隔行变色

  1. <!-- <style>
  2.         li:nth-child(odd){
  3.             color: pink;
  4.         }
  5.         li:nth-child(even){
  6.             color: blue;
  7.         }
  8.     </style> -->
  9. </head>
  10. <body>
  11.     <!-- 偶数项 字体颜色为粉色 奇数项字体颜色为蓝色 -->
  12.     <ul>
  13.         <li>0</li>
  14.         <li>1</li>
  15.         <li>2</li>
  16.         <li>3</li>
  17.         <li>4</li>
  18.     </ul>
  19.     <script>
  20.         var lis = document.getElementsByTagName("li")
  21.         /* 1.对li进行遍历 */
  22.         for(var i=0;i<lis.length;i++){
  23.             /* 2.下标值取余%2 为零的情况为偶数 */
  24.             if(i%2==0){
  25.                 lis[i].style.color="pink"
  26.             }else{
  27.                 lis[i].style.color="blue"
  28.             }
  29.         }
  30.     </script>

3-4、点击导航 div实现跳转

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2.     <style>
  3.         .container>div{
  4.             height: 300px;
  5.             margin-top: 50px;
  6.         }
  7.         .container>div:nth-child(1){
  8.             background: pink;
  9.         }
  10.         .container>div:nth-child(2){
  11.             background: rgb(231, 250, 58);
  12.         }
  13.         .container>div:nth-child(3){
  14.             background: rgb(158, 241, 252);
  15.         }
  16.         .container>div:nth-child(4){
  17.             background: rgb(243, 140, 99);
  18.         }
  19.         .nav{
  20.             position: fixed;
  21.             line-height: 40px;
  22.             background: lightcoral;
  23.             top: 0;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="nav">
  29.         <a href="#wei">魏无羡</a>
  30.         <a href="#lan">蓝忘机</a>
  31.         <a href="#xiao">晓星尘</a>
  32.         <a href="#song">宋子琛</a>
  33.     </div>
  34.     <div class="container">
  35.         <div id="wei">魏无羡</div>
  36.         <div id="lan">蓝忘机</div>
  37.         <div id="xiao">晓星尘</div>
  38.         <div id="song">宋子琛</div>
  39.     </div>
  40.     <script>
  41.         /* boj.offset().top 获取元素距离顶部的距离 
  42.         attr(param)  获取元素的属性
  43.         $('html,body').animate({scrollTop:params)}
  44.         */
  45.         $(".nav a").click(function(){
  46.             /* 1.获取当前元素对应跳转的元素距离顶部的高度 */
  47.             var attr = $(this).attr("href");
  48.             var top = $(attr).offset().top;
  49.             console.log(attr)
  50.             console.log(top)
  51.             /* 2.让窗口滚动对应的高度 */
  52.             $("html,body").animate({scrollTop:top})
  53.             return false;
  54.         })
  55.     </script>

3-5、onbulr onfocus

onfocus 获取焦点
onblur 失去焦点
image.png image.png

<input type="text" id="input" value="good">
    <script>
        var input  = document.getElementById("input");
        input.onfocus  =  function(){
            this.style.backgroundColor = "red"
        }
        input.onblur  = function(){
            this.style.background = "green"
        }
        /* 键盘松开的时发生的事件 */
        input.onkeyup = function(event){
            /* keycode返回一个键盘码 */
            if(event.keyCode == 13){
                /* 只要是对象的属性,都可以通过点的方式去获取值 */
                console.log(this.value)
            }
        }
    </script>

3-6、onscroll 滚动事件

20190827_202034.gif

<style>
            body{
                height: 2000px;
            }
            .nav{
                height: 60px;
                position: fixed;
                background: transparent;
                left:0;
                top:0;
                width:100%;
            }
        </style>
    </head>
    <body>
        <div class="nav" id="nav">导航</div>
        <script>
            /* onscroll 滚动事件 */
            var nav = document.getElementById("nav")
            window.onscroll =  function(){
                /* 获取滚动条距离顶部的高度 */
                var scrollTop = document.documentElement.scrollTop;
                /* 当滚动条距离顶部的高度达到300时候完全显示 */
                var opacity = scrollTop/300;
                if(opacity>1){
                    opacity = 1
                }
                nav.style.opacity = opacity;
                nav.style.backgroundColor = "red"
            }
        </script>
    </body>

<input type="text" id="input">
    <script>
        /* 

         */
        window.onload = function(){
            var input = document.getElementById("input");
            input.onchange = function(event){
                console.log(this.value)
            }
        }
    </script>

3-7、onload页面加载时触发

  • onload 等DOM树以及图片相关资源加载完毕，在执行函数中的代码

    <input type="text" id="input">
  <script>
      /* 

       */
      window.onload = function(){
          var input = document.getElementById("input");
          input.onchange = function(event){
              console.log(this.value)
          }
      }
  </script>