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();
});

未完继续。。。

时间: 2024-10-17 02:31:40

JS和jQuery中的事件总结(一)的相关文章

JS和JQuery中的事件委托 学习笔记

事件委托其实并不是一个很高级的技巧,比如在一个页面里面,当只存在两个按钮的时候,可能你给按钮添加监听是这样的:(本文不考虑浏览器兼容性,关于事件的兼容性可参考前面的学习笔记) <div id="container"> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> </div> var btn1 =

js和jquery中的事件委托

[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签

jQuery中的事件和动画

一.jQuery中的事件 加载DOM 在JS中等待页面加载完成通常使用window.onload方法,而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法.这两者有很大的不同: 执行时机 window.onload方法是在网页所有的元素(包括元素关联的文件)完全加载到浏览器后才能执行.而Query中的$(document).ready()方法,在DOM载入就绪就可以对其操纵并调用它绑定的函数,此时网页中的所有元素可能并没有下载完毕. 有时我

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

jQuery中绑定事件的几种方法

以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

web前端之锋利的jQuery四:jQuery中的事件

web前端之锋利的jQuery四:jQuery中的事件 加载DOM: 执行时机: $(document).ready(function(){}); 详情解释 事件绑定: bind(event,data,function) 第一个参数是事件类型,类型包括:blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit

jQuery中的事件机制深入浅出

昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中

jQuery中绑定事件bind() on() live() one()的异同

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------