前端编程提高之旅（十五）----jquery事件

最新推荐文章于 2014-12-13 16:48:34 发布

产品经理读书会

最新推荐文章于 2014-12-13 16:48:34 发布

阅读量1k

点赞数

分类专栏：前端编程提高之旅前端开发提高之旅

本文链接：https://blog.csdn.net/yingyiledi/article/details/41555493

版权

前端编程提高之旅同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端开发提高之旅

18 篇文章 4 订阅

订阅专栏

HTML与js交互主要通过用户与浏览器操作页面时引发事件。文档或某些元素发生某些变化或操作时，浏览器会生成事件。jquery增加了事件处理能力。

jquery事件部分可以从以下五部分理解：

一、加载DOM函数

这里指的如下方法：

 $(document).ready(function(){
  })

相比于传统的window.onload方法，前者在执行时机与可否多次使用上区别于后者。

前者是在DOM完全就绪回调就会被调用，后者则是网页所有元素（包含关联文件）完全加载到浏览器后才会被调用。这里常见应用场景是，当需要对图片进行操作时，需要采用后者，因为后者才能保证图片文件被加载完成执行。

前者可以多次使用，而后者只能使用一次，即便多次定义，后定义的函数会将之前定义的函数覆盖掉。

二、各种事件绑定的方法

(1）一般绑定方法：bind方法

bind方法参数分别定义事件类型、回调函数。

构建一个实例，HTML如下：

<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>

bind使用代码如下：

  $("#panel h5.head").bind("click",function(){
	    var $content = $(this).next();
	    if($content.is(":visible")){
			$content.hide();
		}else{
			$content.show();
		}
	})

需要注意的是，回调函数内，this指的是带有相应行为的DOM元素，如需使用jquery中方法，徐将其转化为Jquery对象$(this)形式。

（2）在bind基础上，简写绑定方法

简写的绑定方法，方法名代表事件类型，参数为回调函数。

依然延续上例，简写方法使用如下：

$("#panel h5.head").mouseover(function(){
	    $(this).next().show();
	}).mouseout(function(){
	    $(this).next().hide();
	})

（3）合成事件

这里合成事件有两个hover方法与toggle方法。

hover方法用于模拟鼠标悬停事件，有两个回调函数作为参数，第一个回调代表光标移入执行，第二个回调代表光标移出执行。

沿用上例，使用方法如下：

$("#panel h5.head").hover(function(){
	    $(this).next().show();
	},function(){
	    $(this).next().hide();   
	})

toggle方法用于模拟鼠标连续单击行为，参数为多个回调，每个回调会根据单击次序顺序循环执行。

不过这个方法在jquery1.9版本已经被删除了，这里并不多做讨论。

（4）模拟操作

模拟的是操作，也即是交互行为，从而引发事件，执行回调。这里用到的是trigger方法。

举个例子，HTML代码：

<button id="btn">点击我</button>
<div id="test"></div>

采用模拟操作的代码：

$('#btn').bind("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	   $('#btn').trigger("click");

对DOM绑定了单击事件，采用trigger方法，模拟了click事件，从而执行了回调。

这里trigger方法模拟操作的事件还可以是自定义事件，当然也需要同时绑定自定义事件。

依然延续上例，采用自定义事件代码实例：

$('#btn').bind("myClick", function(){
			$('#test').append("<p>我的自定义事件.</p>");
		});
	   $('#btn').click(function(){
			$(this).trigger("myClick");
	   });

trigger方法除了可以模拟操作，还可以在第二个参数中传入数据，这在MVC框架中，view间传递数据极其常用。

$('#btn').bind("myClick", function(event, message1, message2){
			$('#test').append( "<p>"+message1 + message2 +"</p>");
		});
	   $('#btn').click(function(){
			$(this).trigger("myClick",["我的自定义","事件"]);
	   });

采用triggerHandler方法可以模拟操作的同时避免触发浏览器默认操作，具体实例如下：

html：

<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />

jquery代码：

 $('#old').bind("click", function(){
			$("input").trigger("focus");
		});
		$('#new').bind("click", function(){
		    $("input").triggerHandler("focus");
		});
		$("input").focus(function(){
            $("body").append("<p>focus.</p>");
        })

对比可知，后者没有触发浏览器默认聚焦功能。

（5）绑定多个事件

绑定多个事件的方法可采用bind方法，在第一个参数中将事件类型空格隔开。

使用案例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
  div{
	width:100px;
	height:50px;
  }
  .over{
  color:red;
  background:#888;
  } 
  </style>
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function(){
     $("div").bind("mouseover mouseout click", function(){
        $(this).toggleClass("over");
     });
  })
  </script>
</head>
<body>
<div >滑入.</div>
</body>
</html>

（6）给绑定事件添加命名空间

命名空间便于管理，当元素绑定多个事件时，删除事件只需要指定命名空间，节省了代码量。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
	div{width:100px;height:50px;background:#888;color:white;}
 </style>
  <script src="../../scripts/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function(){
	$("div").bind("click.plugin",function(){
	       $("body").append("<p>click事件</p>");
	});
	$("div").bind("mouseover.plugin", function(){
	       $("body").append("<p>mouseover事件</p>");
	});
	$("div").bind("dblclick", function(){
		   $("body").append("<p>dblclick事件</p>");
	});
	$("button").click(function() {
		$("div").unbind(".plugin");  
	})
	/*
		click,mouseover 事件被删除，
	*/
  })
  </script>
</head>
<body>
<div>test.</div>
<button >根据命名空间，删除事件</button>
</body>
</html>

三、移除事件

上面提到了绑定事件的各种方法，移除事件主要采用unbind方法，第一个参数即移除事件名，第二个参数可选为移除回调函数。

使用实例：

$('#btn').bind("click", myFun1 = function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", myFun2 = function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", myFun3 = function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	   $('#delTwo').click(function(){
			  $('#btn').unbind("click",myFun2);//移除第二个绑定click函数
	   });

假如事件只需执行一次，可以采用one方法进行事件绑定，用法类似bind方法。

 $('#btn').one("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).one("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).one("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });

四、事件对象属性

事件对象，顾名思义即触发事件后，传入回调函数的对象，包含事件类型、事件目标、光标位置等与事件有关的属性。

根据这些事件对象属性，便于编写关于本事件的各种操作。常用的防止多次单击、防止冒泡、默认操作都采用事件对象属性实现。

实例：

$("a").click(function(event) {
	  alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
	  return false;//阻止链接跳转
	});

五、事件冒泡与阻止默认行为

（1）事件冒泡

关于事件冒泡，即触发一个事件，整个事件会从本层元素向外部包含的元素扩散，这样就可能导致，不希望触发的元素被触发事件。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-4-1</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	// 为span元素绑定click事件
	$('span').bind("click",function(){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>

<div id="msg"></div>
</body>
</html>

解决事件冒泡的方法是在上述案例中，执行事件对象属性防止对象冒泡方法event.stopPropagation方法。

$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});

（2）阻止浏览器默认行为

这里采用的是事件对象属性的event.preventDefault方法。

（3）如果既想阻止冒泡行为，又需要阻止浏览器默认行为，可以再回调中返回false，一并执行。

实例：

$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});

产品经理读书会

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端编程提高之旅（十五）----jquery事件

HTML与js交互主要通过用户与浏览器操作页面时引发事件。文档或某些元素发生某些变化或操作时，浏览器会生成事件。jquery增加了事件处理能力。 jquery事件部分可以从以下五部分理解：一、加载DOM函数这里指的如下方法： $(document).ready(function(){ }) 相比于传统的window.onload方法，前者在执行时
复制链接

扫一扫