JQuery事件委托原理与用法实例分析
本文实例讲述了JQuery事件委托原理与用法。分享给大家供大家参考，具体如下：
事件委托就是利用事件冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。事件委托首先可以极大的减少事件绑定次数，其次也可以让新加入的子集元素也拥有相同的操作。
一般绑定事件的写法以及事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.list{
background-color: gold;
list-style-type: none;
padding: 10px;
}
.list li{
height: 30px;
background-color: green;
margin: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/*$('.list li').click(function () {
$(this).css({backgroundColor:'red'});
});*///写成事件委托的方式,把委托的事件放在父级
$('.list').delegate('li','click',function () {
$(this).css({backgroundColor:'red'});
});
//新建li元素复制给$li变量
var $li=$('<li>9</li>');
$('.list').append($li);//把新建元素放到ul子集最后面。这就是节点操作
})
</script>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
关键代码，事件委托函数
$('.list').delegate('li','click',function () {
$(this).css({backgroundColor:'red'});
新建节点也能使用，就是因为有事件委托
//新建li元素复制给$li变量
var $li=$('<li>9</li>');
$('.list').append($li);//把新建元素放到ul子集最后面。这就是节点操作
JQuery事件列表
blur()元素失去焦点
focus()元素获得焦点 ，其实就是光标在输入框里就是叫做获得焦点
click()点击
mouseover()鼠标进入
mouseout()鼠标离开
mouseenter()鼠标进入，进入元素不触发
mouseleave()鼠标离开，离开元素不触发
hover()同时为mouseenter和mouseleave事件指定处理函数
ready()DOM加载完毕
resize()浏览器窗口大小发生改变
scroll()滚动条位置发生变化
submit()用户提交表单
blur和focus事件和提交submit
若想提交表单，form得写提交地址action，input得写name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/*$('#input01').focus(function () {
alert('获得焦点');/!*其实就是光标在输入框的时候叫做获得焦点*!/
})*///在获得焦点的时候做什么事情
$('#input01').focus();//这就是一进去页面的时候就获得焦点
$('#input01').blur(function () {/*失去焦点的时候处理函数*/
alert('失去焦点');
})
$('#form1').submit(function () {
alert('提交');
})
})
</script>
<body>
<form id="form1" action="http://www.baidu.com">
<input type="text" name="dat01" id="input01" >
<input type="text" name="dat02" id="input02" >
<input type="submit" name="" value="提交" id="sub">
</form>
</body>
</html>
可以直接粘贴验证。
resize事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).resize(function () {
var $w=$(window).width();
document.title=$w;
})
</script>
</head>
<body>
</body>
</html>
浏览器大小发生改变的时候，把浏览器宽度打到title上，resize事件要绑定在window上面。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
JavaScript之事件委托实例(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite
-
jQuery动态追加页面数据以及事件委托详解
我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了. 首先效果图如下: 这个只截取了最底下的一部分页面.在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失. 我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完. 首先body中代码如下: <div id = "container
-
jQuery事件委托之Safari
什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) $(element).click(function(){ //do something }) //事件委托(Jquery) $(parents).on("click",element,function(){ //do something }) 事件委托的原理 事件委托将事件监听绑定在目标元
-
jQuery事件委托代码实践详解
javascript的事件模型,采用"冒泡"模式,子元素的事件会逐级向上"冒泡",成为父元素的事件. 在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <table> <tr><td id="targetTd"></td><td></td><td></td&
-
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元
-
JQuery事件委托原理与用法实例分析
本文实例讲述了JQuery事件委托原理与用法.分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作.事件委托首先可以极大的减少事件绑定次数,其次也可以让新加入的子集元素也拥有相同的操作. 一般绑定事件的写法以及事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
JavaScript事件委托原理与用法实例分析
本文实例分析了JavaScript事件委托原理与用法.分享给大家供大家参考,具体如下: 在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道.所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题. 1. js中的事件流 在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获. ① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上
-
JavaScript设计模式之单例模式原理与用法实例分析
本文实例讲述了JavaScript设计模式之单例模式原理与用法.分享给大家供大家参考,具体如下: 单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有些对象只需要一个,如线程池.全局缓存.浏览器中的window对象等,这时候可以用到单例模式. 单例模式典型的应用场景:单击按钮时,页面中会出现一个登陆浮窗,而该登录浮窗是唯一的,无论单击多少次按钮,这个浮窗都会被创建一次,则适合用单例模式创建. 全局变量不是单例模式,但在JavaScript开发中,经
-
jquery动态导航插件dynamicNav用法实例分析
本文实例讲述了jquery动态导航插件dynamicNav用法.分享给大家供大家参考.具体如下: 这是一款自己写的jquery动态导航插件-dynamicNav,具体思路是: 第一.给所有的li里插入一个span标签,且包含li里面的a标签 第二.复制一份a标签,插入到span里,现在span里有两个a标签 第三.根据传入的参数判断是垂直切换还是水平的,如果是垂直的,将span的宽度改为一个a标签的宽度,这时两个a标签就垂直排列了,这里一定要将li的overflow:hidden;否则会看到2个
-
jQuery网页选项卡插件rTabs用法实例分析
本文实例讲述了jQuery网页选项卡插件rTabs用法.分享给大家供大家参考.具体如下: 这里介绍jQuery网页选项卡插件rTabs用法,一共演示了4种TAB选项卡样式,第一种:默认样式:自动运行.无动画效果.Hover事件:第二种:自动运行.向上滚动.支持Hover事件的TAB选项卡菜单:第三种:自动运行.渐入淡出.支持Hover事件的选项卡:第四种:自动运行.向左滚动.点击事件的网页选项卡,选一个你喜欢的放在你的网站吧. 先来看看运行效果截图: 在线演示地址如下: http://demo.
-
jQuery插件制作之参数用法实例分析
本文实例讲述了jQuery插件制作之参数用法.分享给大家供大家参考.具体分析如下: 1.无参数实现文字阴影效果 jQuery.fn.shadow =function(){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 0;i < 5;i++){ $originalElement.clone() .css({ position :"absolute", left :$ori
-
javascript与jquery中的this关键字用法实例分析
本文实例分析了javascript与jquery中的this关键字用法.分享给大家供大家参考,具体如下: this 表示当前的对象,这个当前对象可以是表单,<p>等任何元素 1.javascript中this的用法: JS部分: <script type="text/javascript"> function chimg(obj){ obj.src="./images/2.jpg"; } </script> HTML部分: 复制代
-
Python自定义装饰器原理与用法实例分析
本文实例讲述了Python自定义装饰器原理与用法.分享给大家供大家参考,具体如下: 什么是装饰器?装饰器本质是一个函数,它可以在不改变原来的函数的基础上额外的增加一些功能.如常见的@classmethod,@staticmethod等都是装饰器,接下来记录下如何自定义个装饰器: 刚刚说过了,装饰器的本质就是一个函数,所有想要自定义一个装饰器,首先自定义一个函数 def decorate(func): def wrapper(*args,**kwargs): print("定义一个装饰器"
-
JS数据双向绑定原理与用法实例分析
本文实例讲述了JS数据双向绑定原理与用法.分享给大家供大家参考,具体如下: 通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title">Hello</h1> <input type="text" id="a" /> 首先是在界面上更改input的值,需要监听input的"input&qu
-
JavaScript闭包原理与用法实例分析
本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 1.与闭包有关的两个概念: 1) 变量的作用域 不带有关键字var的变量会成为全局变量: 在函数中使用关键字var声明的变量是局部变量. 局部变量只有在函数内部才能访问到,在函数外面是访问不到的.但在函数内部可以通过作用域链一直向上搜索直到全局对象,也就是说,函数内部可以访问函数外部的变量. 2) 变量的生存周期 对于全局变量,其生存周期是永久的,除非主动销毁这个全局变量: 而对于在函数内用关键字var声明的局部