[JQuery学习笔记]jQuery事件导读

el/2024/6/24 19:27:45

jQuery事件导读

  • 写在前面
  • jQuery事件注册
    • 单个事件注册
  • jQuery事件处理
    • 事件处理on()绑定事件
      • on()方法优势1
      • on()方法优势2
      • on()方法优势3
    • 案例:发布微博案例
    • 事件处理off()解绑事件
    • 自动触发事件trigger()
  • jQuery事件对象

写在前面

  • 能够说出4种常见的注册事件
  • 能够说出on绑定事件的优势
  • 能够说出jQuery事件委派的优点以及方式
  • 能够说出绑定事件与解绑事件

jQuery事件注册

单个事件注册

语法:element.事件(function(){})

$("div").click(function(){ 事件处理程序 })

其他事件和原生基本一致
比如mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等

jQuery事件处理

事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:element.on(event,[selector],fn)

  • 1.events:一个或多个用空格分隔的事件类型,如"click"或"keydown"
  • 2.selector:元素的子元素选择器
  • 3.fn回调函数即绑定在元素身上的侦听函数
            $("div").on({mouseenter: function() {$(this).css("background", "skyblue");},click: function() {$(this).css("background", "purple");},mouseleave: function() {$(this).css("background", "blue");}});

on()方法优势1

可以绑定多个事件,多个处理事件处理程序

如果处理事件相同

            $("div").on("mouseenter mouseleave", function() {$(this).toggleClass("current");});

on()方法优势2

可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

            $("ul").on("click", "li", function() {alert(11);});// click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li

在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on代替他们。

on()方法优势3

动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。

            $("ol").on("click", "li", function() {alert(11);})var li = $("<li>我是后来创建的</li>");$("ol").append(li);

案例:发布微博案例

  • 1.点击发布按钮,动态创建一个小li,放入文本框的内容和删除按钮,并且添加到ul中。
  • 2.点击的删除按钮,可以删除当前的微博留言
        $(function() {// 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中$(".btn").on("click", function() {var li = $("<li></li>");li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");$("ul").prepend(li);li.slideDown();$(".txt").val("");})// 2.点击的删除按钮,可以删除当前的微博留言li// $("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件//     alert(11);// })// on可以给动态创建的元素绑定事件$("ul").on("click", "a", function() {$(this).parent().slideUp(function() {$(this).remove();});})})

事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件 后面的foo是侦听函数名
$("ul").off("click","li") //解绑事件委托

如果有的事件只想触发一次,可以使用one()来绑定事件

自动触发事件trigger()

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致,可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

    1. 元素.事件()会触发元素的默认行为
    1. 元素.trigger(“事件”)会触发元素的默认行为
    1. 元素.triggerHandler(“事件”) 就是不会触发元素的默认行为

jQuery事件对象

事件被触发,就会有事件对象的产生。
阻止默认行为:event.preventDefault()或者return false
阻止冒泡:event.stopPropagation()

        $(function() {$(document).on("click", function() {console.log("点击了document");})$("div").on("click", function(event) {// console.log(event);console.log("点击了div");event.stopPropagation();})})

http://www.ngui.cc/el/3573939.html

相关文章

[湖南大学程序设计实训训练作业二]1.字符串反转2(vector+reverse或者stack)

1.字符串反转2【问题描述】【输入形式】【输出形式】【样例输入】【样例输出】题解思路代码1代码2【问题描述】 给定一个句子&#xff08;只包含字母和空格&#xff09;&#xff0c; 将句子中的单词位置反转&#xff0c;单词用空格分割, 单词之间只有一个空格&#xff0c;前后…

[湖南大学程序设计实训训练作业二]2.487-3279(次数问题用map)

2.487-3279【问题描述】【输入形式】【输出形式】【样例输入】【样例输出】题解思路代码【问题描述】 每个人都喜欢有令人难忘的电话号码。要想让电话号码变得令人难忘的一种方法是拼出一个令人难忘的单词或短语。例如&#xff0c;你可以拨打滑铁卢大学的电话&#xff0c;拨打…

[湖南大学程序设计实训训练作业二]3.缺席考试的是谁?(map过一半,需用set优化)

3.缺席考试的是谁&#xff1f;【问题描述】【输入形式】【输出形式】【样例输入】【样例输出】题解思路1思路2代码【问题描述】 程序设计考试结束了&#xff0c;传来个不好的消息&#xff1a;有一个学生没参加考试!需要尽快知道缺席考试的人是谁&#xff0c;以便尽快做出处理。…

[湖南大学程序设计实训训练作业二]5.点球大战

5.点球大战【问题描述】【输入形式】【输出形式】【样例输入】【样例输出】题解思路代码【问题描述】 在足球比赛中&#xff0c;有不少赛事&#xff0c;例如世界杯淘汰赛和欧洲冠军联赛淘汰赛中&#xff0c;当比赛双方经过正规比赛和加时赛之后仍然不分胜负时&#xff0c;需要…

[湖南大学程序设计实训训练作业二]6.飞行棋(递归模拟)

6.飞行棋【问题描述】【输入形式】【样例输入】【样例输出】题解思路代码【问题描述】 大家当年一定都下过飞行棋吧。现在Lele和Yueyue要下的棋和这个很相似&#xff0c;只是更简单一点而已。 棋盘由N个格子组成&#xff0c;分别标记为第0格到第N-1格。格子分为两种&#xff0…

[湖南大学程序设计实训训练作业二]7.棋盘

7.棋盘【问题描述】【输入形式】【输出形式】【样例输入】【样例输出】题解思路代码【问题描述】 棋盘是指一个行和列编号从1~N的NxN的二进制矩阵&#xff0c;当行号和列号之和为偶数时该矩阵对应位置为黑色的(1)&#xff0c;否则为白色的(0)。以下图示为N1、2、3时的棋盘。 …

[湖南大学程序设计实训训练作业二]8.Engine-字符串(字符串切割+结构体map存储+切割vector查询)

8.Engine-字符串写在前面【问题描述】【输入形式】【输出形式】【样例输入1】【样例输出1】【样例输入2】【样例输出2】题解思路代码写在前面 这题真的是支棱了一个上午&#xff0c;可恶啊&#xff0c;中间出了些简单的bug但是找了好久&#xff0c;可恶啊&#xff01;&#xf…

[湖南大学程序设计实训训练作业二]9.字符串压缩(贪心递归模拟)

9.字符串压缩【问题描述】【输入形式】【输出形式】【样例输入1】【样例输出1】【样例输入2】【样例输出2】【样例输入3】【样例输出3】题解思路代码【问题描述】 给定一个由n个小写字母组成的字符串s&#xff0c;需要使用最少数量的钱币来压缩它。 压缩该字符串&#xff0c;…

[湖南大学程序设计实训训练作业二]10.拼写检查(正难则反!)

10.拼写检查【问题描述】【输入形式】【输出形式】【样例输入】【样例输出】题解思路代码【问题描述】 作为一个新的拼写检查程序开发团队的成员&#xff0c;您将编写一个模块&#xff0c;用已知的所有形式正确的词典来检查给定单词的正确性。 如果字典中没有这个词&#xff0…

[湖南大学程序设计实训训练作业二]11.最小的k个数(认识set)

11.最小的k个数【问题描述】【输入形式】【输出形式】【样例输入】【样例输出】【Tips】题解思路代码【问题描述】 输入n个整数&#xff0c;找出其中最小的k&#xff08;k<n&#xff09;个不同数。例如输入4,5,1,6,1,7,3,8这8个数字&#xff0c;则最小的4个数字是1,3,4,5。…