js事件、监听，鼠标事件，键盘，浏览器，表单

江河i

已于 2022-05-20 11:01:30 修改

阅读量3.2k

点赞数

分类专栏： Js 文章标签： javascript

于 2021-01-18 20:17:05 首次发布

本文链接：https://blog.csdn.net/z18237613052/article/details/112792785

版权

Js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

这里写目录标题

js事件

1.什么是事件
一件事情发生了，对其进行处理或者响应。
2. 事件的三要素
事件源，事件类型，事件处理
比如：点击右上角的X，页面关闭。事件源：X，事件类型：点击事件处理：页面关闭。
谁引发的后续事件，谁就是事件源。

事件源：DOM节点（一般为元素节点）
事件类型
事件处理函数（代码块）

事件类型：
1.鼠标事件
2.键盘事件
3.浏览器事件
4.表单事件

鼠标事件

            click ==  鼠标左键单击
            dbclick == 鼠标左键双击
            contextmenu  ==  鼠标右键单击
            mousewheel == scroll鼠标滚动
            mousedown  == 鼠标单击事件  不管是左键还是右键，还是滚动都可以触发
            mouseup == 鼠标抬起
            mousemove == 鼠标移动
            mouseover == 鼠标移入（会进行事件传播）
            mouseout == 鼠标移出

mouseenter == 鼠标移入（不会进行事件传播）
mouseleave == 鼠标移出

 <script>
         window.onload = function() {
             var box = document.getElementById("box");
            // box.ondblclick = function() {
            //     console.log("鼠标双击");
            // }
            // box.onclick = function() {
            //     console.log("鼠标单击");
            // }
            // box.oncontextmenu = function() {
            //     console.log("鼠标右键单击");
            // }
            // box.onmousewheel = function() {
            //     console.log("鼠标滚动");
            // }
            // box.onmousedown = function() {
            //     console.log("鼠标按下");
            // }
            box.onmouseup = function() {
                console.log("鼠标抬起");
            }
            box.onmousemove = function() {
                console.log("鼠标移动");
            }
            // box.onmouseover = function() {
            //     console.log("鼠标移入");
            // }
            // box.onmouseout = function() {
            //     console.log("鼠标移出");
            // }
            // box.onmouseenter = function() {
            //     console.log("鼠标移入");
            // }
            // box.onmouseleave = function() {
            //     console.log("鼠标移出");
            // }

         }
     </script>
</head>
<body>
    <div id="box"></div>
</body>

鼠标滚动事件

onmousewheel事件

该事件发生在鼠标滚轮滚动时，火狐中，使用DOMMouseScroll跟其细节事件代替。注意：onmousewheel和DOMMouseScroll事件，在没有滚动条或者内容没有被滚动的时候也会发生，意思是只要鼠标动不管页面动不动。如果你是想一个元素内容滚动后接受一个通知的话，使用onscroll事件。

onscroll事件

事件发生在元素内容滚动的时候，也包括键盘上下键，载入也可触发。事件仅仅在有滚动条时发生，使用overflow属性为元素创建一个滚动条。

使用window.scroll必须要有滚动条才能触发，一般配合$(window).scrollTop()使用.

获取滚动值

 获取滚动值  原生js的获取页面滚动值的兼容性处理
    document.documentElement.scrollTop 标准模式
    document.body.scrollTop 没有DOCTYPE 声明的时候处理
    window.pageYOffset  safari浏览器

用户改变域的内容
onchange

<body>//效果当下拉框的内容发生改变使触发该事件
    城市:
    <select id="city">
        <option>请选择城市</option>
        <option>上海</option>
        <option>北京</option>
    </select>
    <script>
        var city = document.querySelector("#city");
        city.onchange = function() {
            console.log("内容改变了..")
        }
    </script>
</body>

键盘事件

不是所有的元素都能触发
表单元素(选中效果)，document ,window

keydown
键盘按下
keyup
键盘抬起

keypress
键盘按下
在文本框中输入的内容必须与你按下的键是一致的

<!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: 300px;
            height: 300px;
            background-color: brown;
        }
    </style>
    <script>
          window.onload = function(){
             var box = document.getElementById("box");
             box.onkeydown = function(){
                 console.log("键盘按下");
             }//这个元素不能触发
            document.onkeydown = function(){
                console.log("键盘按下");
            }
            // window.onkeydown = function(){
            //     console.log("键盘按下");
            // }
            // var inp = document.querySelector("input");
            // inp.onkeypress = function(){
            //     console.log("键盘按下");
            // }
            // inp.onkeyup = function(){
            //     console.log("键盘抬起");
            // }
         }
    </script>
</head>
<body>
    <div id="box"></div>
    <input type="text">
</body>
</html>

浏览器事件

在这里插入图片描述

<style>
        body{
            height: 2000px;
        }
    </style>
</head>
<script>
    var i = 0;
    window.onscroll = function(){
        console.log(i++);//有滚动轴情况下，只要滚就会触发
    }
    window.onresize = function(){
        console.log("页面尺寸改变");//当将浏览器窗口变小的时候
    }
    // window.onoffline = function(){
    //     console.log("你家网断了");
    // }
    // window.ononline = function(){
    //     console.log("你家网恢复了");
    // }
</script>
<body>    
</body>

表单事件

表单事件主要是表单元素和form标签的

change 表单内容发生改变时，而且已经失去焦点时触发。

input 表单输入事件

focus 获取焦点

blur 失去焦点

submit 表单提交

reset 表单重置

<script>
        window.onload = function(){
            var inp = document.querySelector("input");
            var form = document.querySelector("form");
            inp.onchange = function(){
                console.log("表单内容发生了变化");
            }
            inp.oninput = function(){
                console.log("你输入了内容");
            }
            inp.onfocus = function(){
                console.log("获取了焦点");
                this.style.backgroundColor = "red";
            }
            inp.onblur = function(){
                console.log("失去了焦点");
                this.style.backgroundColor = "blue";
            }
            // form.onsubmit = function(){
            //     alert("表单提交了");
            // }
            // form.onreset = function(){
            //     // alert("表单重置");
            //     console.log("表单重置");
            // }
        }
    </script>
</head>
<body>
    <form action="">
        <input type="text" value="">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>

表单元素的另外三种获取方法(不用记,知道就好,不用)

</head>
<!-- 表单元素的另外三种获取方法
1 document.表单的name名;
2 document.forms["表单的name名"];
3 document.forms[索引]; -->不用记这三种不用
<body>
    <form name="form1" action="https://www.baidu.com/">表单
        <input type="text">
    </form>
</body>
<script>
    // var form1 = document.form1;
    //var form1 = document.forms["form1"];
    //var form1 = document.forms[0];
    console.log(form1);
</script>

获取表单内容并提交的三种方式(优先用第一种)

<body>
    第一种方式/使用的是普通按钮的提交 获取表单.submit();这个方法提交
    <form action="https://www.baidu.com/" id="biao">
        姓名:<input id="nei" type="text">
        <input type="button" value="提交表单1" οnclick="tijiao()"></input>
    </form>
    <hr>第二种方式使用的是submit加οnclick="return 函数()"函数运行为真时提交,为假时不提交
    <form action="https://www.baidu.com/">
        姓名:<input id="nei2" type="text">
        <input type="submit" value="提交表单2" οnclick="return tijiao()"></input>
    </form>
    <hr>第三种方式和第二种差不多,提交功能函数书写位置不同,原理一样
    <form action="https://www.baidu.com/" οnsubmit="return tijiao()">
        姓名:<input id="nei3" type="text">
        <input type="submit" value="提交表单3"></input>
    </form>
</body>
<script>
    function tijiao() {
        var nei = document.getElementById("nei").value; //获取表单内容
        if (nei == null || nei.trim() == '') {
            return; //判断表单内容为空时不提交
        }
        var biao = document.getElementById("biao"); //获取到表单元素节点
        biao.submit(); //提交表单,这一步才是提交了表单
    }
    //-----二和三方法车不多,只是赋予提交功能函数的书写位置不同-------利用的是return false不提交true提交这个特性-------------------------------------------------
    function tijiao() {
        var nei = document.getElementById("nei2").value;
        if (nei == null || nei.trim() == '') {
            return false;
        } else {
            return true;
        }
    }
    //------------------------------------------------------
    function tijiao() {
        var nei = document.getElementById("nei3").value;
        if (nei == null || nei.trim() == '') {
            return false;
        } else {
            return true;
        }
    }
</script>

事件绑定方式

1.行内式
在标签中直接通过on+事件类型属性去绑定事件

   <div id="box" onclick="show()"></div>

2.内联式
（1）直接绑定匿名函数
（2）先定义函数，再去绑定

  var box = document.getElementById("box");
            box.onclick = function(){
                alert("直接绑定匿名函数");
            }

监听

addEventListener
语法：事件源.addEventListener(“事件类型”,事件处理函数);

 <script>
        window.onload = function() {
            var btn = document.querySelector("button");
            console.log(btn);
            btn.addEventListener('click', function() {
                alert("监听弹出..")
            })
        }
    </script>
/*<script>也可以这样写
        window.onload = function() {
            var btn = document.querySelector("button");
            console.log(btn);
            btn.addEventListener('click', dian)
            function dian() {
                alert("监听弹出..")
            }
        }
    </script>*/
</head>

<body>
    <button>点击我</button>
</body>

   addEventListener 第三个参数为true的话 表示捕获。 false 表示 冒泡。

1、事件冒泡

事件冒泡：事件会从最内层的元素开始发生，一直向上传播，直到document对象。

2、事件捕获

事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

    <style>
        #div1{
            background-color: #27ae60;
        }
        #div2{
            background-color: #e67e22;
        } 
        #div3{ 
            background-color: #e74c3c;
        }
        #div1,#div2,#div3,#other{
            padding: 50px;
        }
        
    </style>
    <script>
        window.onload  = function(){
            var boxs = document.getElementsByTagName("div");
            for (var i = 0; i < boxs.length; i++) {
                boxs[i].dataset.index = i+1;
                boxs[i].addEventListener('click',function(){
                   alert("div" + this.dataset.index);
                },false) //你写的监听默认是冒泡状态,可以改为true为捕获(从大范围到小)   
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

使用监听，可以给同一个事件类型绑定多个事件处理函数。
多个事件处理函数执行顺序是按照绑定顺序来的
先绑定先执行

<script>
        window.onload = function() {
            var btn = document.querySelector("button");
            console.log(btn);
            btn.addEventListener('click', ji);//先绑定,所以弹出2 输出时在 1的前面
            btn.addEventListener('click', dian);

            function dian() {
                console.log("监听弹出1..");
            }

            function ji() {
                console.log("监听弹出2..")
            }
        }
    </script>
</head>

<body>
    <button>点击我</button>
</body>

在IE低版本不支持
attachEvent()
IE低版本支持
语法：事件源.attachEvent(“on+事件类型”,事件处理函数);
多个事件处理函数的执行顺序是按照绑定顺序的倒序来的
先绑定后执行

事件解绑

对于非监听方式，可以直接将null赋值。(也叫事件解绑)

  box.onclick = function(){
               alert("您已成功充值1000万！");
                 box.onclick = null;//弹一次就会停止
             }
             box.onclick = null;//放外面一次都不会弹

对于监听方式绑定解绑方法
标准浏览器
removeEventListener(“事件类型”,事件处理函数)；
【注意】如果你想要解绑事件，那么你在绑定事件时，一定要将函数单独定义。使用函数名的方式去绑定事件。(匿名函数是没办法解绑的)

IE低版本
detachEvent(“on+事件类型”,事件处理函数);

  <script>
        window.onload = function(){
            var  box=document.querySelector("#box");
            function show() {
                alert("您已成功充值1000万！");
            }
            box.addEventListener("click",show);事件监听方式绑定
            box.removeEventListener("click",show);  解绑，一次都不执行    
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>

为事件绑定做兼容

        window.onload = function(){
        /**
            ele 事件源
            type 事件类型
            handler 事件处理函数
        */
            function on(ele,type,handler) {
                // 标准浏览器
                if (ele.addEventListener) {
                    ele.addEventListener(type,handler);//下面调用时加引号了,所以这里没加
                }else{
                    // IE浏览器
                    ele.attachEvent("on"+type,handler);
                }
            }
            function show(){
                alert("您已成功充值1000万！");
            }
            var box = document.getElementById("box");
            on(box,"click",show);//调用传参

        }
    </script>
</head>
<body>
    <div id="box">    </div>
</body>

获取下拉框的值练习

<body>
    城市:
    <select id="unform">
        <option value="-1">请选择</option>
        <option value="beijing">北京</option>
        <option value="-1">上海</option>
        <option>深圳</option>
    </select>
    <button id="sub">获取城市名</button>
</body>
<script>
    var unform = document.getElementById("unform"); //1~下拉框
    var sub = document.getElementById("sub"); //获取按钮
    sub.onclick = function() {
            //2~获取下拉框的所有下拉选项 必须是这个单词options
            var selections = unform.options;
            //console.log(selections);输出所有的下拉框option
            //3~获取下拉框被选中项的索引 必须是这个单词selectedIndex
            var index = unform.selectedIndex;
            //console.log(index); //输出比如北京是1
            /*-------演示和解这道题无关   var val = unform[index];
            console.log(val); 当我获取北京时 <option value="beijing">北京</option>    */

            //4~获取被选中项的值(注意:当通过option获取选中项的value属性值时,当有value属性时输出value值,当没有value属性时输出option的文本)
            var val = selections[index].value;
            // console.log(val);
            //5~获取被选中项的文本(上海/深圳直接是文本)
            var txt = selections[index].text;
            console.log(txt);
            //设置下拉选项默认被选中演示这里用不到
            //selections[2].selected = true;
        }
        /* //可以发现第二步可以不用要 //2~获取下拉框的所有下拉选项 必须是这个单词options
             var selections = unform.options;
            用这个也可以 var val = unform[index].value;
            var txt = unform[index].text;*/
</script>

江河i

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js事件、监听，鼠标事件，键盘，浏览器，表单

这里写目录标题js事件键盘事件浏览器事件表单事件事件绑定方式监听事件解绑封装事件绑定js事件1.什么是事件一件事情发生了，对其进行处理或者响应。2. 事件的三要素事件源，事件类型，事件处理比如：点击右上角的X，页面关闭。事件源：X，事件类型：点击事件处理：页面关闭。谁引发的后续事件，谁就是事件源。事件源：DOM节点（一般为元素节点）事件类型事件处理函数（代码块）事件类型：1.鼠标事件2.键盘事件3.浏览器事件4.表单事件1.鼠标事件click == 鼠标左键单击
复制链接

扫一扫