jQuery事件函数－点击、双击、键盘按键、鼠标滑动、失去焦点、显示哪个 DOM 元素触发了事件／返回事件的类型。等

于 2017-08-17 11:19:58 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tane_e/article/details/77318859
版权

1.bind():

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。当添加多个事件时，用逗号分隔开。

例：当鼠标点击按钮后，如果文本p的内容可见则设为不可见，如果不可见，则设为可见。同时，当鼠标放在按钮上时，body的背景颜色变成红色，当鼠标移开时，变回白色。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({   

    click:function(){$("p").slideToggle();},

   mouseover:function(){$("body").css("background-color","red");}, 

    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>

另一种用法：

$(document).ready(function(){
  $("p").bind('click dblclick mouseover mouseout',function(event){
    $("div").html("事件：" + event.type);
  });
});

2.blur():

当元素失去焦点时发生 blur 事件。

例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
  $("#btn1").click(function(){
    $("input").focus();
  });  
  $("#btn2").click(function(){
    $("input").blur();
  }); 
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
</html>

结果：

Enter your name: 

请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。

3.change():

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时   发生。


例1:激发文本域的change()事件：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
  $("button").click(function(){
    $("input").change();
  });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>

结果：

Enter your name: 


例2:change 事件用于 select 元素：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>

结果：

在某个域被使用或改变时，它会改变颜色。

Enter your name: 

Car: 

  •  
  •  
  •  
  •  
  •  


    • 4.click():

    当点击元素时，会发生 click 事件。
    当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

    5.dblclick():

    当双击元素时，会发生 dblclick 事件。

    例：点击鼠标，隐藏或显示文本；双击文本时，触发本例按钮事件，即隐藏或显示文本。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").slideToggle();
      });
      $("p").dblclick(function(){
        $("button").click();
      });
    });
    </script>
    </head>
    <body>
    <button>点击这里进行切换</button>
    <p>双击本段落会触发上面这个按钮的 click 事件。</p>
    </body>
    </html>


    结果：

    双击本段落会触发上面这个按钮的 click 事件。

    6.delegate():

    delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
    使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。


    例：当点击鼠标时，插入新的p元素，点击任意一个p元素，它会消失

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("div").delegate("p","click",function(){
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("<p>这是一个新段落。</p>").insertAfter("button");
      });
    });
    </script>
    </head>
    <body>
    <div style="background-color:yellow">
    <p>这是一个段落。</p>
    <p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
    <button>在本按钮后面插入一个新的 p 元素</button>
    </div>
    <p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
    </body>
    </html>

    结果：

    这是一个段落。

    请点击任意一个 p 元素，它会消失。包括本段落。

    这是一个新段落。

    这是一个新段落。

    注释：通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。

    7.die()方法：

    例：移除所有通过 live() 方法向 p 元素添加的事件处理程序：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").live("click",function(){
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("p").die();
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p>请点击任意 p 元素，段落会消失。包括本段落。</p>
    <button>移除通过 live() 方法向 p 元素添加的事件处理程序</button>
    </body>
    </html>

    结果：

    这是一个段落。

    请点击任意 p 元素，段落会消失。包括本段落。


    8.error():

    例：如果图像不存在，则用一段预定义的文本取代它：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("img").error(function(){
        $("img").replaceWith("<p><b>图片未加载！</b></p>");
      });
    });
    </script>
    </head>
    <body>
    <img src="errorimg.gif" />
    <p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>
    </body>
    </html>

    9.event.isDefaultPrevent():

    例：防止链接打开 URL，并声明来自 isDefaultPrevented() 的结果：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("a").click(function(event){
        event.preventDefault();
        alert("Default prevented: " + event.isDefaultPrevented());
      });
    });
    </script>
    </head>
    <body>
    <a href="http://w3school.com.cn/">W3School</a>
    <p>preventDefault() 方法将防止上面的链接打开 URL。</p>
    <p>请点击该链接，检查是否阻止了默认动作。</p>
    </body>
    </html>

    10.event.pageX():相当于文档左边缘鼠标的位置

    11.event.pageY():相当于文档上边缘鼠标的位置

    例：显示鼠标指针的位置：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){ 
        $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
      });
    });


    </script>
    </head>
    <body>
    <p>鼠标指针位于： <span></span></p>
    </body>
    </html>

    结果：

    鼠标指针位于： X:2,Y:12

    12.event.preventDefault():

    例：preventDefault() 方法将防止上面的链接打开 URL。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("a").click(function(event){
        event.preventDefault();
      });
    });
    </script>
    </head>
    <body>
    <a href="http://w3school.com.cn/">W3School</a>
    <p>preventDefault() 方法将防止上面的链接打开 URL。</p>
    </body>
    </html>

    13.event.result():

    显示最后一次点击事件返回的结果：

    $("button").click(function(e) {
    $("p").html(e.result);
    });

    例：点击按钮后返回最后一次点击鼠标的位置：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(e) {
        return ("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY);
      });
      $("button").click(function(e) {
        $("p").html(e.result);
      });  
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <button>请点击这里</button>
    </body>
    </html>

    14.event.target():

    显示哪个 DOM 元素触发了事件：


    例：如果点击了标题，下面的div会则显示：“点击事件由一个 H2元素触发”；

    如果点击了段落，下面的div会则显示：“点击事件由一个P 元素触发”;

    如果点击了按钮，下面的div会则显示：“点击事件由一个 BUTTON 元素触发”

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p, button, h1, h2").click(function(event){
        $("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
      });
    });
    </script>
    </head>


    <body>
    <h1>这是一个标题</h1>
    <h2>这是另一个标题</h2>
    <p>这是一个段落</p>
    <button>这是一个按钮</button>
    <div></div>
    </body>
    </html>

    15.event.timeStamp():

    timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。


    例：点击按钮后返回从197-年1月1日到事件被触发时的毫秒数：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(e){
        $("span").text(e.timeStamp);
      });
    });
    </script>
    </head>
    <body>
    <p>对下面这个按钮的点击事件发生在 1970 年 1 月 1 日之后 <span>unknown</span> 毫秒。</p>
    <button>Click me</button>
    </body>
    </html>

    16.event.type():

    返回事件的类型。

    例：该段落定义了 click、double-click、mouseover 以及 mouseout 事件。如果触发了其中的一个事件，下面的 div 中会显示出事件的类型：会返回click、double-click、mouseover 以及 mouseout 其中的一个。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").bind('click dblclick mouseover mouseout',function(event){
        $("div").html("事件："     + event.type);
      });
    });
    </script>
    </head>


    <body>
    <p>该段落。</p>
    <div></div>
    </body>
    </html>

    注释：$("元素名称").html():获取元素的内容。

    17.event.which():
    指示按了哪个按钮或按键的序号.


    例：在输入框中键入字符，会显示按键的序号：Key:76

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("input").keydown(function(event){ 
        $("div").html("Key: " +     event.which);
      });
    });
    </script>
    </head>
    <body>


    请随意键入一些字符：<input type="text" />
    <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
    <div />


    </body>
    </html>

    18.focus():

    当元素获得焦点时，发生 focus 事件。
    当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。


    例：鼠标点击文本域，获得焦点，移开失去焦点：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("input").focus(function(){
        $("input").css("background-color","#FFFFCC");
      });
      $("input").blur(function(){
        $("input").css("background-color","#D6D6FF");
      });
    });
    </script>
    </head>
    <body>
    Enter your name: <input type="text" />
    <p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
    </body>
    </html>

    19.keydown():当键盘上的按键被按下时发生；

    20.keyup():当按键被松开时发生：

    例：当发生keydown事件时，即按键被按下时，文本域背景颜色变成黄色，当发生keyup()事件时，即按键被松开时，文本域颜色变成紫色。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("input").keydown(function(){
        $("input").css("background-color","#FFFFCC");
      });
      $("input").keyup(function(){
        $("input").css("background-color","#D6D6FF");
      });
    });
    </script>
    </head>
    <body>
    Enter your name: <input type="text" />
    <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
    </body>
    </html>

    21.keypress():

    计算在输入域中的按键次数：

    例：在文本域中按键，显示例如：keypress:3

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    i=0;
    $(document).ready(function(){
      $("input").keypress(function(){
        $("span").text(i+=1);
      });
    });
    </script>
    </head>
    <body>
    Enter your name: <input type="text" />
    <p>Keypresses:<span>0</span></p>
    </body>
    </html>

    22.load():

    当指定元素加载时，改变某元素文本。

    例：当图像加载时，改变div元素文本。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("img").load(function(){
        $("div").text("图像已加载");
      });
    });
    </script>
    </head>
    <body>
    <img src="/i/shanghai_lupu_bridge.jpg" />
    <div>图像正在加载中 ...</div>
    <p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p>
    </body>
    </html>

    23.mousedown():

    当鼠标移到元素上方并按下鼠标时，会触发mousedown()事件。


    例：当在按钮上按下鼠标按键时，显示或隐藏元素p.

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").mousedown(function(){
        $("p").slideToggle();
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <button>切换</button>
    </body>
    </html>

    24.mouseenter():

    25.mouseleave():

    当鼠标指针穿过元素时，发生mouseenter()事件。mouseover()经常与mouseleave事件连用。

    当鼠标指针离开元素时，发生mouselesve()事件。

    例：当鼠标指针穿过元素p时，改变元素p的背景颜色为黄色，当鼠标离开元素p时，p的背景颜色变回灰色。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").mouseenter(function(){
        $("p").css("background-color","yellow");
      });
      $("p").mouseleave(function(){
        $("p").css("background-color","#E9E9E4");
      });
    });
    </script>
    </head>
    <body>
    <p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
    </body>
    </html>

    26.mousemove():

    当鼠标指针在元素上移动时，触发mousemove()事件。

    用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

    例：当鼠标在元素p上移动时，返回鼠标指针的位置：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(document).mousemove(function(e){
        $("span").text(e.pageX + ", " + e.pageY);
      });
    });
    </script>
    </head>
    <body>
    <p>鼠标位于坐标： <span></span>.</p>
    </body>
    </html>

    27.mouseover():

    28.mouseout()：

    当鼠标指针位于元素上方时触发mouseover()，与mouseenter不同，mouseover不论鼠标指针穿过被选元素或其子元素，都会触发，而mouseenter()只有在穿过元素时才发生

    与mouseover连用，当鼠标移开元素上方时发生。与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件.

    例：当鼠标移到元素上或移开元素上时，变换p的背景颜色。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").mouseover(function(){
        $("p").css("background-color","yellow");
      });
      $("p").mouseout(function(){
        $("p").css("background-color","#E9E9E4");
      });
    });
    </script>
    </head>
    <body>
    <p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
    </body>
    </html>

    29.mouseup():

    当在元素上方松开鼠标按钮时就会触发事件，与click()事件不同。


    例：当在按钮上方松开鼠标按钮时，显示或隐藏文本。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").mouseup(function(){
        $("p").slideToggle();
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <button>切换</button>
    </body>
    </html>

    30.one():

    当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

    例：点击p元素时，增加文本大小，但每个文本p的大小只能增加一次。

    <html>

    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").one("click",function(){
        $(this).animate({fontSize:"+=6px"});
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>
    </body>
    </html>

    31.ready():

    当文档加载完成后触发ready事件。

    $(document).ready(function(){
    $(".btn1").click(function(){
    $("p").slideToggle();
    });
    });

    32.resize():

    当调整浏览器窗口大小时，触发resize()事件。

    例：当调整浏览器窗口大小后，会返回：例如：窗口大小被调整过2次。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x=0;
    $(document).ready(function(){
    $(window).resize(function() {
      $("span").text(x+=1);
    });


    });
    </script>
    </head>
    <body>
    <p>窗口大小被调整过 <span>0</span> 次。</p>
    <p>请试着重新调整浏览器窗口的大小。</p>
    </body>
    </html>

    33.scroll():
    当滚动指定元素时，会发生滚动事件。

    例：对元素滚动的次数进行计数。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x=0;
    $(document).ready(function(){
      $("div").scroll(function() {
        $("span").text(x+=1);
      });
    });
    </script>
    </head>
    <body>
    <p>请试着滚动 DIV 中的文本：</p>
    <div style="width:200px;height:100px;overflow:scroll;">text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. 
    <br /><br />
    text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>
    <p>滚动了 <span>0</span> 次。</p>
    </body>
    </html>

    34.select():

    当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

    例：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("input").select(function(){
        $("input").after(" Text marked!");
      });
    });
    </script>
    </head>
    <body>
    <input type="text" name="FirstName" value="Hello World" />
    <p>请试着选取输入域中的文本，看看会发生什么。</p>
    </body>
    </html>

    35.submit():

    当提交表单时，会发生submit事件。

    例：当提交表单时，显示警告框。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("form").submit(function(e){
        alert("Submitted");
      });
    });
    </script>
    </head>
    <body>
    <form name="input" action="" method="get">
    First name: 
    <input type="text" name="FirstName" value="Mickey" size="20">
    <br />Last name: 
    <input type="text" name="LastName" value="Mouse" size="20">
    <br />
    <input type="submit" value="Submit">
    </form> 
    </body>
    </html>

    36.toggle():

    toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

    例：切换不同的背景色

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").toggle(
      function(){
      $("body").css("background-color","green");},
      function(){
      $("body").css("background-color","red");},
      function(){
      $("body").css("background-color","yellow");}
    );
    });
    </script>
    </head>
    <body>
    <button>请点击这里，来切换不同的背景颜色</button>
    </body>
    </html>

    37.trigger():

    触发被选元素的指定事件类型。

    例：触发input元素的select事件。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("input").select(function(){
        $("input").after("文本被选中！");
      });
      $("button").click(function(){
        $("input").trigger("select");
      });
    });
    </script>
    </head>
    <body>
    <input type="text" name="FirstName" value="Hello World" />
    <br />
    <button>激活 input 域的 select 事件</button>
    </body>
    </html>

    39.unbind():

    移除被选元素的事件处理程序。

    例：移除元素p的事件处理程序：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").click(function(){
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("p").unbind();
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <p>点击任何段落可以令其消失。包括本段落。</p>
    <button>删除 p 元素的事件处理器</button>
    </body>
    </html>

    40.undelegate():
    undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
    例：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("body").delegate("p","click",function(){
        $(this).slideToggle();
      });
      $("button").click(function(){
        $("body").undelegate();
      });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>点击任何段落可以令其消失。包括本段落。</p>
    <button>从所有元素删除由 delegate() 方法添加的事件处理器</button>
    </body>
    </html>

    41.unload():

    当用户离开页面时会触发该事件：

    例：当用户离开页面时会弹出一个警告框。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(window).unload(function(){
        alert("再见！");
      });
    });
    </script>
    </head>
    <body>
    <p>当您点击 <a href="http://w3school.com.cn">这个链接</a> 时，或者关闭窗口，会触发一个警告框。</p>
    </body>
    </html>









    tanlina_97
    关注
    专栏目录
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值