（javascript）（基础知识+实例） 13.事件2-浏览器事件，表单事件事件对象 event对象是什么？如何获

事件对象 event对象

是什么？
如何获取？
有什么用？
1. 获取三组坐标
  - offsetX offsetY
  - clientX clientY
  - pageX pageY
2. 获取键盘的按键
  - keyCode
3. 获取滚轮滚动方向
  - wheelDetlaY
4. 阻止事件冒泡
  - stopPropagation()
5. 获取目标元素
  - target
6. 阻止默认事件
  - preventDefault()
7. 获取键盘的组合键
  - ctrlKey
  - shiftKey
  - altKey
事件传播
- 多个嵌套的元素绑定同类型的事件事件执行的先后顺序
- 冒泡捕获
默认事件
- a标签
- form标签
事件委托
- 一个元素无法直接绑定事件需要委托给他的父元素绑定同类型事件通过event.target缩小事件触发的范围
- 优点
事件监听
- 元素.addEventListener(事件类型, 事件处理函数)

事件类型

鼠标事件
键盘事件
浏览器事件

浏览器事件

所有浏览器事件都给window绑定
load 网页加载完成的事件
- 该事件会在网页加载完成之后执行一次
resize 网页尺寸变化的事件
- 该事件只要网页的宽度或者高度变化了就会执行一次
- 该事件不会在页面初始化的时候执行

表单事件

表单是用来收集用户信息
信息收集之后是需要发送给后端
action就是配置提交后端地址
表单提交的时候需要给每一个输入框加上name属性否则会导致数据无法发送
submit 提交事件
- 该事件给表单form绑定
- 该事件会在表单提交的时候触发一次
- 该事件会在表单发送数据给后端之前触发
- 该事件的主要作用就是用来做表单验证
input 输入事件
- 给输入框绑定的事件 input textarea
- 只要在输入框里面填写内容就会触发一次
change 值改变事件
- input textarea select..
- 输入框内容改变了就会触发一次
focus 获取焦点
- 给输入框绑定的事件 input textarea
- 只要鼠标光标进入输入框的时候就会触发一次
blur 失去焦点
- 给输入框绑定的事件 input textarea
- 只要鼠标光标离开输入框的时候就会触发一次

表单验证

表单验证是在用户提交数据给后端之前对于用户填写内容格式验证
流程
1. 给要验证的表单绑定submit事件
2. 在事件处理函数里面阻止默认的表单提交
3. 验证填写的格式
  - 如果格式正确需要手动触发表单的提交
  - 如果格式错误要给用户提示

实例

（以下代码均为课程实例）

（1）load事件

<body>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi optio repudiandae consequuntur quibusdam qui
        veniam obcaecati veritatis suscipit nihil beatae aspernatur aut tempore, odit inventore eaque quae numquam
        voluptates minima!
    </div>
    <script>

        /* window.addEventListener('load', function(){

        }) */
        window.onload = function () {
            // 此处代码会在网页加载完成之后再执行
            console.log('加载完成...')
            var box = document.querySelector('.box')
            console.log(box)
            box.onclick = function () {
                this.style.color = 'red'
            }
        }

    </script>
</body>

（2）resize事件

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 200px;
            background-color: rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="mask">

    </div>
    <script>
        function centerMask(){
            var mask = document.querySelector('.mask')
            // 获取mask的宽高
            var maskW = mask.offsetWidth
            var maskH = mask.offsetHeight
            // 获取窗口的宽度
            var w = window.innerWidth
            var h = window.innerHeight
            // 让mask居中
            mask.style.left = (w- maskW)/2 + 'px'
            mask.style.top = (h- maskH)/2 + 'px'
        }
        // 页面进入的时候执行一次
        centerMask()
        window.onresize = function(){
            // 只要网页尺寸变化了就会触发
            // 尺寸变化的时候执行一次
            centerMask()
        }
    </script>
</body>

（3）表单事件

<body>
    <form action="https://www.baidu.com">
        <input type="text" placeholder="请输入用户名" name="xingming">
        <input type="password" placeholder="请输入密码" name="mima">
        <button>提交</button>
    </form>
    <script>
        // submit要给form绑定
        var loginForm = document.querySelector('form')
        var userInput = document.querySelector('input[name=xingming]')
        var passInput = document.querySelector('input[name=mima]')
        // 表单提交时通过点击按钮的时候就会提交
        // 点击按钮 --> 触发表单的提交
        // 先在控制台打印提交了 然后再跳转
        loginForm.onsubmit = function(e){
            console.log('提交了...')
            // 阻止默认的表单提交
            var evt = event || e
            evt.preventDefault();
            // 进行验证
            var username = userInput.value
            var password = passInput.value
            console.log(username, password)
            if(username === ''){
                // 代表用户名没有填
                alert('用户名必须填写')
            }else{
                // 用户名填写
                // 验证密码有没有填写
                if(password === ''){
                    // 密码没有填写
                    alert('密码必须填写')
                }else{
                    // 用户名和密码都填写了
                    // 手动提交表单
                    loginForm.submit()
                }
            }
        }
    </script>
</body>

（4）输入框的输入事件

<body>
    <input type="text" id="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <select name="" id="">
        <option value="0">一年级</option>
        <option value="0">一年级</option>
        <option value="0">一年级</option>
        <option value="0">一年级</option>
    </select>
    <script>
        document.getElementById('text').oninput = function(){
            console.log('输入了...')
        }
    </script>
</body>

（5）值变化事件

<body>
    <input type="text" id="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <label><input type="radio" value="0" name="gender">女</label>
    <label><input type="radio" value="1" name="gender">男</label>
    <label><input type="radio" value="2" name="gender">未知</label>
    <select name="" id="">
        <option value="0">一年级</option>
        <option value="1">一年级</option>
        <option value="2">一年级</option>
        <option value="3">一年级</option>
    </select>
    <script>
        document.getElementById('text').onchange = function(){
            console.log('值变化...')
        }
        var radios = document.querySelectorAll('input[type=radio]')
        console.log(radios)
        for(var i=0;i<radios.length;i++){
            radios[i].onchange = function(){
                console.log('单选框值变化')
            } 
        }
        var select = document.querySelector('select')
        select.onchange = function(){
            console.log('选择框的值变化了')
        }
    </script>
</body>

（6）获取焦点和失去焦点

<body>
    <input type="text" id="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <script>
        document.getElementById('text').onfocus = function(){
            console.log('获取焦点了input...')
        }
        document.querySelector('textarea').onfocus = function(){
            console.log('获取焦点了textarea...')
        }

        document.getElementById('text').onblur = function(){
            console.log('失去焦点了input...')
        }
        document.querySelector('textarea').onblur = function(){
            console.log('失去焦点了textarea...')
        }
    </script>
</body>

（7）敏感字去重

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <script>
        var textarea = document.querySelector('textarea')
        textarea.onchange = function(){
            // 获取文本域里面内容
            var content = this.value
            // 替换内容的敏感字
            while(content.indexOf('傻逼') !== -1){
                content = content.replace('傻逼', '**')
            }
            // 要把替换之后内容重新赋值给文本域
            this.value = content
        }
    </script>
</body>

（8)手风琴案例

 <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        margin: 50px auto;
        width: 300px;
        height: auto;
        border: solid 1px #cccccc;
      }
      .Collapsing {
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        border-bottom: 1px solid white;
        text-align: center;
        background-repeat: no-repeat;
        background-position: center right no-repeat;
        background-color: #bdbdbd;
        color: #fff;
      }
      /* 这样隐藏和显示的目的就是为了后面做动画 */
      /* 隐藏所有的内容区 */
      .coll_body {
        height: 0;
        overflow: hidden;
        transition: height 1s;
      }
      /* 默认第一个内容显示 */
      .coll_body:nth-of-type(1){
        height: 130px;
      }
      .coll_body a {
        display: block;
        margin: 10px;
        text-align: center;
        background: #ebebeb;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h3 class="Collapsing">星期一</h3>
      <div class="coll_body">
        <a href="#">语文</a>
        <a href="#">数学</a>
        <a href="#">英语</a>
        <a href="#">科学</a>
      </div>
      <h3 class="Collapsing">星期二</h3>
      <div class="coll_body">
        <a href="#">语文</a>
        <a href="#">数学</a>
        <a href="#">英语</a>
        <a href="#">科学</a>
      </div>
      <h3 class="Collapsing">星期三</h3>
      <div class="coll_body">
        <a href="#">语文</a>
        <a href="#">数学</a>
        <a href="#">英语</a>
        <a href="#">科学</a>
      </div>
      <h3 class="Collapsing">星期四</h3>
      <div class="coll_body">
        <a href="#">语文</a>
        <a href="#">数学</a>
        <a href="#">英语</a>
        <a href="#">科学</a>
      </div>
      <h3 class="Collapsing">星期五</h3>
      <div class="coll_body">
        <a href="#">语文</a>
        <a href="#">数学</a>
        <a href="#">英语</a>
        <a href="#">科学</a>
      </div>
    </div>
  </body>
  <script>
    // 获取所有的标题 给所有的标题绑定点击事件
    var titles = document.getElementsByClassName('Collapsing')
    var contents = document.querySelectorAll('.coll_body')
    for(var i=0;i<titles.length;i++){
        titles[i].onclick = function(){
            // console.log('点击事件')
            // console.log(this)
            // console.log(this.nextElementSibling)
            // 隐藏所有的内容区
            for(var i=0;i<contents.length;i++){
                contents[i].style.height = 0
            }
            // 判断当前对应的内容区是否有高度
            var height = this.nextElementSibling.offsetHeight
            console.log(height)
            if(height>0){
                // 代表有高度
                this.nextElementSibling.style.height = 0
            }else{
                // 代表没有高度 高度为0
                this.nextElementSibling.style.height = '130px'
            }
        }
    }
  </script>

（9）京东放大镜效果案例（附图片）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 754px;
            height: 600px;
            margin: 30px auto;
        }
        .left{
            position: relative;
            float: left;
            width: 350px;
            height: 350px;
            border: 1px solid #333;
        }
        .left>img{
            width: 100%;
            height: 100%;
        }
        .left>.mask{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 175px;
            height: 175px;
            background-color: rgba(55, 155, 55, 0.4);
        }
        .right{
            position: relative;
            display: block;
            float: left;
            width: 400px;
            height: 400px;
            border: 1px solid #666;
            overflow: hidden;
        }
        .right>img{
            position: absolute;
            left: 0;
            top: 0;
        }
        .clearfix{
            display: block;
            content: '';
            clear: both;
        }
        .list{
            border: 1px solid #ddd;
        }
        .list>.list-item{
            float: left;
            border: 2px solid black;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">
            <div class="mask"></div>
            <img src="./imgs/m1.png" alt="">
        </div>
        <div class="right">
            <img src="./imgs/b1.png" alt="">
        </div>
        <div class="clearfix"></div>
        <div class="list">
            <div class="list-item">
                <img src="./imgs/s1.png" alt="" data-bigImg="./imgs/b1.png" data-mImg="./imgs/m1.png">
            </div>
            <div class="list-item">
                <img src="./imgs/s2.jpg" alt="" data-bigImg="./imgs/b2.jpg" data-mImg="./imgs/m2.jpg">
            </div>
        </div>
    </div>
    <script>
        // 获取大盒子的偏移量
        var wrap = document.querySelector('.wrap')
        var ot = wrap.offsetTop
        var ol = wrap.offsetLeft
        /* 1. 输入移入左侧小图的时候显示遮罩层和右侧的大图 */
        var left = document.querySelector('.left')
        var right = document.querySelector('.right')
        var mask = document.querySelector('.mask')
       
        var leftImg = left.querySelector('img')
        var rightImg = right.querySelector('img')
        left.onmouseover = function(){
            // right.style.display = 'block'
            mask.style.display = 'block'
        }
        /* 2. 离开的时候隐藏遮罩层和右侧大图 */
        left.onmouseout = function(){
            // right.style.display = 'none'
            mask.style.display = 'none'
        }
        /* 3. 给列表的小图绑定移入事件 */
        var smallImgs = document.querySelectorAll('.list-item>img')
        console.log(smallImgs)
        for(var i=0;i<smallImgs.length;i++){
            smallImgs[i].onmouseover = function(){
                // 通过this获取当前的图片
                console.log(this.dataset)
                // 获取中图和大图的路径
                var bigImg = this.dataset.bigimg
                var mImg = this.dataset.mimg
                // 给当前页面上面的中图和大图替换路径
                leftImg.setAttribute('src', mImg)
                rightImg.setAttribute('src', bigImg)
            }
        }
        /* 4. 鼠标移动 放大镜会跟随 */
        left.onmousemove = function(e){
            var evt = event || e
            /* 获取mask的宽度和高度 */
            var mw = mask.offsetWidth
            var mh = mask.offsetHeight
            console.log(mw,mh)

            // 获取当前鼠标的坐标
            // 坐标 = 实际坐标 - 大盒子偏移量
            var x = evt.clientX - ol
            var y = evt.clientY - ot
            /* 限制边界问题 */
            mask.style.left = x - mw/2 + 'px'
            mask.style.top = y - mh/2 + 'px'
            var biZhi = 800/350
            // 方向是相反
            // 负数代表相反方向的运动
            rightImg.style.left = -biZhi*(x-mw/2) + 'px'
            rightImg.style.top = -biZhi*(y-mh/2) + 'px'
        }
    </script>
</body>

在这里插入图片描述