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 ...
随机推荐
- android oauth 微博客户端 架构一
最近研究oauth协议,为了进一步 的巩固自己的学习成果,顾完成了android的新浪客户端.他的架构如下: UI层微博中的各个窗体 就是所谓的各个activitylogic层程序的核心控制调度模块 ...
- 微软颜龄Windows Phone版开发小记
随着微软颜龄中文网cn.how-old.net的上线,她也顺势来到了3大移动平台. 用户在微软颜龄这一应用中选择一张包含若干人脸的照片,就可以通过云计算得到他们的性别和年龄. 今天我们就和大家分享一下 ...
- 作业三:PSP记录个人项目耗时情况
PSP2.1 Personal Software Process Stages Time Planning 计划 20min Estimate 估计开发 ...
- MySQL--将MySQL数据导入到SQL Server
随着时代的进步,社会的发展,各种技术层出不穷五花八门乱七八糟数不胜数(写作文呢!!!) 不扯废话,简单而言,很多公司都会同时使用多种数据库,因此数据在不同数据库之间导入导出就成为一个让人蛋疼的问题,对 ...
- hibernate HQL和Criteria
package com.test; import java.util.Date; import java.util.List; import org.hibernate.Query; import o ...
- Redis教程(十一):虚拟内存介绍:
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/138.html 一.简介: 和大多NoSQL数据库一样,Redis同样遵循 ...
- 爱上MVC~ajax调用分部视图session超时页面跳转问题
回到目录 这个问题出现了很多年了,都没有解决,问题是这样的,有一个需要授权才可以访问的分部视图,在一个view中使用ajax的方法去调用它,然后更新页面的局部DIV,这时,如果你长时间不操作,sess ...
- lua如何构造类
function class(super, autoConstructSuper) local classType = {}; classType.autoConstructSuper = autoC ...
- Atitit rgb yuv hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别
Atitit rgb yuv hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别 1.1. 色彩的三要素 -- 色相.明度.纯度1 1.2. YUV三个字母中,其中"Y&quo ...
- HTML 5.1的新增特性
相对于HTML5,HTML 5.1又带来以下改变,这些可以作为以后的参考. 新增的特性 <picture>和scrset属性允许响应式图片选择: <details>和<s ...