jq的事件冒泡
在页面上可以有多个事件,也可以多个元素响应同一件事,
事件冒泡引发的问题:
有些时候不想动用的事件,却因为事件冒泡而触发
解决问题:
1.事件对象
由于IE-DOM和标准的DOM实现事件对象的方法各不相同,导致在不同浏览器上获取事件对象变得比较困难,。针对这个问题,jq进行了必要的扩展和封装,从而使得在什么浏览器中都能够轻松地获取事件对象以及事件对象的一些属性。
在程序中,实现事件对象非常简单,只需要为函数添加一个参数,例:
$(element).bind('click',function(event){
//event:事件对象
})
当单击element时,事件对象就被创建了,这个事件对象只有事件处理函数才能访问,事件处理函数执行完毕,事件对象就会被销毁。
2停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jq中提供了stopPropagation()方法来停止事件冒泡。
3.阻止默认行为
网页中的元素有自己的默认行为,例如 单击超链接后会跳转,点击“提交”按钮后表单会提交,有时需要阻止元素的默认行为。
在jq中,提供了preventDefault()方法来阻止元素的默认行为。
例,在项目中,经常需要验证表单,在单击“提交”按钮时,验证表单内容,
例如,某元素是否是必填字段,某元素长度是否够6位,当表单不符合提交条件时,要阻止表单的默认行为,(表单提交);
$(function(){
$(obj).bind("click",function(){
var username=$("#username").val();//获取元素的值
if(username=''){//判断值是否为空
$('#el').html('<p>文本框值不能为空</p>');//提示信息
event.preventDefault();//阻止默认行为(表单提交);
}
})
})
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false,这是对在事件对象上同时调用stopPropagation()和preventDefalut();
在表单的例子中,可以把
event.preventDefalut()//阻止默认行为
改写成
return false;
也可以把事件冒泡例子中的
event.stopPropagation()//停止事件冒泡
改写成
return false;
4.事件捕获
事件捕获和事件冒泡是两个相反的过程,事件捕获是从最顶端往下开始触发。
事件捕获并不是所有的主流浏览器都支持,并且这个缺陷无法通过javascript来修复,jq不支持事件捕获,如果需要用到事件捕获,只能用原生js;
jq的事件冒泡的更多相关文章
- 事件冒泡的应用——jq on的实现
曾对jQuery中on的实现有所疑问,一直没有找到合适的实现方法,今日看<javascript高级程序设计>中的事件冒泡有了些思路. 针对于新增的DOM元素,JQ中若为其绑定事件就必须使用 ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- jq事件冒泡问题
在程序中使用事件对象非常简单,只需为函数添加一个参数,jquery代码如下: $("element").bind("click",function(event) ...
- jq 事件冒泡总结
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- JS中的事件冒泡——总结
一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...
- JS中的事件、事件冒泡和事件捕获、事件委托
https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...
随机推荐
- android 录制视频方式
http://www.cnblogs.com/skyseraph/archive/2012/03/31/2427593.html http://bbs.csdn.net/topics/39088448 ...
- Xcode调试之查看变量
从其他开发语言转行进军IOS开发的小伙伴可能会有这样一件苦恼的事情,调试程序时如何查看变量值?我并不喜欢每次都要通过打印去查看变量的值,也不喜欢通过光标悬浮到变量上来显示变量的值,如果要查看变量的属性 ...
- sfs - django start from scratch
[TOC] Launch with code git spreading is obsolte lwc Installation Path D:\PythonWebSW\Django-1.5.5 ad ...
- Activity LauchMode启动模式(转载)
转载于:http://www.cnblogs.com/plokmju/p/android_ActivityLauncherMode.html 在一个Android应用中,不可避免的会包含多个Activ ...
- ios设置textField只能输入数字用于电话号码
首先在.xib中将UITextField的Keyboard设置为Number Pad,但是使用时键盘会切回别的键盘无法对内容进行校验.通过神奇的百度我知道了通过以下方法可以解决这样的问题: 首先让.x ...
- thinkphp整合系列之短信验证码、订单通知
现在这个短信通知泛滥的年代:应用如果没有个短信注册:你都不敢说你是搞开发的: 这个验证码搞起来是不难的:但是如果刚接触也是有点不知从哪下手的迷茫: 先讲下概念: 要想发送验证码:需要至少三项:appi ...
- ldap基本命令
前端数据如下: ### frontend.ldif ### dn: dc=ldap,dc=example,dc=com objectclass: top objectclass: dcObject o ...
- spark介绍
什么是Spark Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行计算框架,Spark基于map reduce算法实现的分布式计算,拥有Hado ...
- 编写程序,从vector<char>初始化string
#include<iostream> #include<string> #include<vector> using namespace std; int main ...
- hdu 2503 a/b + c/d
Problem Description 给你2个分数,求他们的和,并要求和为最简形式. Input 输入首先包含一个正整数T(T<=1000),表示有T组测试数据,然后是T行数据,每行包含四 ...