2. 技术人生
    3. jQuery 中的事件

    jQuery 中的事件

    技术2026-05-01  3
    1、加载 DOM

    下列三份代码是一样的：

    1: $(document).ready(function(){ 2: //code omitted here... 3: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 1: $().ready(function(){ 2: //code ommited here... 3: });

    .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

    1: $(function(){ 2: //code omitted here... 3: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

    后面两者都是第一种的简写形式，具体选择哪个由自己爱好决定。 jQuery 中的代码都应该放在上面的三份代码里面才会被执行。

    2、事件绑定

    进行事件绑定的方法是 bind( type [, data ], fn); 这个方法有 3 个参数。

    type 是事件类型，jQuery 里面的事件类型也是支持自定义事件的。第二个参数是可选的，作为属性值传递给事件对象的额外数据。第三个参数就是被绑定的方法了。

    用法参见下例：

    1: $("body").bind("click",function(e){ 2: alert("Never click here ! "+"("+e.pageX+","+e.pageY+")"); 3: }); 若是在不同浏览器上面调试这段代码，会发现还是比较有意思的，边缘地带点击没啥反应，Safari 中的效果比较意外，有兴趣的可以试试。 像是这种 click 、mouseover 等事件比较常见的，jQuery 还提供了一种简单的写法： 1: $("body").click(function(e){ 2: alert("Never click here ! "+"("+e.pageX+","+e.pageY+")"); 3: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
    3、合成事件

    jQuery 中有两个合成事件：hover()  和 toggle() 。toggle() 方法在讲切换样式的时候讲过，类似的 hover() 也是一样的用法，只是把 click事件 改为 mouseenter 事件和 mouseleave 事件。示例代码如下：

    1: $("body").hover(function(){ 2: $(this).css("background","#EEEEEE"); 3: },function(){ 4: $(this).css("background","#FFFFFF"); 5: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 1: $("body").toggle(function(){ 2: $(this).css("background","#EEEEEE"); 3: },function(){ 4: $(this).css("background","#FFFFFF"); 5: },function(){ 6: $(this).css("background","#000000"); 7: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

     

    4、事件冒泡

    看下面的代码：

    1: $("body").click(function(){ 2: $(this).css("background","#EEEEEE"); 3: }); 4: $("ul").click(function(){ 5: $("body").html("

    NO CLICK !!!

    "    ); 6: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }当在 ul 标签之外的 body 点击，页面会变色，但是如果在 ul 上面点击的话，不仅仅页面内容变成 NO CLICK 了，页面也同时变色了，这是因为 ul 也属于 body 。这里的事件冒泡就是指用户在点击 ul 之后 ul 会将事件源传递给 body ，让 body 也响应事件。这个机制和 Flex 中的事件冒泡机制不同，要简单多。

    就上面的代码，如果要实现点击 ul 仅仅改变页面内容而不改变页面背景色，我们需要阻止事件冒泡。我们可以给方法加一个事件对象，再调用 stopPropagation() 方法阻止事件冒泡实现，代码如下：

    1: $("body").click(function(e){ 2: $(this).css("background","#EEEEEE"); 3: }); 4: $("ul").click(function(e){ 5: $("body").html("

    NO CLICK !!!

    "    ); 6: e.stopPropagation(); 7: }); 说到事件对象，我们就顺便了解一下 preventDefault() 方法，preventDefault() 方法是用来阻止浏览器的默认行为的，例如： 1: $("#submit").bind("click",function(e){ 2: if($("#username").val()==""){ 3: alert("用户账号不能为空哦，O(∩_∩)O~~"); 4: e.preventDefault(); 5: } 6: }); 此外，我们还可以通过在方法中返回 false 实现同时阻止事件冒泡和浏览器的默认行为(尽管有时候我们只需要阻止一个)： 1: $("body").click(function(){ 2: $(this).css("background","#EEEEEE"); 3: }); 4: $("ul").click(function(){ 5: $("body").html("

    NO CLICK !!!

    "    ); 6: return false; 7: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 1:   2: $("#submit").bind("click",function(){ 3: if($("#username").val()==""){ 4: alert("用户账号不能为空哦，O(∩_∩)O~~"); 5: return false; 6: } 7: }); 这时候我们就不需要事件对象了。 .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
    5、事件对象

    现在我们开始讲事件对象，事件对象在上面的事件冒泡已经讲过，主要介绍一些方法和属性。

    5.1  type 属性

    此属性代表事件类型，示例：

    1: $("body").click(function(e){ 2: alert(e.type); 3: });

    5.2 target 属性

    此属性代表触发时间的元素，示例：

    1: $("a").click(function(e){ 2: alert(e.target.href);//获取超链接的地址； 3: return false;//阻止连接超链接的默认行为； 4: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }5.3 pageX  和 pageY 属性

    此属性代表时间发生点的 X 和 Y 坐标，在事件绑定中已有示例。

    5.4 which 属性

    此属性代表点击鼠标的左中右键，1、2、3 分别代表左、中、右键。

    5.5 stopPropagation() 和 preventDefault() 方法

    已在事件冒泡中讲过，可以用 return false 同时实现两个方法。

    6、移除事件

    移除事件对应的方法是 unbind() ，移除事件分多种可能，比方说，有一个按钮绑定了多个事件，移除事件可能是想移除此按钮的所有事件，或者是移除某一类型事件，比如说 click 事件，再或者仅是想移除此按钮的某一个特定事件。

    6.1 移除元素的所有绑定事件

    移除元素的所有绑定事件可以调用无参的 unbind() 方法：

    1: $("body").bind("click",function(){ 2: $("a").unbind(); 3: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }调试这段代码时候我发现之前的某些代码在 safari 中调试感觉怪异的原因了，safari 把点击 javascript 提示框的也算作是在点击 body 了。

    6.2 移除元素的某一类型事件

    移除元素的某一类型事件在调用 unbind() 方法时应该传入解除绑定的事件类型名称：

    1: $("body").bind("click",function(){ 2: $("a").unbind("click"); 3: });

    6.3 移除某一特定事件

    移除某一特定事件就得在定义事件的时候为事件起个名称：

    1: $("a").click(a_click = function(e){ 2: alert(e.which); 3: return false; 4: }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

    然后通过调用 unbind() 方法，并且传入两个参数，一个是时间类型，一个是特定的方法名称，来解除特定事件的绑定：

    1: $("body").bind("click",function(){ 2: $("a").unbind("click",a_click); 3: });

    .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }这里需要注意的是：

    ①必须要指明事件类型；

    ②方法名称不是字符串；

    ③不同事件类型的方法不能重名（重名后解除事件无法工作，尽管在 unbind() 方法中传入了足够的判断参数）；

    7、模拟事件

    可能我们需要在网页加载结束就立即执行某个元素的某个事件，而不是等到用户主动去点击此元素而产生事件，这时需要的操作就是模拟事件。

    模拟操作我们需要调用一个 trigger() 方法，此方法的参数是需要模拟的事件类型：

    1: $("a").trigger("click"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }上段代码会在用户一进入页面就立即执行，而不是等待用户主动去点击。

    jQuery 还提供了另外一个简单的模拟操作方法：

    1: $("a").click(); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }同上一段代码具有相同的效果。

    如果页面上面有一个文本输入框，我们想要在用户一进入页面就执行此文本输入框的 focus 事件，并且此文本输入框得到焦点，我们可以这样做：

    1: $("#input").focus(function(){ 2: alert("Please input here.."); 3: }); 4:   5: $("#input").focus(); 但是如果我们需要的效果是用户进入界面仅仅立即执行此文本框的 focus 事件就结束了，而不是后续的让此文本框得到焦点，我们就需要调用另一个方法 triggerHandler() ： 1: $("#input").triggerHandler("focus"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }这时候用户进入网页仅会提示 "Please input here.."，而不立即使得该文本框获得焦点。

    ---EOF---

    未完不续

    最新回复(0)