JS和jQuery中的事件总结(一)
学而时习之,小白现在天天写页面,基础知识还是要恶补的。
进入正题,什么是事件(此处单独对jQuery、JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操作),此处注明,这是楼主自己的理解哈。
1.页面加载事件
JS提供了一个
window.onload
它的执行时机呢,是页面完全加载完毕后,包括页面上的文件、图片等完全加载到浏览器后才开始执行;
另外,此方法仅能保存对一个函数的引用,会自动的用后面的覆盖前面的。看个例子:
function A(){ alert('我是A'); } function B(){ alert('我是B'); } window.onload=A; window.onload=B;
浏览器的弹框仅仅一个“我是B”;
解决办法也是有的,毕竟JS还是挺牛的:
window.onload=function(){ A(); B(); }
这样两个弹框就按顺序统统出来了。
等同于jQuery中的
$(window).load()
使用的方法呢:
window.onload=function(){ //代码 } $(window).load(function(){ //代码 });
因为他的执行时机问题,若是网页图片数量多,或者网速拖拖,乖乖隆地咚,代码预计会有奇特的现象(这个要看写的什么了)。为此,jQuery有种更好的方法:
$(document).ready()
他呢,执行时机就是在 DOM载入就绪时进行执行,注意啦,是就绪时,此时图片可能还没完全下载到浏览器呢。
更方便的是,jQuery还提供了它的简写方式:
$().ready(function(){}); 和 $(function(){});
并且它最大的特点在于,使用它时,行为函数不会出现JS的覆盖问题,它是在现有行为的基础上,进行行为函数追加的:
function A(){ alert('我是A'); } function B(){ alert('我是B'); } $(function(){ A(); }); $(function() { B(); });
这可是两个框都按照顺序弹出的,和JS的第二种写在一起的方法是一样的效果。
2.绑定事件
在文档加载完成后,打算为某些元素绑定事件,完成某些特定的操作,有个很好的办法 bind().
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。
参数
type,[data],function(eventObject) 这个是v1.0
type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false 这个是V1.4.3
type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
false: 将第三个参数设置为false会使默认的动作失效。
events 这个是V1.4
一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例
当每个段落被点击的时候,弹出其文本。
$("p").bind("click", function(){ alert( $(this).text() ); });
同时绑定多个事件类型:
$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); });
对于其中的toggleClass,楼主要多说一句:toggle()具有切换状态的功能。
同时绑定多个事件类型/处理程序:
$("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} });
你可以在事件处理之前传递一些附加的数据:
function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler);
通过返回false来取消默认的行为并阻止事件起泡:
$("form").bind("submit", function() { returnfalse; });
其实,这种方式呢,等同于在对事件同事调用了 stopPrapagation()和 preventDefault();
通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){ event.preventDefault(); });
楼主要提醒一句:事件处理函数执行完毕后,事件对象就被销毁了。
通过使用 stopPropagation() 方法只阻止当前事件起泡。
$("form").bind("submit", function(event){ event.stopPropagation(); });
未完继续。。。
JS和jQuery中的事件总结(一)的更多相关文章
- JS和JQuery中的事件托付 学习笔记
事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...
- js和jQuery中的事件绑定与普通事件
普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...
- js和jquery中的事件委托
[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
随机推荐
- LIstView 滚动 异步 加载更多 mono for android ScrollStateChanged ScrollState.Idle; Fling;TouchScroll
今天项目需要实现一下列表的分页加载 找到了Listview的ScrollStateChanged方法. 和大家分享一下 //先找到Listview ListView order = FindViewB ...
- Backbone源码解析(四):View(视图)模块
View视图故名思义,它控制的是界面.我们可以把一个大的网页分成很多部分的视图,按照backbone的架构,每一个视图对应都是一个对象,我们可以通过元素的钩子(id或者class或者其他选择器)把它们 ...
- 微软颜龄Windows Phone版开发小记
随着微软颜龄中文网cn.how-old.net的上线,她也顺势来到了3大移动平台. 用户在微软颜龄这一应用中选择一张包含若干人脸的照片,就可以通过云计算得到他们的性别和年龄. 今天我们就和大家分享一下 ...
- openwrt-智能路由器hack技术(1)---"DNS劫持"
openwrt-智能路由器hack技术(1)---"DNS劫持" 1 导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所以现在整 ...
- Qt QT_BEGIN_NAMESPACE
问题 阅读Qt的Demo源码的时候,经常在头文件中, 声明类型的部分有以下这样的代码: class MyClassA; ///< 自定义类的声明 QT_BEGIN_NAMESPACE class ...
- easy-ui 小白进阶史(一):加载数据,easy-ui显示
作为一个没上过大学,没经过正规培训的96年的小白来说,找工作就没报特别大的希望,大不了找不到在回炉重造,继续学... 终于在海投了200份的简历之后...终于找到了...面试也挺简单的,,,第二天就去 ...
- java 堆栈分析
再次,研究了一个下午的jhat好jmap.从一开始惊呆.懵懂于那样大量而无聊乏味的数据,到现在有那么一点点收货.赶紧记录下来.没办法,悟性太低... C:\Users\Administrator> ...
- 谨慎DateTime.Now在EF的query中的使用
执行如下代码: var query = from tr in _carrierRepository select new BaseCarrier { CarrierCode = tr.CarrierC ...
- Java连接Oracle数据库开发银行管理系统【三、实现篇】
说明:里面的主要代码都加的有注释部分,所以代码显得很长,如果有错误的地方,谢谢指出. 注意需要导入数据库jar包 ------------------------------------------- ...
- EF架构~在global.asax里写了一个异常跳转,不错!
回到目录 一般地,网站出现异常后,我们会通过设置web.config的方法来实现友好页的显示,这个方法比较常用,但捕捉的信息不是很具体,在程序测试阶段,我们可以通过global.asax来实现友好的, ...