zoukankan      html  css  js  c++  java
  • 四、jquery中的事件与应用

           当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程。时间无论在页面元素本身还是在元素与人机交互中,都占有十分重要的地位。

    1.事件中的冒泡现象:

    时间在出发后分为两个阶段,一个是捕获(capture),另一个则是冒泡(bubbling);大多数浏览器不支持捕获阶段,jquery也不支持。因此时间出发后往往执行冒泡过程。

    冒泡

    <script type="text/javascript">
            $(function() {
                var intI = 0; //记录执行次数
                $("body,div,#btnShow").click(function(event) {//点击事件
                    intI++; //次数累加
                    $(".clsShow")
                    .show()//显示
                    .html("您好,欢迎来到jQuery世界!")//设置内容
                    .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本
                })
            })
        </script>

    时间在执行过程中纯在冒泡现象,即虽然单机的是按钮,但按钮的外围<div>元素的时间也被出发,同时<div>元素的外围<body>元素的时间也随之被处罚,其整个事件波及的过程就像水泡一样向外冒,故称之为冒泡过程。

    阻止冒泡的发生

    在实际在实际的,我们并不希望时间的冒泡现象发生,即单机按钮就执行单一的单机时间,并不出发其他外围的时间。在jquery中通过stopProgragation()方法可以组织冒泡过程的发生。在上述代码中加入如下代码即可

    event.stopPropagation();//阻止冒泡过程

    另外还可以通过语句retrun false实现挺值时间的冒泡过程。

    2.页面载入事件

    ready()方法是jquery中的页面载入时间方法,该方法类似于传统的javascript中的onload()方法

    两者区别就是方法的执行时间的不同,onload():页面中的全部元素加载完全才触发,ready():加载前就触发。

    ready()的工作原理

    在jquery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度。遇到执行ready(),通过查看isReady是否被设置,如果未被设置,那么就说明页面并未加载完成,在次琴光下,将未完成的部分用一个数组缓存起来,当全部家在完成后,再将未完成的部分通过缓存一一执行。

    ready()方法的写法

    写法一:

    $(document).ready(function(){
          //代码部分     
    })

    写法二:

    $(function(){
            //代码部分
    })    

    3.绑定事件

    使用bind()方法绑定事件:

      bind()方法是为每个选择的元素的事件绑定处理函数,其语法格式如下:

    bind(type,[data],fn)

       type:一个或多个类型的从字符串,包括click、change、blur、focus、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleft、select、submit、keydown、keypress、keyup、error

      data:作为event.data属性值传递给事件对象的额外数据对象

      fn:绑定到每个选择元素的事件的中的处理函数。

        <script type="text/javascript">
            $(function() {
                $("#btnBind").bind("click mouseout", function() {
                    $(this).attr("disabled", "disabled"); //按钮不可用
                })
            })
        </script>

    4.切换事件

    有两个方法用于事件的切换,一个是hover(),另一个是方法toggle()。

    4-1.hover()方法:

    hover()方法可以是元素在鼠标悬停与鼠标移除的事件 中进行切换

    下列代码是等价的:

    $(".clsTitle").hover(function() {
                       //执行代码一
                }, function() {
                       //执行代码二
                })

    等价于

    $("a").mouseenter(function(){
             //执行代码一
    })
    $("a").mouseleave(function(){
             //执行代码二
    })

    4-2.toggle方法:

    toggle方法可以因此调用N各函数,知道最后一个函数,然后重复对这些函数轮播调用。

    toggle(fn,fn2,[fn3,fn4])

    其中,参数是因此被调用的函数

    5.移除事件

    unbind()方法是移除元素绑定的事件,其调用的语法格式如下:

    unbind([type],[fn])

    其中,参数type为移除的事件类型,fn为需要移除的事件处理函数。如果该方法没有参数,则移除所有绑定的事件;如果带有参数type,移除该参数所制定的事件类型;如果带有桉树fn,则至移除绑定时的函数fn。

    6.其他事件

    6-1.one()方法:

    为所选绑定元素绑定一个浸出法一次的处理函数,语法格式为:

    one(type,[data],fn)

    6-1.trigger()方法:

      可以实现触发性事件,既不必用户做任何事件,自动执行该方法中的事件。示例代码如下:

        <script type="text/javascript">
            $(function() {
                var oTxt = $("input"); //获取文本框
                oTxt.trigger("select"); //自动选中文本框
                oTxt.bind("btn_Click", function() {//编写文本框自定义事件
                    var txt = $(this).val(); //获取自身内容
                    $("#divTip").html(txt); //显示在页面中
                })
                oTxt.trigger("btn_Click"); //自动触发自定义事件
            })
        </script>
  • 相关阅读:
    题解45 跳跃游戏 II
    《重构》第八章阅读总结
    Scala学习笔记一
    Java初学随笔
    染色算法总结
    BingMap
    Google Earth API 替换方案
    本周安排
    OleDb 内存泄露问题
    css3 布局
  • 原文地址:https://www.cnblogs.com/but-he/p/6124267.html
Copyright © 2011-2022 走看看