jQuery에서 on() 함수의 역할과 사용법을 분석합니다.-JS 튜토리얼-php.cn

jQuery에서 on() 함수의 역할과 사용법을 분석합니다.

巴扎黑

풀어 주다： 2017-06-25 10:39:18

원래의

1771명이 탐색했습니다.

이 글에서는 주로 jQuery에서 on() 메소드의 사용법을 소개하고, 하나 이상의 이벤트 처리 함수를 일치하는 요소에 바인딩하는 사용법과 예제를 통해 on() 메소드의 정의를 분석합니다. 참고로

이 글에서는 jQuery의 on() 메소드 사용법을 예시와 함께 설명하고 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이 방법은 하나 이상의 이벤트 처리 기능을 일치하는 요소에 바인딩할 수 있습니다.
on() 메서드에 바인딩된 이벤트를 삭제하려면 off() 메서드를 사용하세요.

문법 구조 1:

코드는 다음과 같습니다.

$(selector).on(events,[selector],[data],fn)

매개변수 목록:

Parameters	Description
events	하나 이상의 공백으로 구분된 이벤트 유형과 선택적 namespace.
선택기	선택사항. 선택한 요소를 필터링하는 선택기 string, 핸들러는 이 선택기의 하위 요소에 대해 호출됩니다. 선택 항목이 비어 있거나 무시된 경우 선택한 요소에 도달하면 이벤트가 항상 시작됩니다.
data	선택사항. 이벤트 핸들러 함수에 의한 처리를 위해 event.data 속성의 값으로 이벤트 객체에 전달되는 추가 데이터 객체입니다.
fn	이 이벤트가 트리거될 때 실행되는 함수입니다. false 값은 false를 반환하는 함수의 약칭으로 사용될 수도 있습니다.

예제 코드:

예제 1:

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("p").on("click",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

로그인 후 복사

위 코드는 p를 클릭하면 p에 새 텍스트 콘텐츠를 설정할 수 있습니다.

예제 2:

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("p").on("click mousemove",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

로그인 후 복사

위 코드는 두 개의 이벤트를 p에 바인딩합니다. p를 클릭하거나 p에서 마우스를 움직이면 새 텍스트 콘텐츠가 p에 설정됩니다.

예제 3:

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  width:60px; 
  height:60px; 
  border:1px solid green; 
  font-size:12px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $("p").on("click",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

로그인 후 복사

위 코드는 data 매개변수를 사용하여 바인딩된 이벤트 처리 함수에 데이터를 전달합니다.

예제 4:

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.parent{
  width:160px;
  height:160px;
  border:1px solid green;
  font-size:12px;
}
.children{
  width:100px;
  height:100px;
  border:1px solid red;
}
span{background-color:green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $(".parent").on("click",".children",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script>
</head>
<body>
<p class="parent">
  <p class="children"><span>原来内容</span></p>
</p>
<span>大家好</span>
</body>
</html>

로그인 후 복사

위 코드는 선택기 문자열을 사용하여 일치하는 요소의 하위 요소 중 바인딩된 이벤트에 응답할 수 있는 요소를 필터링합니다. 위 코드에서 클래스 이름이 children인 요소와 해당 하위 요소는 바인딩된 이벤트를 호출할 수 있습니다.
문법 구조 2:

코드는 다음과 같습니다.

$(selector).on(object,[selector],[data])

매개변수 목록:

参数	描述
object	一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector	可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data	可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" /> 
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  width:160px; 
  height:160px; 
  border:1px solid green; 
  font-size:12px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $("p").on({click:function(e){ 
    $(this).text(e.data.mytext); 
  }},{"mytext":newtext}) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

로그인 후 복사

以上代码中，事件类型和事件处理函数以对象的形式绑定的。

위 내용은 jQuery에서 on() 함수의 역할과 사용법을 분석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!