普通事件，是指直接对元素进行事件注册，然后触发

而事件绑定是将事件注册到元素上

两者区别就是在于普通事件不可以重复添加多个事件，若添加也会覆盖，只会触发其中一个事件（最后注册的那个）

而事件绑定是可以重复绑定多个事件，而且都可以触发

<html>

    <a class="ack1">点击触发绑定事件</a><br><br>

    <a class="ack2">点击触发普通事件</a>

</html>

<script>

    function foo1(){

        alert('触发点击1');

    }

    function foo2(){

        alert('触发点击2');

    }

    var ack1=document.getElementsByClassName("ack1");

    ack1.addEventListener('click',foo1);

    ack1.addEventListener('click',foo2);

    //弹出 触发点击1 和 触发点击2

    var ack2 = document.getElementsByClassName("ack2");

    ack2.onclick = foo1;

    ack2.onclick = foo2;

    //只会弹出 触发点击2

</script>

而在jQuery中则有点不同，而且jQuery本身允许通过普通事件添加多个触发函数

    function foo1(){

        alert('触发点击1');

    }

    function foo2(){

        alert('触发点击2');

    }

    //都会触发两个函数 弹出 触发点击1 触发点击2

    $(".ack1").on('click',foo1);

    $(".ack1").on('click',foo2);

    $(".ack2").click(foo1);

    $(".ack2").click(foo2);

    //都会触发两个函数 弹出 触发点击1 触发点击2

jQuery中事件绑定是指为动态创建的元素绑定上事件触发，不只是为元素绑定多个事件

注意对元素动态绑定事件，一般需要通过父类元素为其绑定，才会使该子类（刚刚添加的元素）可以被触发

    $(document).on('click','.ack1',foo1);

    $(".ack1").click(function(){

        var ele=$(this).clone();

        $(this).after(ele);　　//后克隆的元素依旧可以触发foo1事件函数

    });

    $(".ack2").click(foo2);

    $(".ack2").click(function(){

        var ele=$(this).clone();

        $(this).after(ele);　　//无法触发foo2事件函数

    });

事件委托：

$("要绑定标签的上级标签").on("click","要绑定的标签",function)

$("要绑定标签的上级标签").delegate("要绑定的标签","click",function)

js和jQuery中的事件绑定与普通事件的更多相关文章

  1. jQuery中bind函数绑定多个事件

    名人名言:道德是真理之花.——雨果 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleav ...

  2. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  3. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  4. js和jquery中有关透明度操作的问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置       透明度在IE浏览器 ...

  5. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  6. js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...

  7. JS和jQuery中的事件总结（一）

    学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操 ...

  8. JS和JQuery中的事件托付 学习笔记

    事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...

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

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

随机推荐

  1. P1130 红牌

    题目描述 某地临时居民想获得长期居住权就必须申请拿到红牌.获得红牌的过程是相当复杂 ,一共包括NN个步骤.每一步骤都由政府的某个工作人员负责检查你所提交的材料是否符合条件.为了加快进程,每一步政府都派 ...

  2. F - Count the Colors ZOJ - 1610 线段树染色（染区间映射）

    题意:给一段0-8000的线段染色 问最后 颜色x 有几段 题解:标准线段树  但是没有push_up  最后查询是单点按顺序查询每一个点 考虑过使用区间来维护不同的线段有多少种各色的线段  思路是 ...

  3. 面向对象—的__new__()方法详解

    [Python] Python 之 __new__() 方法与实例化   __new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 Python 中存在于类里面的构 ...

  4. 【XSY2808】董先生的休闲方案 组合数学

    题目描述 有\(n\)个方案,编号为\(1\ldots n\). 最开始你不知道每个方案的编号. 你要按顺序提出这些方案. 每一个时刻你要做以下事情: 如果你阅读过下一个方案,就提出这个方案. 否则随 ...

  5. ARC 086 E - Smuggling Marbles(dp + 启发式合并)

    题意 Sunke 有一棵 \(N + 1\) 个点的树,其中 \(0\) 为根,每个点上有 \(0\) 或 \(1\) 个石子, Sunke 会不停的进行如下操作直至整棵树没有石子 : 把 \(0\) ...

  6. Android GPS定位测试（附效果图）

    今天因为工作需要,把以前编写的一个GPS测试程序拿出来重新修改了一下.这个程序说起来有些历史了,是我11年编写的,那时候学了Android开发没多久,算是一个实验性的作品.现在工作需要,重新拿出来修整 ...

  7. __init__、__new__、__call__ 方法

    __init__方法 __init__方法负责对象的初始化,系统执行该方法前,其实该对象已经存在了,要不然初始化什么东西呢?先看例子: # class A(object): python2 必须显示地 ...

  8. Mysql数据库操作笔记

     如果数据库表字段存在,则删除该表 drop table if exists `table_name` 创建数据库表语句 create table `table_name`( `id` ) not n ...

  9. <Android基础>(二) Activity Part 2

    1.活动生命周期 1)返回栈 2)活动状态 3)活动的生存期 2.活动的启动模式 1)standard 2)singleTop 3)singleTask 4)singleInstance 3.活动的优 ...

  10. Windows下安装flask虚拟环境

    前提 已经安装好python2.x或者pyhton3.x的条件下,使用pip包管理工具 flask框架就不作介绍直接安装 开始安装 1. 命令窗口下: 进入windows的命令窗口有三种方式: 第一种 ...