[jQuery-4] 事件和事件代理

￡神魔★判官ぃ 2022-11-26 06:52 172阅读 0赞

## 八、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: 当事件触发执行的函数

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关【JQuery_事件】事件_语法_键盘事件_鼠标事件_

0.事件 0.0 事件四要素 1. 事件源 2. 事件绑定处理函数 3. 查找修改元素 4. 修改元素 0.0.0事件源 document

ゞ浴缸里的玫瑰/ 2024年04月03日 10:16/ 0 赞/ 94 阅读

相关 JS事件冒泡和事件代理（委托）

事件冒泡当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到window <!DOCTYPE html> <html lang="en">

桃扇骨/ 2022年12月13日 12:51/ 0 赞/ 266 阅读

相关 [jQuery-4] 事件和事件代理

八、jQuery事件 1. 常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover

￡神魔★判官ぃ/ 2022年11月26日 06:52/ 0 赞/ 173 阅读

相关 Jquery 事件

$(document).ready(function () { $('food-0').on('click', function () {

骑猪看日落/ 2022年08月02日 04:39/ 0 赞/ 219 阅读

相关读懂jquery事件代理

[读jQuery之十六（事件代理）][jQuery] 事件代理的实现原理很简单：利用浏览器中事件的冒泡（event bubbling）和事件源（target || src

╰+攻爆jí腚メ/ 2022年07月15日 12:10/ 0 赞/ 146 阅读

相关读懂jquery事件代理

[读jQuery之十六（事件代理）][jQuery] 事件代理的实现原理很简单：利用浏览器中事件的冒泡（event bubbling）和事件源（target || src

青旅半醒/ 2022年07月15日 12:10/ 0 赞/ 178 阅读

相关 javascript-委托事件(事件代理)

1.什么是委托事件？委托事件也叫做事件代理意思是一样的,就好像精灵图也叫雪碧图!!!只是不同叫法. 试想一下:假设公司里每次收快递的时候员工都跑到公司门口去收自己

我就是我/ 2022年06月12日 09:38/ 0 赞/ 290 阅读

相关 jQuery阻止冒泡事件和默认事件

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行

左手的ㄟ右手/ 2022年06月02日 00:09/ 0 赞/ 299 阅读

相关 js事件委托（事件代理）

[js中的事件委托或是事件代理详解][js] 起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，

「爱情、让人受尽委屈。」/ 2022年05月21日 13:30/ 0 赞/ 267 阅读

相关 javascript事件委托和jquery事件委托

javascript事件委托和jquery事件委托初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查...

朱雀/ 2020年07月02日 07:28/ 0 赞/ 1100 阅读