事件的委托以及拖拽效果

一：事件绑定的方式

1·1：html元素内进行绑定

1·2：JS进行绑定

1·3：使用事件监听进行绑定

事件源(元素).addEventListener(去掉on的事件,回调函数,[是否是捕获])

用处一：可以为一个元素，多次绑定相同的事件(类似于代码的合并)

 document.addEventListener("click",function(){
 	alert(1);
 });
	
 document.addEventListener("click",function(){
 	alert(2);
 });

用处二：解决事件是捕获还是冒泡【true表示捕获，false表示冒泡】

document.addEventListener("click",function(){
	 	alert("document");
	},true);
	
window.addEventListener("click",function(){
 		alert("window");
	},true);

【当冒泡和捕获同时存在的时候：先捕获在冒泡】

1·4：事件监听的兼容性

• 谷歌等：元素.addEventListener(“去掉on的事件”,function(){},[是否是捕获])默认不写为false冒泡

• IE：元素.attachEvent(“on事件”，function(){})没有第三个参数，默认就是冒泡

• 兼容写法

    function addEvent(obj,type,callBack){
          if(obj.addEventListener){
              obj.addEventListener(type,callBack);
          }else{
              obj.attachEvent("on"+type,callBack);
          }
      }
   addEvent(document,"click",function(){alert("兼容写法")});
  
  

二：事件的委托

定义：某一个事件让其他元素来完成

2·1：委托的好处

• 把某一个事件加到父元素的身上，提高程序的执行效率
• 动态创建的元素，为新添加的元素，提前绑定事件

2·2：委托的实现方法

步骤一：父元素.事件=function（evt）{ }，

步骤二：获取事件的真正操作元素（注意：委托中真实的事件不是this）

兼容写法：
var target = e.srcElement || e.target;

if（target.tagname==“真正操作元素”）{}

targat就代表了当前操作的li

注意点:使用querySelector选中的标签是静态的,后面加载的querySelector不可以获取到

步骤三：操作真正的事件源

2·3：例题：

通过事件委托实现高亮

oUl.onclick = function(evt){
	//this.style.backgroundColor = "hotpink"; 错误
	var e = evt || event;
	//真正的操作元素
	var target = e.srcElement || e.target;
	
	if(target.tagName == "LI"){
		target.style.backgroundColor = "hotpink";
	}
}

三：拖拽效果

3·1思路

步骤一：首先为需要拖拽的元素添加onmousedown事件

步骤二：使拖拽的元素在document文档上移动

步骤三：停止移动的时候，触发onmouseup事件，取消移动

步骤四：步骤一二都是依赖于步骤一，因此需要函数的嵌套

var oBox = document.querySelector("#box");
	
	oBox.onmousedown = function(evt){
		var e = evt || event;
		var offsetX = e.offsetX;
		var offsetY = e.offsetY;
		document.onmousemove = function(evt){
			var e = evt || event;
			
			oBox.style.left = e.pageX - offsetX + "px";
			oBox.style.top = e.pageY - offsetY + "px";
		}
		document.onmouseup = function(){
			document.onmousemove = null;
		}
	}

3·2：拖拽的边界问题

合理使用offsetwidth

	vobox.onmousedown=function(evt){
		var e=evt||event;
		var offsetX=e.offsetX;
		var offsetY=e.offsetY;
		
		document.onmousemove=function(evt){
			var e=evt||event;
			var left=e.pageX-offsetX;
			var top=e.pageY-offsetY;
			//进行判断
			if(left<0){
				left=0;
			}
			if(top<0){
				top=0;
			}
			//浏览器的可视宽
			var leftMax = window.innerWidth - obox.offsetWidth;
			if(left>leftMax){
				left=leftMax;
			}
			//浏览器的可视高
			var topMax = window.innerHeight - obox.offsetHeight;
			if(top>topMax){
				top=topMax;
			}
			
			obox.style.left=left+"px";
			obox.style.top=top+"px";
			
		}
		document.onmouseup=function(){
			document.onmousemove="";
		}
	}

四：jSON对象

4·1定义

var json={键：值，…}

严格的json对象 键必须用双引号引起来,json的值可以是任意类型的

4·2操作

json.键，

json[“键”] 用于for in

4·3：json的转换

JSON对象<------>JSON字符串 :必须是严格模式的字符串和对象

var json = {"name":"老王","age":"18"};
var str = JSON.stringify(json);
console.log(str,typeof str);

将字符串<------>JSON对象 :必须是严格模式的字符串和对象

var str1 = '{"name":"老王","age":"18"}';
var json1 = JSON.parse(str1);
console.log(json1,typeof json1);

五：事件的兼容

• 事件的兼容

  let e=evt||event;
  

• 获取滚动条高度 兼容性

    var x = document.body.scrollTop || document.documentElement.scrollTop;
  

• 键盘事件的兼容

  var key=e.keycode||e.charcode||e.which
  

• 事件委托兼容

  var target = e.srcElement || e.target;
  

• 阻止冒泡

  e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
  

• 阻止默认事件

    e.preventDefault ? e.preventDefault():e.returnValue = false;
  

• 事件监听的兼容

  ```js
  

function addEvent(obj,type,callBack){
if(obj.addEventListener){
obj.addEventListener(type,callBack);
}else{
obj.attachEvent(“on”+type,callBack);
}
}
addEvent(document,“click”,function(){alert(“兼写法”)});
```

• 事件监听的兼容

  ```js
  

function addEvent(obj,type,callBack){
if(obj.addEventListener){
obj.addEventListener(type,callBack);
}else{
obj.attachEvent(“on”+type,callBack);
}
}
addEvent(document,“click”,function(){alert(“兼写法”)});
```