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

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

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

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

  1. <html>
  2.  
  3.     <a class="ack1">点击触发绑定事件</a><br><br>
  4.     <a class="ack2">点击触发普通事件</a>
  5. </html>
  6.  
  7. <script>
  8.     function foo1(){
  9.         alert('触发点击1');
  10.     }
  11.     function foo2(){
  12.         alert('触发点击2');
  13.     }
  14.  
  15.     var ack1=document.getElementsByClassName("ack1");
  16.     ack1.addEventListener('click',foo1);
  17.     ack1.addEventListener('click',foo2);
  18.     //弹出 触发点击1 和 触发点击2
  19.  
  20.     var ack2 = document.getElementsByClassName("ack2");
  21.     ack2.onclick = foo1;
  22.     ack2.onclick = foo2;
  23.     //只会弹出 触发点击2
  24. </script>

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

  1.     function foo1(){
  2.         alert('触发点击1');
  3.     }
  4.     function foo2(){
  5.         alert('触发点击2');
  6.     }
  7.  
  8.     //都会触发两个函数 弹出 触发点击1 触发点击2
  9.     $(".ack1").on('click',foo1);
  10.     $(".ack1").on('click',foo2);
  11.  
  12.     $(".ack2").click(foo1);
  13.     $(".ack2").click(foo2);
  14.     //都会触发两个函数 弹出 触发点击1 触发点击2

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

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

  1.     $(document).on('click','.ack1',foo1);
  2.     $(".ack1").click(function(){
  3.         var ele=$(this).clone();
  4.         $(this).after(ele);　　//后克隆的元素依旧可以触发foo1事件函数
  5.     });
  6.  
  7.     $(".ack2").click(foo2);
  8.     $(".ack2").click(function(){
  9.         var ele=$(this).clone();
  10.         $(this).after(ele);　　//无法触发foo2事件函数
  11.     });

事件委托：

  1. $("要绑定标签的上级标签").on("click","要绑定的标签",function)
  2.  
  3. $("要绑定标签的上级标签").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. Codeforces Round #429 Div. 1

    A:甚至连题面都不用仔细看,看一下样例就知道是要把大的和小的配对了. #include<iostream> #include<cstdio> #include<cmath ...

  2. 网页调起QQ聊天

    将QQ账号换成正常的QQ号即可,要确保这个QQ支持临时会话 <a href="http://wpa.qq.com/msgrd?v=3&uin=QQ账号&site=qq& ...

  3. 大学jsp实验5request，response

    1.request对象的使用 (1)编写一个包含有表单的JSP页面form.jsp,其中包含可以输入姓名和出生地的文本框,提交表单后在另一个页面中显示用户提交的姓名和出生地.请写出相应代码: form ...

  4. Map Labeler POJ - 2296（2 - sat 具体关系建边）

    题意: 给出n个点  让求这n个点所能建成的正方形的最大边长,要求不覆盖,且这n个点在正方形上或下边的中点位置 解析: 当然是二分,但建图就有点还行..比较难想..行吧...我太垃圾... 2 - s ...

  5. C#中equal与==的区别

    C#中equal与==的区别 来源 https://www.cnblogs.com/dearbeans/p/5351695.html C#中,判断相等有两种方式,一种是传统的==操作,一种是objec ...

  6. MT【303】估计

    (2016浙江填空压轴题)已知实数$a,b,c$则 (     )A.若$|a^2+b+c|+|a+b^2+c|\le1,$则$a^2+b^2+c^2<100$B.若$|a^2+b+c|+|a+ ...

  7. JS基本类型-引用类型-深浅拷贝

    在JavaScript中变量包含两种类型的值:一种是基本类型,一种是引用类型. 基本类型包括:数值.字符串.null.undefined.布尔值引用类型包括:对象.数组.函数.正则… 补充: null ...

  8. 生产者&消费者.py

    1.最简单的 --生产者消费者 send.py# !/usr/bin/env python3.5# -*- coding:utf-8 -*-# __author__ == 'LuoTianShuai' ...

  9. [CTSC2018]暴力写挂——边分树合并

    [CTSC2018]暴力写挂 题面不错 给定两棵树,两点“距离”定义为:二者深度相加,减去两棵树上的LCA的深度(深度指到根节点的距离) 求最大的距离. 解决多棵树的问题就是降维了. 经典的做法是边分 ...

  10. A1130. Infix Expression

    Given a syntax tree (binary), you are supposed to output the corresponding infix expression, with pa ...