• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 处理页面的事件详解

jQuery 处理页面的事件详解

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,处理页面,事件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在之前dom操作中提到了javascript对事件处理的介绍。由于不同浏览器处理事件各不相相同,这给开发者带来了不必要的麻烦,jQuery的方便的解决了这个方面的麻烦。

1.绑定事件监听

(http://www.jb51.net/article/60096.htm)对事件的监听做了详细的介绍,看到了iE和DOM标准浏览器对待事件监听的区别,并对多个监听事件执行顺序和方式也不相同。

在jQuery中,通过bind()对事件绑定,相当于IE浏览器的attachEvent()和标准DOM的addEventListener()。如下例子:

<script type="text/javascript">
            $(function() {
                $("img")
                    .bind("click", function() {
                        $("#show").append("<div>点击事件1</div>");
                    })
                    .bind("click", function() {
                        $("#show").append("<div>点击事件2</div>");
                    })
                    .bind("click", function() {
                        $("#show").append("<div>点击事件3</div>");
                    });
            });
        </script>

        <img src="11.jpg">
        <div id="show"></div>

以上代码对img绑定了三个click监听事件.

bind()通用语法为

bind(eventType,[data],Listener)
其中,eventType为事件的类型,可以是blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error

data为可选参数,用来传递一些特殊的数据供监听函数使用。而listener为事件监听函数,上面的例子中使用匿名函数

对于多个事件类型,如果希望使用同一个监听函数,可以同事添加在eventType中,事件之间使用空格分离。

$(function() {
                $("p").bind("mouseenter mouseleave", function() {
                    $(this).toggleClass("over")
                })
            });

另外一些特殊的事件类型可以直接利用事件名称作为绑定函数,接受参数为监听函数。例如之前反复使用的

$("p").click(function(){
                //添加click事件监听函数
            })

其中,通用语法为

eventTypeName(fn)
可以使用的eventTypeName包括

blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
keydown/keypress/keyup/error等

除了bind()外,jQuery还提供了一个很实用的one()方法来绑定事件。该方法绑定回见出发了一次后就会自动删除,不再生效。

     //首先创建10个<div>块
            for (var i = 0; i < 10; i++)
                $(document.body).append($("<div>Click<br>Me!</div>"));
            var iCounter = 1;
             //每个都用one添加click事件
            $("div").one("click", function() {
                $(this).css({
                    background: "#8f0000",
                    color: "#FFFFFF"
                }).html("Clicked!<br>" + (iCounter++));
            });

例如上例,创建10个div,给每个div绑定一个函数事件,当点击div块时,函数执行一次便不再执行。

2.移除事件监听

jQuery采用unbind()来移除事件,该方法可以接受两个可选函数,也可不设置任何参数,例如下面的代码表示移除div标记的所有事件和P标记的所有click事件。

$("p").unbind("click");
            $("div").unbind();

 如果希望移除某个指定的事件,则必须使用unbind(eventType,listener)方法的第二个参数,例如:

var myFunc = function() {
                //监听函数体
            };
            $("p").bind("click",myFunc);
            $("p").unbind("click",myFunc);

例如以下代码

<script type="text/javascript">
            $(function() {
                var fnMyFunc1; //函数变量
                $("img")
                    .bind("click", fnMyFunc1 = function() { //赋给函数变量
                        $("#show").append("<div>点击事件1</div>");
                    })
                    .bind("click", function() {
                        $("#show").append("<div>点击事件2</div>");
                    })
                    .bind("click", fu

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • Jquery的Tabs内容轮换效果实现代码,几行搞定
  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
  • jquery 扑捉回车键事件代码
  • jquery实现折叠菜单效果【推荐】
  • JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)
  • 基于jQuery的投票系统显示结果插件
  • 再次分享18个非常棒的jQuery表格插件
  • jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
  • jQuery实现点击文本框弹出热门标签的提示效果
  • Jquery弹出层插件ThickBox的使用方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现分章节锚点“回到顶部”动画特效代码
    • jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
    • 避免jQuery名字冲突 noConflict()方法
    • 在jQuery中 常用的选择器介绍
    • jQuery扩展实现text提示还能输入多少字节的方法
    • 使用jQuery的ajax方法向服务器发出get和post请求的方法
    • jQuery EasyUI实现右键菜单变灰不可用效果
    • JQueryEasyUI框架下的combobox的取值和绑定的方法
    • jquery css 选择器演示代码
    • jQuery实现转动随机数抽奖效果的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有