jQuery中的事件处理和分层

事件流模型
1 冒泡型事件流（Bubbling）:指由内向外触发事件
事件由叶子节点沿祖先节点一直向上传递到根节点
取消事件冒泡:使用 event 对象，e.cancelBubble=true;
例如：

<div id="d1" onclick="f2(event);">
			<a href="javascript:;" onclick="f1(event);">Cilck Me</a>
		      </div>
		function f1(e){ alert('点击了连接'); e.cancelBubble=true;//取消冒泡 }
		function f2(e){ alert('点击了 div'); }

2 捕获型事件流（Capturing）:指由外向内触发事件
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡
ele.addEventListener(‘click’,doSomething2,true)true=捕获false=冒泡
由DOM树最顶元素一直到最精确的元素，与冒泡型事件相反
总结：DOM标准事件模型：DOM标准既支持冒泡型事件，也支持捕获型事件，可以说是两者的结合体，首先是捕获型，接着冒泡传递。
3 事件绑定
1 事件绑定的不同方式
1）bind()
概念：为每个匹配元素的特定事件绑定事件处理函数
格式：bind(type,[data],fn);

$(选择器).bind("事件名","回调函数")；解绑 unbind $(选择器).unbind("事件名");
		
		$('#d1').bind('click',function(){//正式写法，常用于解决浏览器兼容性 用户点id为d1的元素，即执行
			$(this).html('hello java'); //$(this)为当前jQuery 对象:被单击的id为d1的元素
		});
		$('#d1').click(function(){//简写形式
			$(this).html('hello java'); 
		});

		//含有一个或多个事件类型的字符串
		$('#d1').bind('click submit',function(){ 
			$(this).html('hello java');  
		});
		$('#d1').bind({
			'click':function(){ $(this).html('hello java'); }
			'dblclick':function(){ $(this).html('bye');  }
		});

注：含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名，bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效。

2）on()
概念：在选择元素上绑定一个或多个事件的事件处理函数
格式：on(events,[selector],[data],fn)
注：on()绑定事件的方法性能要高于live()。
3） live()
概念：jQuery 给所有匹配的元素附加一个事件处理函数
格式：live(type,[data],fn);
注：可以绑定多个事件，即使这个元素是以后再添加进来的也有效。
4）one()
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。(第二次失效)
2 jQuery事件集合特性/合成事件
1）hover(enter,leave)：模拟光标悬停事件。
jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。
例如：

$(function(){
			 $('.s1').hover(
				function(){ 
					$(this).addClass('s2');//光标进入
				},
				function(){ 
					$(this).removeClass('s2');//光标离开 
				}); 
			});

2）不使用合成事件的方式。
例如：

$('.s1').mouseenter(function(){//鼠标移入
				$(this).addClass('s2');//绑定了 mouseenter 事件的 div
		      });
		      $('.s1').mouseleave(function(){//鼠标移出
				$(this).removeClass('s2');
		      });

3）toggle(function1(){},function2(){},…)：模拟光标连续单击事件。根据鼠标点击的次数，依次运行多个函数
例如：

$(function(){ 
		$('a').toggle(
			function(){
				$('#d1').show('slow');
			},
			function(){ 
				$('#d1').hide('slow'); 
			}
		     );
		 });
		<a href="javascript:;">显示所有票价</a>
		<div id="d1" style="display:none;">头等舱：￥2400<br />商务舱：￥2200<br />经济舱：￥1200<br /></div>

4）模拟操作：trigger(‘click’)

$(function(){
		$('#b1').click(function(){
			//模拟用户点击了 username 文本框，即让 username 文本框产生焦点获得事件
			$('#username').trigger('focus');
			//$('#username').focus();//简写形式，模拟获得焦点
			//$('#username').click();//模拟点击 }); 
		});

3 jQuery中的常用事件
js 是事件驱动的。当发生一个事件的时候，触发一个方法（回调函数）
1 DOM的载入事件（文档就绪函数）
1) $(document).ready(); 2)$ ().ready();
3)$(function(){})
注：当页面加载完成之后执行的函数
当不写预加载函数时，需要将jquery代码放在html代码的（下）面
2 键盘事件
1） .keydown当键盘或按钮被按下时，发生 keydown 事件。
2） .keyup当按钮被松开时，发生 keyup 事件。内码
3） .keypress当键盘或按钮被按下时，发生 keypress 事件。ASC
3 鼠标事件
1） .click鼠标单击触发的事件。
2） .dblclick鼠标双击触发的事件。
3） .mousemove鼠标移动时触发的事件用户把鼠标移动一个像素，就会发生一次,耗费系统资源。请谨慎使用该事件。
4） .mouseover鼠标移上/划过时触发的事件（划过子元素触发）
5） .mouseout鼠标移出时触发的事件（移出子元素触发）
6） .mousedown 按下鼠标
7） .mouseup 松开鼠标
8） .mouseenter 鼠标进入（进入子元素不触发）
9） .mouseleave 鼠标离开（离开子元素不触发）
4 表单事件
1) .submit表单提交事件（当表单提交时触发的事件）
2) .focus元素获得焦点事件
3) .blur 元素失去焦点事件
4) .change元素内容改变事件（主要针对下拉列表 input(value).textarea 也可以）
5) .select 用户选中文本框中的内容当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
5 其他事件
1) .load 元素加载完毕
2) .unload 用户离开页面

jQuery中的事件处理和分层

猜你喜欢