4、jquery中的事件与应用

时间 2019-11-17

标签 jquery 事件应用栏目 JQuery 繁體版

原文原文链接

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

1.事件中的冒泡现象：html

时间在出发后分为两个阶段，一个是捕获（capture），另外一个则是冒泡（bubbling）；大多数浏览器不支持捕获阶段，jquery也不支持。所以时间出发后每每执行冒泡过程。java

冒泡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实现挺值时间的冒泡过程。app

2.页面载入事件函数

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

二者区别就是方法的执行时间的不一样，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>