JavaWeb-js（4）_java前端js文件示例-CSDN博客

本文链接：https://blog.csdn.net/rxdasd123456/article/details/140336393

js事件

在前端页面中，js程序大多数是由事件来驱动的，当触发某些事件的时候，可以使用js负责响应。

js事件由三部分组成:
   事件源——》指的是被触发的对象;
   事件类型——》如何触发的事件，如:鼠标单击、双击、键盘操作等;
   事件处理程序——》触发事件以后，使用一个函数来处理。

因此事件步骤:
   1. 获取事件源对象;
   2. 注册事件;
   3. 添加处理程序。

事件类型

事件的注册方式

1.静态注册在html标签中注册（如果元素是通过js创建的，就没法这样注册）

2.动态注册在js代码中注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>

        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>

</head>


<body>

    <!-- onclick 单击事件 -->
    <button onclick="clickEvent()" ondblclick="dblclickEvent()">我是按钮</button>

    <input id="phone-input" onfocus="focusEvent()" onblur="blurEvent()">

    <span id="check-text" style="display: none;">格式正确</span>


    <div class="box" onmouseover="mouseoverEvent()"
        onmouseout="mouseoutEvent()"
    ></div>

</body>
<script>




    //入口函数
    //可以方式js代码 先于html代码加载 导致 元素获取失败的问题
    window.onload = function () {
        console.log('加载完成了')
        console.log(document.querySelector('button'))



      
    }

    function clickEvent() {
            console.log('单击')
        }

        function dblclickEvent() {
            console.log('双击')

        }

        function focusEvent() {


            console.log('获取到焦点')
            console.log('请输入手机号')
        }

        function blurEvent() {

            //当失去焦点的时候验证手机号正确性
            console.log('开始验证手机号');

            let phoneInput = document.getElementById('phone-input')
            let phone = phoneInput.value


            let text = document.getElementById('check-text');
            text.style.display = 'inline';
            //验证手机号
            let reg = /^1[3456789]\d{9}$/

            if (reg.test(phone)) {
                text.innerText = '格式正确'
                text.style.color = '#00acff'
            } else {
                text.innerText = '格式有误'
                text.style.color = 'red'
            }
        }

        function mouseoverEvent(){
            console.log('鼠标划入')
        }

        function mouseoutEvent(){
            console.log('鼠标划出')
        }
</script>

</html>

 // false代表 事件冒泡 从下往上 默认的
    // true代表 事件捕获， 从上往下 
    document.getElementById('one').addEventListener('click', function () {

        console.log('one被点击了')
    },false)
    document.getElementById('two').addEventListener('click', function () {

        console.log('two被点击了')
    },false)
    document.getElementById('three').addEventListener('click', function () {

        console.log('three被点击了')
    },false)

option

false的话就是事件冒泡了从子元素到父元素
true的话就是事件捕获从父到子！

true 的触发顺序总是在 false 之前；
•如果多个均为 true，则外层的触发先于内层；
•如果多个均为 false，则内层的触发先于外层。

Event事件对象

事件对象e，是event的简称。当一个事件被触发时候，这个事件的有关数据都会被存储在一个事件对象e里面，这个对象e有许多固定方法提供给我们查看里面各种数据。

Bom操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        body{
            height: 3000px;
        }

        .top-layout{
            width: 100%;
            height: 80px;
            background-color: blue;
            display: none;
            position: fixed;
            top: 0;
        }

        .goTop-btn{
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
            position: fixed;
            right: 100px;
            bottom: 100px;
            display: none;
        }
    </style>
</head>
<body>

    <div class="top-layout"></div>

    <div class="goTop-btn"></div>
    
</body>

<script>


    /*
    
        bom代表操作浏览器
        页面的放大缩小 ， 页面的滚动， 浏览器加载情况
    */
   
   //监听浏览器加载完毕 方式1
   window.onload = function(){


   }

   //方式2
   window.addEventListener('load',function(){


   })

   //监听浏览器大小的改变
   window.addEventListener('resize',function(e){

    // console.log(window.innerWidth,window.innerHeight)
   })



   
   //获取 顶部栏目 和 按钮
   let topBtn= document.querySelector('.goTop-btn')
    let topLayout= document.querySelector('.top-layout');
    

   //监听浏览器滚动条滚动
   window.addEventListener('scroll',function(e){

 
    //获取当前滚动条的滑动距离
    let top = document.documentElement.scrollTop;

    
    if(top>1000){
        topLayout.style.display='block'
        topBtn.style.display='block'

    }else{
        topLayout.style.display='none'
        topBtn.style.display='none'
    }
   })


   //点击按钮 回到顶部
   topBtn.addEventListener('click',function(){

     window.scrollTo({
        top:0,
        behavior:"smooth"
     })
   })
</script>
</html>

定时器

  //定时器 1 setTimeout
    // function 延迟执行的函数,延迟的时间 
   let timeOut  =   setTimeout(function(){
        console.log(123)

          // 清除定时器
        // clearTimeout(this);
    },2000);


    function clearTime(){
        clearTimeout(timeOut);
    }

 // 循环执行的定时器：轮播图，倒计时，循环请求

   let setTime=  setInterval(function(){
        console.log("我被执行了")

    },1000)


    function clearTime(){
        clearInterval(setTime)

    }