jq事件绑定

前端中事件绑定主要包括三种：1：普通事件    2 : 事件委托  3：iframe事件绑定。下面给介绍他们的原理及demo 。

1：普通事件：

  • 普通事件无法绑定事件到新生成的元素
  • 比方：今天公司有100人会收到快递，这100人全在公司门口等快递...新员工不知道在哪收，收不到快递...
  • demo:  

2 : 事件委托：

  • 原理：通俗的讲 事件就是onclick，onmouseover等就是事件;委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。专业的讲：利用冒泡的原理，把事件加到父级上，查找父元素下对应节点 触发执行效果。
  • 比方： 今天公司有100人会收到快递，前台MM帮大家收好，然后对应告诉你大家去拿..新员工的快递也会收到...
  • 作用：提高性能，绑定未来元素。
  • demo:

3：iframe事件绑定：

  • demo：
  • iframe点击常见操作:
    • 父页面获取子页面元素：$(".ccc").contents().find(".ccc2")  ccc是iframe的类;ccc2是子页面的类
    • 子页面获取父页面元素：$(‘#id‘, window.parent.document)    id 是父页面的id
    • 子页面调用父页面的方法：parent.zzz();    zzz 是父页面方法
    • 父页面调用子页面的方法：zzzName.window.test()   zzzName是iframe name;test是子页面方法
时间： 2024-11-05 23:21:56

jq事件绑定的相关文章

事件委托和JQ事件绑定总结

事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 实现原理:我们知道,DOM在为页面中的每个元素分派事

JS事件绑定和JQ的事件绑定的几种方式

JS事件绑定的方式: 1.内嵌法: <input type="button" onclick="test()" value="click me"/> 或者是多事件绑定:<input type="button" onclick="javascript:test();test1();" value="click me"/> 2.动态绑定 直接为对象赋值 documen

jQ新的事件绑定方法on()

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn)events:一个或多个用空格分隔的

移动端jq及zepto事件绑定

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; f

焦点 、event对象、事件冒泡、事件绑定、AJAX知识点备忘

焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 设置焦点的几种方式: 1.点击 2.TAB键 3.JS onfocus   onblur 属性 var oinp=document.getElementById('shuru') oinp.onfocus=function(){ if(oinp.value=='请输入'){ oinp.value='' } } oinp.onblur=function(){ if(oinp.value==''){ oinp

jQuery事件绑定.on()简要概述及应用

前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可以了解下,或许本文对你有所帮助 前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道liv

JQ 事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title></title> <scr

ISO处理jq事件

jquery事件在IOS中不起作用并且事件有延迟 正文内容: jq事件在IOS上,如果标签本身不具备某些功能,而我们通过document或者body绑定上去的话,有些事件是不起作用的,同时在IOS上jq事件也存在延迟. 事件不起作用 这里点击事件为例,在IOS中本身默认不可点击的元素,如(div, span),此时点击事件会失效. 解决办法 将click事件直接绑定到目标元素. 将目标元素换成 a 标签或者 button 等可以点击的元素. 将click事件委托到非 document 或者 bo

jquery中的DOM事件绑定与解绑

在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑定与事件解绑. 1 $(document).on('click.endEdit',function (e) { 2 if(!$(e.target).hasClass('datagrid-cell')&&e.target.tagName!="TD"){ //事件发生后的判断条