zoukankan      html  css  js  c++  java
  • Jquery:Jquery中的事件<一>

        由于今天有一个比较重要的面试,所以昨天晚上对以前做的一些项目做了一下总结,直接导致昨天的学习笔记断更了,哎,计划永远赶不上变化啊!今天学习了Jquery中是事件,就此做一个笔记,便于日后复习。

        一、加载DOM时执行的事件

        JavaScript中的window.onload方法和Jquery中的$(document).ready()方法的对比。

        1、执行时机

        window.onload方法是等网页中的所有元素(包括所有的关联元素)都加载完毕之后执行,而$(document).ready()方法是在DOM就绪之后就可以调用,不必等到所有关联文件加载完毕。举个例子,比如一个商品列表的页面,需要加载很多商品的图片,点击每个商品的图片可以链接到商品的详情页面。如果用JavaScript中的window.onload方法的话,必须得每个图片都加载好以后才可以执行其中的事件,如果用Jquery中的$(document).ready()方法的话,则可以等想要点击的图片加载完毕后就可以触发其中的事件。但是$(document).ready()方法也有其不适用的时候,比如方法中有一个事件是为所有图片设置宽和高,那么可能有些图片就无法获取设置了,所以Jquery中有新添加了一个方法,load()方法,此方法会在元素的onlond事件中绑定一个处理函数,如果这个处理函数绑定在window对象上,则其功能等同于JavaScript中的window.onload方法,如果绑定在一个元素上的话,则这个元素加载完毕之后执行处理函数。

        2、多次使用

        JavaScript中的window.onload方法一次只能保存对一个函数的引用,即如果先后给window.onload方法绑定两个函数,则系统只会执行第二个函数,第一个函数自动被第二个函数覆盖。而Jquery中的$(document).ready()方法会按绑定的先后顺序,一次执行每一个函数。

        3、简写方式

        $(document).ready(){}可以简写成$(function(){}),而$(document)可以简写为$(),当$不带参数时,默认参数就是“document”,因此,$(document).ready(){}还可以简写成$().ready(){}。

        二、事件绑定

        1、使用bing()可以给元素绑定事件,举个例子吧。

        $(#name_1).bind("click",function(){

            内部要执行的代码。

        })

        该示例是给id属性为name_1的元素绑定了一个click事件。

        2、改变绑定事件的类型

        给一个元素绑定mouseover事件和mouseout事件,实现的方法是:

        $(#name_1).bind("mouseover",function(){

            显示文本

        }).bind("mouseout",function(){

            隐藏文本

        })

        以上代码执行的效果是:当鼠标移到属性id为name_1的元素上时,显示文本,当鼠标移开时,隐藏文本。

        三、合成事件

        Jquery有两个合成事件:hover()方法和toggle()方法。

        hover()方法是模拟光标悬停事件,它可以绑定两个事件,当鼠标移动到选中元素上时,执行第一个方法;当鼠标移开时执行第二个事件。

        toggle()方法可以绑定多个事件,当鼠标单击绑定它的元素时,该元素会依次执行其中的事件。

        四、事件冒泡

        事件冒泡是指几个嵌套的元素里绑定了相同类型的事件,当触发里边元素的事件后,外边元素的事件也会依次被触发。例如在一个html页面中,<body>下添加了一个<div>元素,而在<div>元素中又嵌套了<span>元素。为<body>、<div>、<span>三个元素依次绑定事件,事件中分别执行输出3、2、1。单击<span>元素,页面会依次输出1、2、3。这就是时间冒泡。

        解决时间冒泡的方法是:在function的参数中添加事件对象,例如事件对象名为event,在此时间中添加如下代码,即可停止事件冒泡:

        event.stopPropagation();

        网页中的有些元素有其默认的行为,阻止其默认行为的方法是:在function的参数中添加事件对象,例如event,执行以下代码:

        event.preventDefault();

        如果想同时阻止元素的默认行为和事件冒泡,可以在事件处理函数中返回false:

        return false;

        五、事件捕获

        事件捕获的效果与事件冒泡恰恰相反,它是相同类型的时间从外到内的执行,遗憾的是,Jquery不支持事件捕获!

        又到凌晨了,不学了,睡觉!!!

  • 相关阅读:
    VS2015生成64位dll文件
    gdb简单调试~core文件
    Ubuntu ENet 的下载和编译
    Android LIstView初次创建getview方法执行多次问题
    android ipc通信机制之之三,进程通讯方式。
    Android Stduio统计项目的代码行数
    Android开发遇到的坑(1):Java中List的安全删除问题
    Android Studio修改项目的包名
    类似IOS的滑动返回上一级,SwipeBackLayout-android的滑动返回类库
    [转]理解RESTful架构
  • 原文地址:https://www.cnblogs.com/liu-xiaob/p/3784941.html
Copyright © 2011-2022 走看看