首页 > 代码库 > 四、jquery中的事件与应用

四、jquery中的事件与应用

2024-08-24 16:00:43   220人阅读

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

 

事件中的冒泡现象：

时间在出发后分为两个阶段，一个是捕获（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实现挺值时间的冒泡过程。

 

页面载入时间

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

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

ready()的工作原理

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

 

四、jquery中的事件与应用


联系
我们