Jquery的普通事件和on的委托事件

Jquery的普通事件和on的委托事件小案例

以click的事件为例: 普通的绑定事件:$('.btn').click(function(){})绑定 on绑定事件:$(document).on('click','.btn2',function(){}) 那么两种方式的区别到底是什么呢? 我们以一个例子来说下区别 ①click事件是在页面加载后,获取的所有类名为btn1的元素,然后绑定了这个click事件,你要是通过其他操作再生成一个btn1元素,它就没有click这个事件: ②而on()事件起到了监听的效果,可以实现动态html元素绑定,…

Jquery的普通事件和on的委托事件

以click的事件为例: 普通的绑定事件:$('.btn').click(function(){})绑定 on绑定事件:$(documnet).on('click','btn2',function(){}) 那么两种方式的区别到底是什么呢? 我们以一个例子来说下区别 ①click事件是在页面加载后,获取的所有类名为btn1的元素,然后绑定了这个click事件,你要是通过其他操作再生成一个btn1元素,它就没有click这个事件: ②而on()事件起到了监听的效果,可以实现动态html元素绑定,比…

jQuery 2.0.3 源码分析事件绑定 - bind/live/delegate/on

事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新总结一下 jQuery对事件的绑定分别有几个API http://www.css88.com/jqapi-1.9/…

jQuery 2.0.3 源码分析事件体系结构

那么jQuery事件处理机制能帮我们处理那些问题? 毋容置疑首先要解决浏览器事件兼容问题可以在一个事件类型上添加多个事件处理函数,可以一次添加多个事件类型的事件处理函数提供了常用事件的便捷方法支持自定义事件扩展了组合事件提供了统一的事件封装.绑定.执行.销毁机制 …… 为了更深入的理解幕后的实现,所以先整理整体的结构思路,从1.7后就去除了live绑定,所以现在的整个事件的API 如图: jQuery的事件绑定有多个方法可以调用,以click事件来举例: click方法 bind方法…

jquery点击复选框触发事件给input赋值

体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <sty…

11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js"></script> 2.写jquery代码的位置和js一样,jquery代码也是写在<script>开始和结束标签之间. <script type="text/javasc…

Jquery挂事件与移除事件

<!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> <meta http-equiv="Content-…

jQuery对动态添加的元素绑定事件（on()的用法）

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后逻辑 }); 但是对用js动态添加的元素是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来…

JQuery触发radio或checkbox的change事件

在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码代码如下: $(function(){ $("#ischange").change(function() { alert("checked"…

第4章 jQuery的事件和动画(1)——事件篇

jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力一. jQuery的事件 1. $(document).ready(function(){})加载方式再次回到window.onload和$(document).ready(function(){})的比较中,后者是jQuery最重要的事件函数. (1)执行时机 $(document).ready(function(){})是待DOM就绪时马上可以执行.不一位置这些元素已经完全下载完成.一个简单的例子就是:图片可…

[jQuery学习系列四 ]4-Jquery学习四-事件操作

前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷青年中国说 SELF格致论道参考:http://www.365mini.com/page/tag/jquery-event-methods 1,readyready()函数用于在当前文档结构载入完毕后立即执行指定的函数.该函数的作用相当于window.onload事件. 2,blindbind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数.举例:…

jquery easyui textbox onblur事件，textbox blur事件无效解决方案

jquery easyui textbox onblur事件,textbox blur事件无效解决方案 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>. 蕃薯耀 2016年8月11日 10:55:53 星期四 http://fanshuyao.iteye.com/ 一.问题描述: Jquery ea…

jQuery delegate方法实现Ajax请求绑定事件不丢失

给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了比如说:我的分页是一个ajax请求但我点下一页时后生成的元素a就没有了click事件了自己做项目时遇到的问题: 目的:批量删除复选框,当点击删除的时候触发利用jquery绑定在按钮上的onclick事件从而获取所有复选框的值, 1.第一次直接smarty注入调取页面时没问题,当根据条件查询(Ajax实现),再次调用页面列出记录时,单击事件失效原因:ajax加载内容是在$(…

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

原文使用JS或jQuery模拟鼠标点击a标签事件代码这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getEleme…

jquery mobile Checkbox动态添加刷新及事件绑定

jquery mobile Checkbox动态添加刷新及事件绑定在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mobile框架和jquery mobile ui. ui我使用的是扁平化样式,大家可以这里查看.[jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍] 本来想做这个效果的,可惜没有时间研究出来. 先将就用了这个效果: 思路: Ajax(使用的是Webmethod)…

jquery一次绑定多个元素事件

jquery一次绑定多个元素事件 $(".peoplenum,input[name$='otherAmount'],#aa,#bb").bind("change", function(){ }); $("#deposit,#carAmount").bind("change",function(){ });…

jQuery之事件和批量操作、事件委托示例

一.常用事件 click(function(){...}) // 点击时触发 focus(function(){...}) // 获得焦点触发 blur(function(){...}) // 失去焦点触发 change(function(){...}) // 内容改变后触发 keyup(function(){...}) // 键盘按下后触发 keydown(function(){...}) // 键盘放开后触发 hover(function(){...},function(){...}) //…

在js文件中通过jquery定位到某个dom时候设置事件时候相当于直接在dom里面添加事件

在js文件中通过jquery定位到某个dom时候设置事件时候相当于直接在dom里面添加事件当触发事件时候会把当前的dom传给该方法…

js和jQuery中的事件绑定与普通事件

普通事件,是指直接对元素进行事件注册,然后触发而事件绑定是将事件注册到元素上两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以重复绑定多个事件,而且都可以触发 <html> <a class="ack1">点击触发绑定事件</a><br><br> <a class="ack2">点击触发普通事件</a> <…

jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加注意点:可以同时添加多个相同或不同类型的事件 2.事件解除 .off() 不传参数: $('button').off() //解绑该对象的所有事件一个参数:$("button").off("click") //解绑该对象的“click”类型事件两个参数:$("button"…

jQuery事件绑定与常用事件

jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑定,$('selector').event(function () { 代码块;}) <button>click me</button> <script src="baidu_jquery_2.1.4.js"></script> <sc…

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

一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px).当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 . 举例: <!DOC…

JQuery框架2.位置属性|筛选方法|事件

1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p").offset() $('div').offset().top $("p").offset().left scrollTop获取匹配元素相对滚动条顶部的偏移文档被卷起的像素值:scrollLeft获取匹配元素相对滚动条左侧的偏移,文档被卷起的像素值: //获取匹配元素相对滚…

C#反射调用其它DLL的委托事件传值

C#反射调用其它DLL的委托事件传值在插件式开发.我们要调用其它插件或模块的委托事件时.那么我们需要通过反射. 复制代码namespace Module2{ /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> [Plugin("MainWindow", "测试反射")] public partial class MainWindow { public delegate vo…

毕业设计---jQuery动态生成的a标签的事件绑定

这几天在毕业设计的前端设计阶段,准备放弃使用jsp,完全通过html+ajax+SSH进行网站的编写,在前端的页面显示我准备使用jQuery来实现数据的动态绑定.但是遇到动态添加的a标签无法直接通过$(element).click();来添加点击事件,通过网上的查询,在动态添加的标签绑定事件需要通过事件委托而非事件绑定. $("body").on("click", ".delete", function (){ del($(this).paren…

WEB前端技巧之JQuery为动态添加的元素绑定事件.md

jquery 为动态添加的元素绑定事件如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上可以用delegate来实现 .delegate( selector, eventType, handler ) 例如示例: $('someUlSelector').delegate('someLiSelector','click',function(){ //codes... //$(this) for the current jquery instance…

jQuery 绑定事件及移除绑定事件方法和元素事件列表

1.jQuery Event 事件: ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行. bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数.可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick,…

jquery 阻止冒泡事件和阻止默认事件

jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>…

jquery 关于使用 append 追加元素后事件无法触发

当在使用js或jQuery创建元素时,用 on(事件,function(){代码}) 或者事件(function(){代码 })绑定事件时在使用append添加元素后由于是在页面加载完成之后进行的元素添加,所以事件不会触发(个人理解,不对勿喷) 这时我们需要给元素绑定事件解决方案1: on绑定 $("父级元素").on("事件","当前元素",function(){ 巴拉巴拉......... }) 如果父级元素还不行就用 $(do…

jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件篇）

1.jQuery鼠标事件之click与dbclick事件方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 }); 方法二:$…

【Jquery的普通事件和on的委托事件】的更多相关文章