jQuery事件发展历程

事件发展历程:从简单事件,到bind,到委托事件,到on事件绑定

    //简单事件,给自己注册的事件
$("div").click(function () {
alert("哈哈");
});
      //bind方式
$("p").bind({
click: function () {
alert("呵呵")
},
mouseenter: function () {
alert("哈哈")
}
});

委托事件原理

      //delegate:代理,委托
//1. 给父元素注册委托事件,最终还是有子元素来执行
//2. 动态创建的也能有事件 :缺点:只能注册委托事件
      // 要给div注册一个委托事件,但是最终不是由执行,而是有p执行
// 第一个参数:selector:事件最终由谁来执行。
// 第二个参数:事件的类型
// 第三个参数:函数,要做什么
      $("#box").delegate("p", "click", function () {
//alert("呵呵");
console.log(this);
});
 
 

jQuery---委托事件原理的更多相关文章

  1. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  2. jQuery之事件和批量操作、事件委托示例

    一.常用事件 click(function(){...}) // 点击时触发 focus(function(){...}) // 获得焦点触发 blur(function(){...}) // 失去焦 ...

  3. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  4. JS与Jquery的事件委托

    参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  5. 理解jquery on 委托事件的机制

    前两天做了一个点击任意位置,都能关闭菜单的功能,因为菜单里面的每一个a,的点击事件都是用on绑定的.所以在阻止冒泡的时候不管用,今天特意来理解一下on的机制 on 是委托事件,利用的就是冒泡原理 $( ...

  6. 委托事件(jQuery)

    <div class="content"> <ul> <li>1</li> <li>2</li> <l ...

  7. JS与Jquery的事件委托机制

    传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  8. jQuery里面的普通绑定事件和on委托事件

    以click事件为例: 普通绑定事件:$('.btn1').click(function(){}绑定 on绑定事件:$(document).on('click','.btn2',function(){ ...

  9. jQuery代码优化 事件委托篇

    <转自 http://www.jb51.net/article/28770.htm> 参考文章:  解密jQuery事件核心 - 绑定设计(一) 参考文章:  解密jQuery事件核心 - ...

随机推荐

  1. Capslock+程序介绍

    一直为编程时方向键不在盲打区域苦恼,今天接触了一个非常好的软件Capslock+. 软件特别小,一共只有九百多K,甚至不能称为软件,只能算一个很小的脚本了.但解决了我非常大的一个难题.安装好软件后可以 ...

  2. python sqlalchemy mysql 自动映射

    SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作 简言之便是:将对象转换成SQL,然后使用数据API执行SQL并获取执行结果 ...

  3. 1759: 学生信息插入(武汉科技大学结构体oj)(已AC)

    #include<stdio.h>struct student { long no; char name[9]; int score;} t;void input(struct stude ...

  4. 【动手学pytorch】softmax回归

    一.什么是softmax? 有一个数组S,其元素为Si ,那么vi 的softmax值,就是该元素的指数与所有元素指数和的比值.具体公式表示为: softmax回归本质上也是一种对数据的估计 二.交叉 ...

  5. Altium Designer 14安装破解

    Altium Designer 14简称AD14,是一款专业的PCB设计软件,利用他可以计出专业的PCB元件.Altium Designer 14.3.10是目前的最新版本. Altium Desig ...

  6. codeforces 922 B. Magic Forest(枚举、位运算(异或))

    题目链接:点击打开链接 Imp is in a magic forest, where xorangles grow (wut?) A xorangle of order n is such a no ...

  7. 春招必问的redis持久化(RDB AOF),你能答上来么?

    春招面试模拟,如同雷同,纯属巧合!!! 面试的大体流程: 第一步:一般会有笔试题,也可能没有.有笔试题就要好好答了,因为会重视笔试结果,为了节约面试官时间,HR可能先会看,不合格直接让你走人了. 第二 ...

  8. Flink系统之Table API 和 SQL

    Flink提供了像表一样处理的API和像执行SQL语句一样把结果集进行执行.这样很方便的让大家进行数据处理了.比如执行一些查询,在无界数据和批处理的任务上,然后将这些按一定的格式进行输出,很方便的让大 ...

  9. AJAX传输图片文件

    AJAX传输 例:const xhr = new XMLHttpRequest(); // 此方法因为状态改变被调用多次,实测执行三次(1->2->4) xhr.onreadystatec ...

  10. React之this绑定

    一.首先看一下没有绑定this的情况 class App extends React.Component{ constructor(props){ super(props) console.log(' ...