JavaScript-jQuery事件处理、事件对象、对象拷贝、多库共存、jQuery插件

jQuery事件注册

jQuery事件注册

	<script>
		/*****************************************************************/
		//单个事件注册
		element.click(function(){
			//事件处理程序
		});
		
		/*****************************************************************/
		//事件on绑定事件
		element.on("click",function(){
			//事件处理程序
		});
		//绑定多个事件
		element.on({
			mouseover:function(){//事件处理程序},
			mouseout:function(){//事件处理程序}
		});
		//事件处理程序相同
		element.on("mouseover mouseout",function(){
			$(this).toggleClass('current');
		});
		//事件委托
		/*把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素*/
		element.on('click','li',function(){
			//事件处理程序
		});
		//动态创建的元素 无法直接给该元素绑定事件，就绑定在其父元素身上，再委托给该元素

		/*****************************************************************/
		$("p").off() // 解绑p元素所有事件处理程序
		$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
		$("ul").off("click", "li"); // 解绑事件委托
		
	</script>

jQuery事件处理

自动触发事件 trigger() triggerHandler()

	<script>
		/*****************************************************************/
		//1.简写形式
		$('btn').click();
		//2.第二种自动触发模式
		$('btn').trigger('click');
		//3.第三种自动触发模式  triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别
		$('input').triggerHandler('focus');
	</script>

jQuery事件对象

event事件对象

跟原生的event事件对象 相似

	<script>
		//事件对象
		$('btn').on('click',function(event){
			console.log(event);
			//阻止默认行为
			event.preventDefault();
			//阻止冒泡
			event.stopPropagation();
		});
	</script>

对象拷贝

	<script>
		//对象拷贝
		$.extend([deep],target,object1,[objectN]);
		/*
		1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
		2. target: 要拷贝的目标对象(即拷贝的数据存到这个目标对象里)
		3. object1:待拷贝到第一个对象的对象
		4. objectN:待拷贝到第N个对象的对象
		5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
		6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象
		*/
	</script>

多库共存

	<script>
		//解决方法1：
		//里面的 $ 符号 统一改为 jQuery
		// $('div') === jQuery('div')
		//解决方法2：
		var xx = jQuery.noConflict();
		// $符号 变成 xx
	</script>