js和jQuery中的事件绑定与普通事件
普通事件，是指直接对元素进行事件注册，然后触发
而事件绑定是将事件注册到元素上
两者区别就是在于普通事件不可以重复添加多个事件，若添加也会覆盖，只会触发其中一个事件（最后注册的那个）
而事件绑定是可以重复绑定多个事件，而且都可以触发
<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中的事件绑定与普通事件的更多相关文章
- jQuery中bind函数绑定多个事件
名人名言:道德是真理之花.——雨果 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleav ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- js和jquery中有关透明度操作的问题
在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器 ...
- 如何在js或者jquery中操作EL表达式的一个List集合
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- JS和jQuery中的事件总结（一）
学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操 ...
- JS和JQuery中的事件托付 学习笔记
事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
随机推荐
- CNN卷积神经网络人脸识别
图片总共40个人,每人10张图片,每张图片高57,宽47.共400张图片. 读取图片的py文件 import numpyimport pandasfrom PIL import Imagefrom k ...
- bzoj 3626 : [LNOI2014]LCA (树链剖分+线段树）
Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...
- wstngfw IPsec 站点到站点连接示例
wstngfw IPsec 站点到站点连接示例 在本例中,将假设以下设置: IPsec站点设置 站点 A 站点 B 名称 Beijing Office(北京办公室) 名称 Shenzheng Offi ...
- 【HDU - 4342】History repeat itself（数学）
BUPT2017 wintertraining(15) #8C 题意 求第n(n<2^32)个非完全平方数m,以及\(\sum_{i=1}^m{\lfloor\sqrt i\rfloor}\) ...
- 设置Linux防火墙
设置 Linux 服务器防火墙脚本,Web_iptables.sh 通过内网可访问服务器所有开放端口 给跳板机开放sshd端口连接服务器 信任ip 所有端口均开放 开放部分端口供外部访问 #!/bin ...
- Android性能优化案例研究
译 者前言: 这是Google的Android开发工程师Romain Guy刊登在个人Blog上的一篇文章.Romain Guy 作为Android图形渲染和系统优化的专家,是Android 4.1中 ...
- Java 强制类型转换(类转换注意事项)
将一个类型强制转换成另一个类型的过程被称为类型转换.例如: double x =3.14; int y = (int)x; 将表达式x的值转换成整数类型,舍弃小数部分. 有时候也可能是类的对象引用的转 ...
- 【BZOJ1831】[AHOI2008]逆序对（动态规划）
[BZOJ1831][AHOI2008]逆序对(动态规划) 题面 BZOJ 洛谷 题解 显然填入的数拎出来是不降的. 那么就可以直接大力\(dp\). 设\(f[i][j]\)表示当前填到了\(i\) ...
- ZOJ 4062 Plants vs. Zombies（二分答案）
题目链接:Plants vs. Zombies 题意:从1到n每个位置一棵植物,植物每浇水一次,增加ai高度.人的初始位置为0,人每次能往左或往右走一步,走到哪个位置就浇水一次.求m步走完后最低高度的 ...
- centos7搭建ELK Cluster集群日志分析平台（四）：Fliebeat-简单测试
续之前安装好的ELK集群 各主机:es-1 ~ es-3 :192.168.1.21/22/23 logstash: 192.168.1.24 kibana: 192.168.1.25 测试机:cli ...