jQuery 이벤트: 바인딩 메소드와 Blur() 메소드 비교
- 黄舟원래의
- 2017-06-26 14:10:542129검색
1.bind 메소드
정의 및 사용법
bind() 메소드는 선택한 요소에 하나 이상의 이벤트 핸들러프로그램과 이벤트가 발생할 때 실행되는 함수를 추가합니다.
jq 버전 1.7부터 on() 메소드는 선택한 요소에 이벤트 핸들러를 추가하는 데 선호되는 메소드입니다
Syntax
$(selector).bind(event,data,function,map)
| Parameters | Description |
|---|---|
| 이벤트 | 필수입니다. 요소에 추가할 하나 이상의 이벤트를 지정합니다. 여러 이벤트 값은 공백으로 구분됩니다. 유효한 이벤트여야 합니다. |
| data | 선택사항. 함수에 전달될 추가 데이터를 지정합니다. |
| function | 필수입니다. 이벤트가 발생할 때 실행할 함수를 지정합니다. |
| map | 은 요소에 추가할 하나 이상의 이벤트와 이벤트가 발생할 때 실행할 함수를 포함하는 이벤트 맵({event:function, event:function, ...})을 지정합니다. 이벤트가 발생합니다. |
例1、给e388a4556c0f65e1904146cc1a846bee标签添加一个单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给<p>标签添加一个单击事件</title>
<script src="
</script>
<script>
$(document).ready(function(){
$("p").bind("click",function(){
alert("这个段落被点击了。");
});
});
</script></head><body><p>点我！</p></body></html>例2、向元素添加多个事件。（添加多个事件）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
向元素添加多个事件
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").bind("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<p>将鼠标移动到该段落上。</p>
</body>
</html>注意：toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。如果不存在指定的类则添加类，如果已设置则删除之。
例3、使用事件映射来向被选元素添加一些事件/函数（使用事件映射）
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8">
<title>
使用事件映射来向被选元素添加一些事件/函数
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","#E9E9E4");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我！</button>
</body>
</html>例4、向一个自定义命名的事件处理程序传递数据。（向函数传递数据）
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8">
<title>
向一个自定义命名的事件处理程序传递数据
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function handlerName(e)
{
alert(e.data.msg);
}
$(document).ready(function(){
$("p").bind("click", {msg: "你刚点击了!"}, handlerName)
});
</script>
</head>
<body>
<p>点我！</p>
</body>
</html>2、blur()方法
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。
提示：该方法常与 focus() 方法一起使用。
语法
为被选元素触发 blur 事件：
$(selector).blur()
添加函数到 blur 事件：
$(selector).blur(function)
| 参数 | 描述 |
|---|---|
| function | 可选。规定当 blur 事件发生时运行的函数。 |
例1、添加函数到blur事件，当input字段失去焦点时发生blur事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
添加函数到blur事件
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").blur(function(){
alert("输入框失去了焦点");
});
});
</script>
</head>
<body>e388a4556c0f65e1904146cc1a846bee在输入框写些东西，然后点击输入框外，让其失去焦点。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
例2、填写表单时需要实现如下效果
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>鼠标点击后无文字，挪开鼠标后有文字</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
/*进入焦点时触发*/
$("#account").focus(function(){
varoldValue = $(this).val();
if(oldValue == this.defaultValue){
$(this).val("");
}
});
/*失去焦点时触发*/
$("#account").blur(function(){
alert("12");
varoldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue);
}
});
});
</script>
</head>
<body>
帐号：<input id="account"name="account" type="text" value="请输入帐号">
</body>
</html>
위 내용은 jQuery 이벤트: 바인딩 메소드와 Blur() 메소드 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.