8.jQuery事件用法

最新推荐文章于 2023-06-30 16:52:47 发布

Suyuoa

最新推荐文章于 2023-06-30 16:52:47 发布

阅读量619

点赞数

分类专栏： jQuery笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/potato123232/article/details/126993672

版权

jQuery笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1 事件注册

1.1 单个事件注册

1.2 多个事件注册 element.on()

1.2.1 对象作为参数传入

1.2.2 按照参数要求依次传入

1.2.3 参数selector

1.2.4 on可以绑定事件到动态创建的元素

4 触发一次后自动解绑 element.one()

5 自动触发事件

5.1 element.事件名()

5.2 element.trigger()

5.3 element.triggerHandler()

6 事件对象

1 事件注册

1.1 单个事件注册

单个事件与原生JS的注册方式类似

1.2 多个事件注册 element.on()

在之前的版本会有bind(),live(),delegate()这些方法来处理事件绑定或事件委派，在最新版本中我们可以使用on来代替这些方法

1.2.1 对象作为参数传入

我们现在想让一个盒子点击的时候变为紫色，鼠标进入的时候变为蓝色

打开后是这样的

鼠标进入后

点击后

1.2.2 按照参数要求依次传入

如果两个事件使用相同的事件函数可以简写，比如鼠标离开事件与点击事件都会让盒子变为紫色

当鼠标进入后再出来会变成紫色

当鼠标进去后点击一下也会变成紫色

1.2.3 参数selector

现在我们有一个section，里面放了两个div一个p

打开后是这样的

点击最外面的section，可以让section的颜色变为紫色，但点击其他元素是无效的

现在我们加入参数selector，我们用selector选出element的子元素

打开页面后点击两个div生效，点击section与p不生效

用这种方式绑定事件称为事件委托

1.2.4 on可以绑定事件到动态创建的元素

用click无法给还没有的元素注册事件

打开后点击盒子无效

用on的selector可以

点击后盒子会变色

2 留言板案例

可以留言一些内容

点击删除该条留言

删除后不影响新的留言发布

代码

<!DOCTYPE html>
<html lang="en">
<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>
        section {
            position: relative;
            width:500px;
            height: 500px;
            border:2px solid black;
            margin: 100px auto;
        }
        textarea {
            position: absolute;
            left:50px;
            width:350px;
            height:200px;
            margin: 30px auto;
        }
        button {
            position:absolute;
            right:20px;
            bottom:255px;
        }
        ul {
            position:absolute;
            top:250px;
            width:100%;
        }
        li {
            display: none;
            position: relative;
            width:100%;
        }
        a {
            position: absolute;
            right:100px;
        }
    </style>
</head>
<body>
    <section>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul>
            
        </ul>
    </section>
</body>
<script src="../jquery-3.6.1.min.js"></script>
<script>
    $('ul').on('click','li a',function() {
        $(this).parent().stop().slideUp(function() {$(this).remove()})
    })

    $('button').click(function() {
        if ($('textarea').val()) {
            li = $('<li></li>')
            li.text($('textarea').val())
            li_a = $('<a href="javascript:void(0)">删除</a>')
            li.append(li_a)
            $('ul').prepend(li)
            li.stop().slideDown()
            $('textarea').val('')
        }
    })
</script>
</html>

3 解绑事件 element.off()

3.1 解除所有事件

如果参数为空就会解绑指定元素的所有事件

打开后无论是鼠标进入还是点击都不会变色

3.2 解除任意个事件

也可以这样写

移动进去与点击同样没有效果

可以解绑单个，比如我现在要取消mouseenter事件

将鼠标移动进盒子不会改变颜色

点击后会改变颜色

3.3 解除事件委托

也可以解除on中的selector事件

点击li后不会有什么改变

当父元素中有多个事件，多个子元素，你想取消一部分的时候可以这样写

这样点击li后也是无效的

4 触发一次后自动解绑 element.one()

one()的参数与on()的参数相同

点击第一次的时候会触发

点击第二次的时候不会触发

5 自动触发事件

5.1 element.事件名()

这样打开页面就会触发指定的事件

5.2 element.trigger()

参数为事件名

5.3 element.triggerHandler()

element.trigger()与element.事件名()都会触发元素的默认行为，比如input的foucs事件默认行为是在input内光标闪烁

如果使用triggerHandler()就只会触发事件函数

没有光标直接打字就打不进input

6 事件对象

在jQuery中同样有事件对象，且事件对象的一些属性与原生JS一致 20. 事件的使用方式_Suyuoa的博客-CSDN博客

还有一些常用属性我简单介绍一下

event.preventDefault() 或return false 阻止默认行为
event.stopPropagation() 阻止冒泡

Suyuoa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
8.jQuery事件用法

element.trigger()与element.事件名()都会触发元素的默认行为，比如input的foucs事件默认行为是在input内光标闪烁。点击最外面的section，可以让section的颜色变为紫色，但点击其他元素是无效的。如果两个事件使用相同的事件函数可以简写，比如鼠标离开事件与点击事件都会让盒子变为紫色。当父元素中有多个事件，多个子元素，你想取消一部分的时候可以这样写。我们现在想让一个盒子点击的时候变为紫色，鼠标进入的时候变为蓝色。one()的参数与on()的参数相同。
复制链接

扫一扫