jquery on()方法及其参数使用

柔光的暖阳◎ 2022-08-19 11:25 218阅读 0赞

## 1.定义 ##

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

## 2.语法 ##

$( *selector*).on( *event,childSelector,data,function,map*)

##     ##

## 3.参数 ##

<table style="border:0px; margin:4px 0px; padding:0px; border-collapse:collapse; width:729px; color:rgb(51,51,51); font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,STHeiti,'Microsoft Yahei',sans-serif; font-size:12px"> 
 <tbody style="border:0px; margin:0px; padding:0px"> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <th align="left" style="border:1px solid rgb(85,85,85); margin:0px; padding:3px; color:rgb(255,255,255); vertical-align:top; background-color:rgb(85,85,85)"> 参数</th> 
   <th align="left" style="border:1px solid rgb(85,85,85); margin:0px; padding:3px; color:rgb(255,255,255); vertical-align:top; background-color:rgb(85,85,85)"> 描述</th> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> <span style="border:0px; margin:0px; padding:0px">event</span></td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 必需。规定要从被选元素移除的一个或多个事件或命名空间。<br> <br> 由空格分隔多个事件值。必须是有效的事件。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> <span style="border:0px; margin:0px; padding:0px">childSelector</span></td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> <span style="border:0px; margin:0px; padding:0px">data</span></td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 可选。规定传递到函数的额外数据。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> <span style="border:0px; margin:0px; padding:0px">function</span></td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 可选。规定当事件发生时运行的函数。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> <span style="border:0px; margin:0px; padding:0px">map</span></td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:1em; vertical-align:top"> 规定事件映射 (<span style="border:0px; margin:0px; padding:0px">{event:function, event:function, ...})</span>，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。<br> </td> 
  </tr> 
 </tbody> 
</table>

## 4.实例 ##

1. 基本用法

$("\#div1").on("click",function()\{  
$(this).css("background-color","pink");  
\});

2. 绑定div下所有p标签的click方法

$("\#div1").on("click","p",function()\{  
$(this).css("background-color","pink");  
\});

3. 一个元素多个事件绑定同一个方法

$("p").on("mouseover mouseout",function()\{  
$("p").toggleClass("intro");  
\});

4. 一个元素绑定不同事件不同方法

$("p").on(\{  
mouseover:function()\{$("body").css("background-color","lightgray");\},  
mouseout:function()\{$("body").css("background-color","lightblue");\},  
click:function()\{$("body").css("background-color","yellow");\}  
\});

5. 绑定自定义元素

$("p").on("myOwnEvent", function(event, showName)\{  
$(this).text(showName + "! What a beautiful name!").show();  
\});  
$("button").click(function()\{  
$("p").trigger("myOwnEvent",\["Anja"\]);  
\});

6. 传入数据

function handlerName(event) \{  
alert(event.data.msg);  
\}

$(document).ready(function()\{  
$("p").on("click", \{msg: "You just clicked me!"\}, handlerName)  
\});

7. 向将要创建的元素绑定方法

$(document).ready(function()\{  
$("div").on("click","p",function()\{  
$(this).slideToggle();  
\});  
$("button").click(function()\{  
$("<p>This is a new paragraph.</p>").insertAfter("button");  
\});  
\});

8. 移除事件

$(document).ready(function()\{  
$("p").on("click",function()\{  
$(this).css("background-color","pink");  
\});  
$("button").click(function()\{  
$("p").off("click");  
\});  
\});

##     ##