百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

「jQuery-4」 事件和事件代理

xsobi 2024-12-03 05:00 1 浏览

八、jQuery事件

1. 常用事件

  • click() 鼠标单击
  • blur() 元素失去焦点
  • focus() 元素获得焦点
  • mouseover() 鼠标进入(进入子元素也触发)
  • mouseout() 鼠标离开(离开子元素也触发)
  • ready() DOM加载完成

示例代码:

<script>
    $(function(){
        var $li = $('.list li');
        var $button = $('#button1')
        var $text = $("#text1");
        var $div = $("#div1")

        //  鼠标点击
        $li.click(function(){            
            // this指的是当前发生事件的对象,但是它是一个原生js对象
            // this.style.background = 'red';

            // $(this) 指的是当前发生事件的jquery对象
            $(this).css({'background':'gold'});
            // 获取jquery对象的索引值,通过index() 方法
            alert($(this).index());
        });

        //  一般和按钮配合使用
        $button.click(function(){
            alert($text.val());
        });

        //  获取焦点
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

        //  失去焦点
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

        //  鼠标进入
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  鼠标离开
        $div.mouseout(function() {
            $(this).css({'background':'white'});
        });
    });
</script>

<div id="div1">
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="点击">
</div>

说明:

  • this指的是当前发生事件的对象,但是它是一个原生js对象
  • $(this) 指的是当前发生事件的jquery对象

九、事件代理

1. 事件代理介绍

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作

事件冒泡代码:

 <script>
    $(function(){

        var $div1 = $('#div1');
        var $div2 = $('#div2');

        $div1.click(function(){
            alert($(this).html());
        });

        $div2.click(function(){
            alert($(this).html());
        });
    });
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>

说明:

当点击子元素div,它的点击事件会向它父元素传递,也会触发了父元素的点击事件,这就是事件冒泡。

2. 事件代理的使用

一般绑定事件的写法:

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件代理的写法

$(function(){
    $list = $('#list');
    // 父元素ul 来代理 子元素li的点击事件
    $list.delegate('li', 'click', function() {
        // $(this)表示当前点击的子元素对象
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

delegate方法参数说明:

delegate(childSelector,event,function)

  • childSelector: 子元素的选择器
  • event: 事件名称,比如: 'click'
  • function: 当事件触发执行的函数

相关推荐

Android Studio 导入项目出现缺失解决

很多朋友安装好Androidstudio后准备试一把,但是导入项目的时候出现错误Cannotfindfile"...../project_name/settings.jar"这个错误是因为导入...

首个安卓12开发者预览版发布:隐私保护升级、更新UI、优化性能

来源:环球网2月20日消息,据engadget报道,来到二月,惯例也是谷歌发布安卓12开发者预览版的时候,以便于让开发者提前查看下一版安卓系统的新属性。谷歌工程副总裁戴夫·波尔克(DaveBurke...

推荐几个非常有用的开发工具之Android Studio插件

我们都知道Eclipse开发Android将在今年年底google不再继续提供相应的开发支持,转而开始强烈发展AndroidStudio,现在我就分享几款能帮助团队提升工作效率的几个Android...

Android Studio下的应用性能优化总结-内存优化

上一篇文章总结的布局优化的问题,如果对布局优化不是很熟悉的,可以看一下AndroidStudido下的应用性能优化总结–布局优化,这周一直筹划总结一下内存优化的问题,因为现在对于应用优化的文章很...

安卓开发之环境搭建「图文教程」 安卓应用开发环境搭建

安卓(Android)是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。接下来开始第一个安卓应用吧!需要用到的软...

Android APP性能测试上篇--启动时长、内存

如图所示,列出了目前app主要的一些性能指标,以及对应使用的测试工具。普遍的app性能测试,主要是以下几类:启动时长、内存、cpu、FPS(app使用的流畅度)、GPU过度渲染、耗电、耗流、cras...

AndroidStudio下的依赖管理 安卓依赖管理

在开发中用第三方库是很常见的事,如何在AndroidStudio下管理这些依赖呢?这就是这篇文章的目的。目录Maven/Ivy仓库依赖Module依赖aar文件依赖jar文件依赖例子完整代码一、Mav...

基于Android的师生学习交流平台:Android课程设计

基于Android的师生学习交流平台(Androidstudio毕业设计,Android课程设计)一、项目介绍系统分为学习资料,作业,师生交流,个人资料四大模块(1)学生端:新用户需要填写真实姓名,...

Android Studio 贴士 - 综述#3 android studios

(点击上方公号,可快速关注)英文原文:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-3注:文中链接皆为国外链接...

Android 11 Developer Preview首次更新发布:修复诸多问题

此前在2月19日,谷歌放出了Android11DeveloperPreview(安卓11开发者预览版),并表示Beta版本将于5月份推出,最终发行版将于2020年Q3面世。如今距离Android...

Android12 支持无线usb调试应用 安卓 usb调试

背景在android12版本中已经支持wifiusb调试了,再也不用查数据线了,下面主要说下连接步骤:1.在开发者启动无线调试...

InstantRun原理--深度剖析AndroidStudio2.0

http://crash.163.com/#news/!newsId=8推荐理由AndroidStudio2.0开始支持InstantRun特性,使得在开发过程中能快速将代码变化更新到设...

集成开发环境Android Studio整合Gemini:可生成、补全代码

IT之家4月9日消息,谷歌近日发布新闻稿,宣布在AndroidStudio中集成Gemini1.0Pro,从而帮助开发人员更快、更好地写出代码。谷歌表示目前相关整合仍处于预览阶段,...

Android studio 最新版本下Gradle的一些配置

当我们把Androidstudio版本更新到Bumblebee版本时,我们会发现创建新的项目时,有了一些改变。项目根目录下面的build.gradle变了:旧版本下的是这样子的:setting.gr...

Android Studio最新版下载安装:Android Studio模拟器怎么启动

目录第一部分:AndroidStudio软件介绍...