jquery事件 | 易学教程

JQuery中的事件冒泡和阻止事件的传播行为

阅读更多关于 JQuery中的事件冒泡和阻止事件的传播行为

之前的这篇博客详细地介绍了javascript中的事件冒泡和事件捕获，以及DOM事件流。现在我们来看下，JQuery框架中的事件冒泡问题，以及如何阻止事件的传播行为。 1、JQuery中的事件绑定，都是属于事件冒泡。这篇博客介绍了JQuery中绑定事件处理函数的几种方式，从中可以看到：这几种绑定方式，都不允许我们传递事件类型（是事件冒泡，还是事件捕获）。而javascript原生提供的addEventListener()则允许我们设置事件的类型。 <script> $(function(){ $("#outA").click(function(){ alert("A"); }); $("#outB").click(function(){ alert("B"); }); $("#outC").click(function(){ alert("C"); }); }); </script> <body> <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;"> <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;"> <div id="outC"

网上面试题

阅读更多关于网上面试题

链接：https://www.zhihu.com/question/41466747/answer/91084888 1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性； 2.xhtml和html有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素：div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容，border ,margin，padding 5

jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

阅读更多关于 jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> <script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息 $('#msg').html(txt);// 设置html信息 }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) <

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡

阅读更多关于 js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡

转载了一位大神关于这个问题的解释，记住以下便于以后查找，也方便同行们参考遇到的问题：jquery中用.on()给页面中新加的元素添加点击事件时，点击事件源，绑定的事件执行两次，这里的alert会执行两次，相应地数组删除也执行两次，具体代码如下（其中.tabDel是页面加载之后新生成的元素，故不能用普通的$(‘.tabDel).click(function(){})的方法添加点击事件）：上网找的解决方法大概有一下两种： 1、在用 on 绑定 click 事件之前，对该事件解绑，也就是 1 $('.right').off('click','.tabDel').on('click','.tabDel',function(){//删除所加 tab 节点的函数 2 // alert('tab的索引：'+$(this).parents('.contentLi2').index()); 3 var iNum1 = $(this).parents('.contentLi2').index(); 4 var iNum2 = $(this).parents('.anElement').index(); 5 $scope.module.tab[iNum1].fieldList.splice(iNum2,1); 6 $(this).parents('.anElement').remove(); 7 }

Jquery控制点击事件的触发顺序

阅读更多关于 Jquery控制点击事件的触发顺序

比如：有两个方法： var func_1 = function(){ }; var func_2 = function(){ }; 对同个dom绑定这两个事件，绑定顺序为：先绑定func_1，后绑定func_2 $("#id").click(func_1 ); $("#id").click(func_2 ); 那么，当click事件发生时，触发顺序为 func_2 -> func_1 如果在某情况下只想执行func_1 而不想执行func_2 var array = $("#id").data("events").click;//获取元素上绑定的所有click事件 var otherEvent = array .splice(1,1)[0];//拿出index为1的事件对象，也就是移除func_2 执行结果为 func_1 需要的时候再把otherEvent插回队列中，就可以正常触发，插入的位置影响执行的顺序来源： CSDN 作者： caion 链接： https://blog.csdn.net/ok123zxx/article/details/52486397

两个元素绑定一个点击事件，其中一个元素已经有事件--trigger() 方法

阅读更多关于两个元素绑定一个点击事件，其中一个元素已经有事件--trigger() 方法

昨天新加一个功能，使用的是jquery-datable， thead中第一个tr 中某一个th 触发第二行tr对应的th的点击（排序）事件一开始的思路是用bind，绑定点击事件pass 用apply，call 还是pass 最后找到了 jquery的trigger() 方法 trigger() 方法触发被选元素的指定事件类型。规定被选元素要触发的事件。 $( selector ).trigger( event ,[ param1 , param2 ,...]) 符合要求，且没有报bug http://www.w3school.com.cn/jquery/event_trigger.asp 来源： CSDN 作者：阿狸狸阿狸狸呀链接： https://blog.csdn.net/qq_25236657/article/details/80491991

jQuery的事件绑定与事件委托

阅读更多关于 jQuery的事件绑定与事件委托

在用jQuery的事件绑定时，会用到on()、bind()、live()、 delegate()这几个方法，但对他们的区别缺从未注意过，现稍总结一下，如有错误，欢迎指正。参考文档： http://blog.csdn.net/xxd851116/article/details/8646899 http://www.jb51.net/article/57827.htm http://www.jb51.net/article/67166.htm http://api.jquery.com/on/ http://api.jquery.com/delegate/ http://api.jquery.com/bind/ http://api.jquery.com/live/ http://www.cnblogs.com/aaronjs/p/3481075.html http://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/ http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ DOM树我们先种一颗DOM树，来说明接下来将要讲到的事件冒泡，图片引用自： http://blog.csdn.net/xxd851116/article/details

jQuery 事件委托

阅读更多关于 jQuery 事件委托

自从学习了jQuery，发现很多事件没办法记住，往往学着后面的忘着前面的，很苦恼，所以捡出一些容易忘记的方法单独记录在这里，以供日后复习用到。我们在绑定事件时（比如点击事件），只能绑定在HTML页面已有的元素上（比如下方html里的上），当使用jQuery创建新的div元素时，新的元素便没有这个事件，如果我想还有，那怎么办，这里就得用到事件委托。 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > jQuery事件委托 </ title > < script src = "../../../File/jquery-3.3.1.js" > </ script > < style > div { width : 100 px ; height : 100 px ; border : 1 px solid #fff ; background : red ; margin : 5 px ; float : left ; } </ style > </ head > < body > < form action = "" > < input type = "button" value = "点击增加div" id = "btn" > </ form > //原有的div元素

Jquery绑定事件及动画效果

阅读更多关于 Jquery绑定事件及动画效果

Jquery绑定事件及动画效果本文转载于： https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind（type，data，fuc） one(type,data,fuc) //只执行一次常见事件类型名称含义 blur 失去焦点 focus 获取焦点 load 加载 resize 重置大小 scroll 滚动 unload 卸载 click 点击 dblclick 双击 mousedown 鼠标按下 mouseup 鼠标弹起 mousemove 鼠标移动 mouseover 鼠标悬停 mouseout 鼠标移走 mouseenter 鼠标移入 mouseleave 鼠标离开 change 内容改变 select 选中 submit 提交 keydown 有键按下 keypress 有键按下 keyup 有键弹起 error 有错误判断是否显示 if($("#id").is(":visible")) { } else { } 简化绑定事件 $(this).mouseover(function(){ //代码 }) Hover事件 hover（enter，leave）光标移入，触发第一个事件，光标移走，触发第二个事件 $("#id").hover(function(){ //光标移入

jQuery总结 - 鼠标事件

阅读更多关于 jQuery总结 - 鼠标事件

事件描述 .click() 鼠标指针在元素里面时点击触发 .dblclick() 为JavaScript 的 “dblclick” 事件绑定一个处理函数，或者触发元素上的 “dblclick” 事件。 .mouseup() 当鼠标指针在元素内，并且鼠标按键被释放时触发 .hover() 当鼠标移动到元素上时触发 .mouseleave() 当鼠标从元素上移开时触发 .mousemove() 当鼠标指针在元素内移动时触发例子 .click() <!DOCTYPE html> <html> <head> <script src="../js/jQuery3.3.1.js"></script> <script> $("p").click(function () { $(this).slideUp(); }); }); </script> </head> <body> <p>点击隐藏</p> <p>点击隐藏</p> <p>点击隐藏</p> </body> </html> .dblclick() 双击时改变背景色。 <!DOCTYPE html> <html> <head> <style> div { background:blue; color:white; height:100px; width:150px; } div.dbl { background:yellow;color

订阅 jquery事件