jQuery事件

来源：互联网发布：炒股书籍推荐知乎编辑：程序博客网时间：2024/05/16 02:59

1. 事件机制
事件中的冒泡现象：

Js代码  
<body>   
    <div>   
        <input id="btnShow" type="button" value="点击" class="btn" />   
    </div>   
    <div class="clsShow"></div>   
</body>  
   
<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>"); //追加文本   
                //event.stopPropagation();//阻止冒泡过程   
//return false;   
            })   
        })   
</script>   

点击按钮时，会显示执行3次。虽然点击的是按钮，按钮外围的div和body元素也会被触发，整个事件波及的过程就像水泡一样向外冒，故称为冒泡过程。
可通过event.stopPropagaton()或return false停止冒泡过程。

2. 页面载入事件
ready()和onload的区别：
ready()的几种写法：

Js代码  
$(document).ready(function(){….})   
$(function(){….})   
jQuery(document).ready(function(){….})   
jQuery(function(){….})   

3. 绑定事件
bind(type,[data],fn)，type是事件类型，其值可为：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.
data是作为event.data属性值传递给事件对象的额外数据对象，fn是事件处理函数。

Js代码  
$(function() {   
            $("#btnBind").bind("click mouseout", function() {   
                $(this).attr("disabled", "disabled"); //按钮不可用   
            })   
})   

可以通过传入一个映射，对所选对象绑定多个事件处理函数：

Js代码  
$(".txt").bind({ focus: function() {   
            $("#divTip")   
            .show()//显示   
            .html("执行的是focus事件");//设置文本   
            },   
            change: function() {   
            $("#divTip")   
            .show()//显示   
            .html("执行的是change事件");//设置文本   
            }   
})   

data参数的应用：

Js代码  
var message = "执行的是focus事件";   
$(".txt").bind("focus", { msg: message }, function(event) {   
                $("#divTip")   
                .show()//显示   
            .html(event.data.msg); //设置文本   
            });   
            message = "执行的是change事件";   
            $('.txt').bind('change', { msg: message }, function(event) {   
                $("#divTip").show()//显示   
            .html(event.data.msg); //设置文本   
});   

   4. 切换事件
    有两个方法用于事件切换：hover()和toggle()
    hover(over,out)方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换
    $("a").hover(function(){},function(){})
    当鼠标移动到所选元素上面时，执行第一个函数，移出元素时，执行指定的第二个元素
    等价于mouserenter和mouseleave事件
    $("a").mouseenter(function(){})
    $("a").mouseleave(function(){})

    toggle()方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用

Js代码  
$(function() {   
            $("img").toggle(function() {   
                $("img").attr("src", "Images/img05.jpg");   
                $("img").attr("title", this.src);   
            }, function() {   
                $("img").attr("src", "Images/img06.jpg");   
                $("img").attr("title", this.src);   
            }, function() {   
                $("img").attr("src", "Images/img07.jpg");   
                $("img").attr("title", this.src);   
            })   
})   

5. 移除事件
unbind([type],[fn]) 如果该方法没有参数，则移除所有绑定的时间，如果带有参数type，则移除该参数所指定的事件类型，如果带有参数fn，则只移除绑定时指定的函数fn。

Js代码  
$(function() {   
            function oClick() { //自定义事件   
                $("#divTip").append("<div>按钮二的单击事件</div>");   
            }   
            $("input:eq(0)").bind("click", function() { //绑定单击事件   
                $("#divTip").append("<div>按钮一的单击事件</div>");   
            });   
            $("input:eq(1)").bind("click", oClick); //绑定自定义事件   
            $("input:eq(2)").bind("click", function() {   
             $("input").unbind("click",oClick); //只移除绑定是指定函数oClick时间的元素   
            });   
})   

6. 其它事件
one(type,[data],fn)方法是为所选的元素绑定一个仅触发一次的处理函数，首次触发有效，再次触发无效

Js代码  
 $(function() {   
            function btn_Click() { //自定义事件   
alert(this.value);   
                this.value = "010-12345678"   
            }   
            $("input").one("click", btn_Click); //绑定自定义事件   
})   

如果换成$("input").bind("click", btn_Click);每次点击都会有弹出框

trigger(type,[data])方法，一般在DOM加载完毕后，自动执行一些人性化的操作，如：文本框处于焦点中

Js代码  
$(function() {   
            var oTxt = $("input"); //获取文本框   
            oTxt.trigger("focus/select"); //自动选中文本框   
            oTxt.bind("btn_Click", function() {//编写文本框自定义事件   
                var txt = $(this).val(); //获取自身内容   
                $("#divTip").html(txt); //显示在页面中   
            })   
            oTxt.trigger("btn_Click"); //自动触发自定义事件   
})   

    如果不希望trigger()事件自动执行，可使用triggerHandler()方法。
7. 表单应用
    功能：
    - 邮箱地址文本框
    - 邮箱地址文本框获取焦点、丢失焦点时样式的变换
    - 邮箱名格式的el表达式验证
8. 下拉列表应用
    功能：

    - 多个列表框的联动效果
    - 获取下拉框的选择项$(“#select option:selected”).text()/val()
    - 为select元素添加option项
9. 列表应用
    功能：
    - 鼠标滑动效果的菜单导航条
    - 浮动提示框功能
    - 浮动提示框带箭头
    - 弹出菜单，鼠标离开不消失处理
10. 选项卡应用
    功能：
    - 单击某个选项卡，其下方区域显示对应的内容，其它内容隐藏
    - 选项卡的背景色与内容的背景色浑然一体
    - siblings()的用法
11. 提示框效果
    功能：
    - 弹出框有title 关闭，确定和取消按钮
    - 弹出框总是居中显示，页面大小发生变化时也居中
    - 弹出框时，背景遮挡效果