jQuery 事件

文章目录

1. jQuery 事件注册
- 单个事件注册
2. jQuery 事件处理
- 2.1 on() 绑定事件
- - (1) on() 方法优势1
  - (2) on() 方法优势2
  - (3) on() 方法优势3
  - *案例--发布微博
- 2.2 off() 解绑事件
- 2.3 one() 只触发事件一次
- 2.4 自动触发事件
3. jQuery 事件对象

1. jQuery 事件注册

单个事件注册

在这里插入图片描述
之前我们学习注册事件只能单个单个注册，如下面所示：

但是jQuery 事件处理让我们可以同时给某个元素同时绑定多个事件。

2. jQuery 事件处理

2.1 on() 绑定事件

在这里插入图片描述

(1) on() 方法优势1

在这里插入图片描述

(2) on() 方法优势2

在这里插入图片描述

(3) on() 方法优势3

在这里插入图片描述

*案例–发布微博

    <script src="../jQuery.min.js"></script><style>* {margin: 0;padding: 0}ul {list-style: none}.box {width: 600px;margin: 100px auto;border: 1px solid #000;padding: 20px;}textarea {width: 450px;height: 160px;outline: none;resize: none;}ul {width: 450px;padding-left: 80px;}ul li {line-height: 25px;border-bottom: 1px dashed #cccccc;display: none;}input {float: right;}ul li a {float: right;}</style><script>$(function () {// 1.点击小li 就动态创建一个小li 放入文本框中的内容和一个删除键 并且添加到ul 中$(".btn").on("click", function () {var li = $("<li></li>");li.html($(".txt").val() + "<a href='javaScript:;'>删除</a>");$("ul").append(li);li.slideDown();$(".txt").val("");});// 2. 点击删除按钮 可以删除当前的微博留言// $("ul a").click(function () {//     // 此时的click 不能给动态的li 注册事件// 因为上面创建li 事件是要在点击btn 的情况下 如果没有点击事件那么此处的事件也就绑定不上创建的li // });$("ul").on('click', 'a', function () {$(this).parent().slideUp(function () {$(this).remove();});})})</script>
</head><body><div class="box" id="weibo"><span>微博发布</span><textarea name="" class="txt" cols="30" rows="10"></textarea><button class="btn">发布</button><ul></ul></div>
</body>