jQuery에서 on() 함수의 역할과 사용법을 분석합니다.
- 巴扎黑원래의
- 2017-06-25 10:39:181772검색
이 글에서는 주로 jQuery에서 on() 메소드의 사용법을 소개하고, 하나 이상의 이벤트 처리 함수를 일치하는 요소에 바인딩하는 사용법과 예제를 통해 on() 메소드의 정의를 분석합니다. 참고로
이 글에서는 jQuery의 on() 메소드 사용법을 예시와 함께 설명하고 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
이 방법은 하나 이상의 이벤트 처리 기능을 일치하는 요소에 바인딩할 수 있습니다.
on() 메서드에 바인딩된 이벤트를 삭제하려면 off() 메서드를 사용하세요.
문법 구조 1:
코드는 다음과 같습니다.
$(selector).on(events,[selector],[data],fn)
매개변수 목록:
예제 코드:
예제 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])
매개변수 목록:
实例代码:
代码如下:
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!