`
cxy020
  • 浏览: 61461 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js事件(4)

 
阅读更多 
<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>jQuery事件</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
	<input id="btn1" type="button" value="btn1" />
	<input id="btn2" type="button" value="btn2" />
	<input id="btn3" type="button" value="btn3" />
	<input id="btn4" type="button" value="btn4" />
	<input id="btn5" type="button" value="btn5" />

	<!-- 采用onbind注册事件 -->
	<input id="btn6" type="button" value="btn6" />
</body>
</html>

<script type="text/javascript">
	//兼容ie浏览器测试
	var console = console || {};
	console.log = console.log || function(a){
		alert(a);
	}

	/*
	1.jquery事件
	*/

	//dom加载完成执行事件
	$(document).ready(function(){
		console.log("onload1");
	});
	//jquery中还有一种简写,如下
	$(function(){
		console.log("onload2");
	});
	/*
	这个事件可以在程序中多处实现,按加载顺序执行.
	window.onload只能实现一处,后面会覆盖前面的,并且这个执行的时间比jquery-ready要稍晚.
	*/

	/*
	注册事件,bind(types,data,fn),
	如果data不传,那么第二个参数可以直接传响应函数,
	如果传了第二个参数,第三个就必须传响应函数.
	*/

	//最简单的注册方式
	$("#btn1").bind("click",function(evt){
		console.log(this.id + " click");
	});
	//还有一种map注册方式
	$("#btn2").bind({
		"click":function(evt){
			console.log(this.id + " click");
		},
		"dblclick":function(evt){
			console.log(this.id + " dblclick");
		},
		"myevent":function(evt,a,b){
			console.log("myevent:" + a + "," + b);
		}
	});
	//给响应事件函数传递参数
	$("#btn1").bind("click",{"name":"chxy"},function(evt){
		//获取传递数据
		var data = evt.data;
		console.log("name:" + data.name + "," + this.id + " click");
	});

	//主动触发事件
	$("#btn2").trigger("dblclick");
	//trigger还可以触发自定义事件和传递参数,注意接收的时候始终都是从第二个开始,第一个是事件对象.
	$("#btn2").trigger("myevent",[1,2]);

	//移除事件
	$("#btn3").bind("click",function(evt){
		console.log(this.id + " click");
	});
	$("#btn3").bind({
		"click":function(evt){
			console.log(this.id + " click");
		},
		"dblclick":function(evt){
			console.log(this.id + " dblclick");
		}
	});
	//移除元素的某种事件
	$("#btn3").unbind("click");
	//移除全部元素事件
	$("#btn3").unbind();
	//如果要移除元素事件绑定的某个函数,就不能绑定匿名函数,否则也不能删除,和原生的removeEventListener类似.
	function btnClick(evt){
		console.log("btnClick:" + this.id + " click");
	}
	$("#btn4").bind("click",btnClick);
	$("#btn4").bind("click",function(evt){
		console.log(this.id + " click");
	});
	//移除btnClick
	$("#btn4").unbind("click",btnClick);

	/*
	在实际开发过程中,我们经常会碰到作用域的问题.
	事件响应后会产生一个新的作用域,有可能我们并不需要这个作用域,而希望得到原来的作用域.
	jquery中提供了一个proxy(function,context)接口,可以动态指定作用域.
	那么就让我们来封装一个jquery绑定事件接口吧!
	*/

	//extend,用来扩展jquery的函数.
	jQuery.fn.extend({
		//绑定事件,我们调整了参数位置,因为我感觉fn,比data重要,scope是作用域
		onbind:function(type,fn,scope,data){
			//采用proxy改变函数作用域
			return $(this).bind(type,data,$.proxy(fn,scope));
		}
	});

	//一个简单的例子
	function Test(){}
	Test.prototype = {
		name:"chxy",
		say1:function(){
			//this == Test
			console.log(this.name + " say1");
		},
		say2:function(){
			//this == btn6
			console.log(this.id + " say2");
		}
	};
	var t = new Test();
	//采用onbind注册
	$("#btn6").onbind("click",t.say1,t);
	//bind注册
	$("#btn6").bind("click",t.say2);

	/*
	知识点:
	1.dom加载完成之后响应事件,很多时候我们发现页面明明显示了该元素,但是js中缺获取不到,
	就要想想是否是在dom还没加载完,你就执行了那段js.
	2.jquery绑定事件/移除事件的方法.
	3.如何扩展/添加jquery接口.
	*/
</script>

 

分享到：
| js事件(3)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics