JavaScript 事件处理

最新推荐文章于 2023-01-11 21:15:28 发布
最新推荐文章于 2023-01-11 21:15:28 发布
阅读量802 收藏 8
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47906106/article/details/122010760
版权

事件处理

事件
发生在HTML元素上的事情，可以是用户行为，也可以是浏览器的行为

  • 用户点击了某个HTML元素
  • 用户将鼠标移动到某个HTML元素上
  • 用户输入数据时光标离开
  • 页面加载完成

事件源：时间触发的源头，即触发事件的元素，如按钮，输入框，超链接
事件对象：当一个事件发生时，这个事件相关的详细信息会被保存到一个对象中，称为event对象
事件监听：监听事件的发生，绑定事件函数，当事件触发后执行该事件函数，即回调函数

绑定事件
三种方式：

  • 静态绑定，通过为标签的事件属性赋值
<input type="button" value="按钮" onclick="fn()">
  • 动态绑定，通过为DOM对象的事件属性赋值
    <script>
        var btn = document.getElementById("btn")
        btn.onclick = function(){
            console.log('动态绑定')
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">
</body>
  • 动态绑定 通过DOM对象进行事件监听，使用addEventistene（“时间名”，回调函数）
    <script>
        var btn = document.getElementById("btn")
        btn.addEventListener ('click' function(){
            console.log('动态绑定')
        })
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">
</body>

事件对象

    <script>
        window.onload=function(){
            var btn = document.getElementById("btn")
            btn.onclick=function(event){ //事件触发时会自动为回调函数传入一个参数，表示event事件对象
                console.log(event,typeof event,event,type)
                console.log(this==event.target) //this表示事件源
            }
        }
       
        function f1(e) {
            console.log(e)
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">
     //静态事件绑定 需要在绑定事件回调函数时接收时间对象参数
    <button onclick="f1(event)">click me</button>
</body>

注意
可以通过事件回调函数的第一个参数获取事件对象event

target 事件的目标元素，即事件源
type 事件类型
timestamp 事件生成的日期和时间
clientX 当事件被触发时，鼠标指针的水平坐标
clientY 当事件被触发时，鼠标指针的垂直坐标

在这里插入图片描述

鼠标事件

时间名描述
onclick鼠标单击
ondbclick鼠标双击
onmouseover鼠标移到某元素之上
onmouseout鼠标从某元素上移开
onmouseup鼠标按键被松开
onmousedown鼠标按键被按下
onmousemove鼠标被移动
    <script>
        window.onload = function() {
            var btn = document.getElementById('btn')
                //    btn.onclick=function(){
            btn.onmouseover = function() {
                console.log('点击事件')
            }
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn">

</body>

键盘事件

事件名描述
onkeydown某个键盘的健被按下
onkeyup某个键盘的键被松开
onkeypress某个键盘的键被按下去且松开
    <script>
        window.onload = function() {
            var username = document.getElementById('username')
            username.onkeydown = function() {
                console.log('111')
            }
            username.onkeypress = function() {
                console.log('222')
            }
            username.onkeyup = function() {
                console.log('333')
            }
            // 获取事件对象
            username.onkeyup = function(e) {
                console.log(e)
            }

        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn"> 用户名：
    <input type="text" id="username">

</body>

在这里插入图片描述
示例
按回车的时候再控制台输出

    <script>
        window.onload = function() {
            var username = document.getElementById('username')
            username.onkeyup = function(e) {
                //按键码
                if (e.keyCode == 13) {
                    console.log(e.keyCode)
                }
            }
        }
    </script>
</head>

<body>
    <input type="button" value="按钮" id="btn"> 用户名：
    <input type="text" id="username">

</body>

表单事件

事件名描述
onfocus元素获得焦点
onblur元素失去焦点
onchange域的内容发生改变，一般用于文件选择器和下拉列表
onselect文本内容被选中
onsubmit表单提交时触发，回调函数返回true表示允许表单提交，返回false表示阻止表单提交

onfocus onblur
示例

    <script>
        window.onload = function() {
            // var username = document.getElementById('username')
            // username.onfocus = function() {
            //     username.classList.add('border')
            // }

            document.getElementById('username').onfocus=function(){
                //this 指事件源
                this.classList.add('border')
            }
            username.onblur = function() {
                username.classList.remove('border')
            }
        }
    </script>
    <style>
        #username {
            outline: 0;
        }
        
        .border {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <input type="button" value="按钮" id="btn"> 用户名：
    <input type="text" id="username">

</body>

在这里插入图片描述
点击输入框获取焦点，离开输入框失去焦点，进而触发事件，比较常用

onchange

<script>
        window.onload = function() {
            document.getElementById('pro').onchange = function() {
                console.log(this.checked)
            }
        }
    </script>
</head>

<body>
    爱好：<input type="checkbox" name="hobby" id="pro" value="pro" checked>

</body>

在这里插入图片描述

在这里插入图片描述

示例2
头像设置

    <script>
        window.onload = function() {
            document.getElementById('pro').onchange = function() {
                // console.log(this.files[0]) //获取选择的文件数据
                                                                //可以自动获取用户更换图片的路径
                document.getElementById('image').src = window.URL.createObjectURL(this.files[0])
            }
        }
    </script>
    <style>
        #image {
            width: 120px;
            height: 120px;
        }
        
        #pro {
            display: none;
        }
    </style>
</head>

<body>
    头像：<input type="file" id="pro" multiple>
    <label for="pro">
        <img src="../images/baidu.png" id="image">
    </label>
</body>

在这里插入图片描述
默认的baidu图片换成当前的1

onselect
文本选中


    <style>
        #email {
            outline: 0;
        }
        
        .border {
            border: 1px solid red;
        }
    </style>
    <script>
        window.onload = function() {
            document.getElementById('email').onselect = function() {
                this.classList.add('border')
            }
        }
    </script>
</head>

<body>
    邮箱：<input type="text" id="email" value="xxx.com">
</body>

在这里插入图片描述

onsubmit

    <script>
        window.onload = function() {
            document.getElementById('frm').onsubmit = function() {
                //判断表单内容是否符合要求
                var email = document.getElementById('email').value
                if (email == '') {
                    return false
                }
                return true
            }
        }
    </script>
<body>
    <form action="" id="frm">
        用户名: <input type="text" id="username"><br> 邮箱：
        <input type="text" id="email" value="xxx.com" name="email"><br>
        <input type="submit" value="提交">
    </form>

</body>

在这里插入图片描述

案例：实现复选框

    <script>
        window.onload = function() {
            //实现全选和取消全选效果
            var all = document.getElementById('all');
            all.onchange = function() {
                    var items = document.getElementsByName('item')
                    for (var item of items) {
                        // 点击全选按钮，将时间源的改变属性赋值给其他复选框
                        item.checked = this.checked;
                    }
                }
                // 实现当选中下面所有复选框时自动选中全选
            var items = document.getElementsByName('item')
            for (var item of items) {
                item.onchange = function() {
                    //先默认选中全选
                    all.checked = true
                        //判断只要有一个没选中，则不勾选全选
                    for (var ele of items) {
                        if (!ele.checked) {
                            all.checked = false
                            break
                        }
                    }

                }
            }
        }
    </script>
</head>

<body>
    <table id="mytal">
        <thead>
            <tr>
                <th>全选 <input type="checkbox" id="all"></th>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>1</td>
                <td>jibu</td>
                <td>age</td>
                <td>male</td>
                <td>eat</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>1</td>
                <td>jibu</td>
                <td>age</td>
                <td>male</td>
                <td>eat</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>1</td>
                <td>jibu</td>
                <td>age</td>
                <td>male</td>
                <td>eat</td>
            </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

事件操作

事件流
概念：当一个HTML元素产生事件时，该事件会在当前元素与根元素之间按特定的顺序传播，所有经过的节点都会收到该事件并执行，这个传播过程就是DOM事件流
分类：事件冒泡，事件捕获。

  • 事件冒泡：当一个元素上的事件被触发时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程被称为事件冒泡(默认方式)
  • 事件捕获：当一个元素上的事件被触发时，事件从页面根元素开始，往下直到事件目标元素，这一过程被称为事件捕获

事件冒泡示例：


    <script>
        function test(name) {
            console.log(name)

        }
    </script>

    <style>
        div {
            border: 1px solid black;
        }
        
        .div1 {
            width: 200px;
            height: 200px;
        }
        
        .div2 {
            width: 150px;
            height: 150px;
        }
        
        .div3 {
            width: 100px;
            height: 100px;
        }
    </style>

</head>

<body>
    <div class="div1" onclick="test('div1')"> div1
        <div class="div2" onclick="test('div2')"> div2
            <div class="div3" onclick="test('div3')">div3 </div>
        </div>
    </div>
</body>

在这里插入图片描述
事件捕获


    <script>
        function $(id) {
            return document.getElementById(id)
        }

        window.onload = function() {
            $('div1').addEventListener('click', function() {
                    console.log('div1')
                }, true) //第三个参数为true表示采用事件捕获，默认为false表示事件冒泡

            $('div2').addEventListener('click', function() {
                console.log('div2')
            }, true)

            $('div3').addEventListener('click', function() {
                console.log('div3')
            }, true)
        }
    </script>

    <style>
        div {
            border: 1px solid black;
        }
        
        #div1 {
            width: 200px;
            height: 200px;
        }
        
        #div2 {
            width: 150px;
            height: 150px;
        }
        
        #div3 {
            width: 100px;
            height: 100px;
        }
    </style>

</head>

<body>
    <div id="div1"> div1
        <div id="div2"> div2
            <div id="div3">div3 </div>
        </div>
    </div>
</body>

在这里插入图片描述

阻止事件冒泡

<script>
        function $(id) {
            return document.getElementById(id)
        }

        window.onload = function() {
            $('div1').addEventListener('click', function() {
                    console.log('div1')
                }, false) //第三个参数为true表示采用事件捕获，默认为false表示事件冒泡

            $('div2').addEventListener('click', function(event) {
                console.log('div2')
                event.stopPropagation(); //阻止事件冒泡
            }, false)

            $('div3').addEventListener('click', function() {
                console.log('div3')
            }, false)
        }
    </script>

    <style>
        div {
            border: 1px solid black;
        }
        
        #div1 {
            width: 200px;
            height: 200px;
        }
        
        #div2 {
            width: 150px;
            height: 150px;
        }
        
        #div3 {
            width: 100px;
            height: 100px;
        }
    </style>

</head>

<body>
    <div id="div1"> div1
        <div id="div2"> div2
            <div id="div3">div3 </div>
        </div>
    </div>
</body>

在这里插入图片描述
点击div3，执行到div2停止，不让其冒泡

事件代理/事件委托
概念：利用事件冒泡/事件捕获机制，通过给父元素绑定事件，从而实现对所有子元素的事件管理，无需为每个子元素绑定事件
优点：
1）减少事件注册，降低内存占有
2）新增元素时实现动态绑定事件

    <script>
        window.onload = function() {
            var lis = document.querySelectorAll('li')
            for (var li of lis) {
                li.onclick = function() {
                    console.log(this)
                }
            }
        }

        function add() {
            var li = document.createElement('li')
            li.innerText = 'li5'
            document.querySelector('ul').appendChild(li)
        }
    </script>
</head>

<body>
    <button onclick="add()">添加li</button>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</body>

在这里插入图片描述
新增的元素需要手动绑事件

  <script>
        window.onload = function() {
            // var lis = document.querySelectorAll('li')
            // for (var li of lis) {
            //     li.onclick = function() {
            //         console.log(this)
            //     }
            // }
            // 这里的e指的是点击的li而非ul
            document.querySelector('ul').onclick = function(e) {
                console.log(e.target.innerText)
            }
        }

        function add() {
            var li = document.createElement('li')
            li.innerText = 'li5'
                // li.onclick = function() {
                //     console.log(this)
                // }
            document.querySelector('ul').appendChild(li)
        }
    </script>
</head>

<body>
    <button onclick="add()">添加li</button>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</body>

在这里插入图片描述
利用事件冒泡原理，给其父元素绑定事件，如此不用给子元素单个绑定事件

这里需要注意一点：之前的理解是this==e.target,但是在这里不是，这里this还是指事件源ul，而e代表的是点击的元素

事件默认行为
概念：当一个事件发生时浏览器自己会默认做的失去，如：点击连接时默认会跳转，邮件点击时默认会弹出菜单
阻止事件的默认行为：e.preventDefault()

    <script>
        function print(e) {
            console.log(111)
            e.preventDefault(); //阻止事件默认行为

        }
    </script>
</head>

<body>
    <button oncontextmenu="print(event)">右键点击</button>
    <br>
    <a href="https://www.baidu.com" onclick="print(event)">百度</a>
    
    <a href="javascript:print(event)" onclick="print(event)">百度</a>
</body>

在这里插入图片描述
上面的示例:超链接默认会跳转，这里阻止其默认行为

季布，
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端学习（886）：常用的键盘事件
歌谣的博客
04-18 540
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
JAVAWEB JavaScript 事件 onload onclick onblur onchange onsubmit
chengqingshihuishui的博客
09-02 702
一、onload事件： 页面加载完成后，自动触发的操作，常用于js代码初始化操作 1、静态写法 写法一：直接在html元素标签里面写 <body onload="alert('静态注册onload事件')"> <!--一般只有一句代码才直接在onload后面写代码 --> ........... </body> 写法二： 写在<head>元素之间, 多代码语句写法 <head> ............ <script ..
通过经典案例教你学Javascript
04-14
通过案例，讲解Javascript的各种语法，API和使用方法。
JavaScript事件处理
lesileqin的博客
01-05 4709
文章目录一、事件与事件处理概述（一）JavaScript常用事件（二）事件的调用1、在HTML中调用2、在JavaScript中调用（三）事件对象二、表单相关事件（一）获得焦点与失去焦点事件（二）失去焦点内容改变事件（三）表单提交与重置事件三、鼠标和键盘事件（一）鼠标单击事件（二）鼠标按下和松开事件（三）鼠标移入和移出事件（四）鼠标移动事件（五）键盘事件四、页面事件（一）加载与卸载事件（二）页面大...
javascript事件处理
zhuyooong的专栏
06-19 1589
1、使用事件有以下多种途径： 使用传统的XHTML事件处理器属性。如。 被关联至某个对象。如document.getElementById("myForm").onsubmit = myFunction; 使用诸如IE浏览器的attachEvent()这样的私有方法。 使用DOM2方法。如使用一个结点的addEventListener()方法，来设
JavaScript 事件处理 事件绑定 示例代码
06-27
JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件...
浅谈 javascript 事件处理
10-24
本文向大家简单介绍了javascript的事件处理机制，从事件源，事件操作到事件处理程序都做了简单介绍，并给出了部分示例，这里推荐给大家。
javascript 事件处理示例分享
10-24
主要介绍了javascript 事件处理示例分享,需要的朋友可以参考下
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码
06-27
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...
JavaScript 事件处理 二级菜单级联 示例代码
最新发布
06-27
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
JavaScript之事件
weixin_43154931的博客
09-26 133
事件流 事件捕获 事件冒泡 DOM事件流 事件处理程序 HTML事件处理程序 DOM3级实例 DOM0级事件处理程序 DOM2级事件处理程序 IE事件处理程序 跨浏览器事件处理程序 ...
Javascript事件处理程序的3种方式
s13166803785的博客
01-11 246
既然产生了事件，我们就要去处理它，据我了解Javascript事件处理程序主要有3种方式： 1、HTML事件处理程序 即我们直接在HTML代码中添加事件处理程序，如下面这段代码： <input id="btn1" value="按钮" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML添加事件处理"); } </script> 从上面的代
Javascript 事件处理
u011277123的博客
11-16 224
仇小超 2016-11-14 23:20 Javascript 事件处理 1. HTML事件处理 就是嵌入到html元素中的事件处理，如： 按钮 这种事件处理的可扩展性是不好的，且无法为同一DOM元素绑定多个事件。 2. DOM0级事件处理 即可以写在script标签中，也可以写在js文件中的事件处理方法，如： var btn = document.getE
js之事件编程
weixin_57219176的博客
09-03 227
事件编程分类
javaScript中的键盘事件
weixin_66990569的博客
10-11 1428
键盘上的某个键被按下时触发。keyCode返回按键在ASCII码对照表中的值，利用keyCode可判断键盘上的哪个键被按下
javascript事件编程
u011526599的专栏
05-15 4794
javascript事件编程初探
JS中DOM文档对象模型操作实例
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
07-09 777
一、DOM DOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。 Document 文档 – 文档表示的就是整个的HTML网页文档 Object对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 Model模型 – 使用模型来表示对象之间的关系，这样方便我...
常用的键盘事件
DF_jie的博客
11-24 1072
键盘事件 键盘事件 事件案例： <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 docu
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

季布，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值