【笔记】 《js权威指南》- 第17章 事件处理 17.7 - 17.8

1.拖放事件：

(1). 任何有draggable属性的元素都是拖放源；

(2). 当用户在该元素上拖动时触发dragstart事件；

(3). 在dragstart事件的处理程序中可以调用：

a. dataTransfer.setData() 指定拖放数据；HTML5: dataTransfer.items.add()

b. dataTransfer.effectAllowed指定传输操作，可以包括移动、复制和链接

c.dataTransfer.setDragImage()和addElement(不全支持)指定拖动时的视觉效果。

(4). 在拖动过程中，会触发拖动事件，可以在拖动中改变数据或者更新拖动图片。

(5). 在放置元素时触发dragend事件，如果拖放源支持移动操作，他会检查dataTransfer.dropEffect是否实际执行了移动操作，如果执行了，数据就会被传输，应该从拖放源中删除它。

一个简单的拖放源例子：

var clock = document.getElementById("clock");
var icon = new Image();
icon.src = "clock.jpg";

clock.draggable = true;
clock.ondragstart = function(event) {
	var event = event || window.event;
	var dt = event.dataTransfer;

	dt.setData("Text", new Date() + "\n");
	if (dt.setDragImage)
		dt.setDragImage(icon, 0, 0);
}; 

(6). 当拖放对象进入文档元素时，浏览器在该元素上触发dragenter事件，

(7). 拖放目标使用dataTransfer.types检验拖放对象的数据；使用dt.effectAllowed检验拖放操作的类型。

(8). 拖放目标表示对拖放对象的放置感兴趣：取消dragenter事件；

(9). 收到dragover事件，如果继续对放置感兴趣：取消dragover事件；

(10). 如果拖放对象离开拖放目标（该目标已经取消过enter和over事件），拖放目标收到dragleave事件；

(11). 如果在拖放目标上释放拖放对象，触发drop事件，使用dt.getData()获取设置的数据，如果拖放的是一个或多个文件，可以通过dt.files获取File类数组。在html5中可以通过dt.items访问文件和非文件的数据；

var lists = document.getElementsByTagName("ul");
var regexp = /\bdnd\b/;
for (var i = 0; i < lists.length; i++) {
	if (regexp.test(lists[i].className)) dnd(lists[i]);
}

function dnd(list) {
	var original_class = list.className;
	var entered = 0;
	
	list.ondragenter = function(e) {
		e = e || window.event;
		var from = e.relatedTarget;
		
		entered++;
		if ((from && !ischild(from, list)) || entered == 1) {
			var dt = e.dataTransfer;
			var types = dt.types;
			
			if (!types || //IE
				(types.contains && types.contains("text/plain")) || //HTML5
				(types.indexOf && types.indexOf("text/plain") != -1))//Webkit 
				{
					list.className = original_class + " droppable";	
					//取消事件表示对拖曳感兴趣
					return false;
				}
				
			return;
		}
		//不是第一次进入
		return false;
	};
	
	list.ondragover = function(e) {return false;};
	
	list.ondragleave = function(e) {
		e = e || window.event;
		var to = e.relatedTarget;
		
		entered--;
		if ((to && !ischild(to, list)) || entered <= 0) {
			list.className = original_class;
			entered = 0;
		}
		return false;
	};
	
	list.ondrop = function(e) {
		e = e || window.event;
		var dt = e.dataTransfer;
		var text = dt.getData("Text");
		
		if (text) {
			var item = document.createElement("li");
			item.draggable = true;
			item.appendChild(document.createTextNode(text));
			list.appendChild(item);
			list.className = original_class;
			entered = 0;
			return false;
		}
	};
	
	var items = list.getElementsByTagName("li");
	for(var i = 0; i < items.length; i++)
		items[i].draggable = true;
		
	list.ondragstart = function(e) {
		var e = e || window.event;
		var target = e.target || e.srcElement;
		
		if (target.tagName != "LI") return false;
		var dt = e.dataTransfer;
		dt.setData("Text", target.innerText || target.textContent);
		dt.effectAllowed = "copyMove";
	};
	
	list.ondragend = function(e) {
		e = e || window.event;
		var target = e.target || e.srcElement;
		
		if (e.dataTransfer.dropEffect ==="move")
			target.parentNode.removeChild(target);
	};
	
	function ischild(a, b) {
		for(; a; a = a.parentNode) if (a === b) return true;
		return false;
	}
};

2.文本事件：

处理文本输入例子：

if (elt.addEventListener) {
    elt.addEventListener("keypress", func, false);
    elt.addEventListener("textInput", func, false);
    elt.addEventListener("textinput", func, false);
}
else {
    elt.attachEvent("onkeypress", filter);
}

function func(event) {
    var e = event || window.event;
    var target = e.target || e.srcElement;
    if (e.type === "textinput" || e.type === "textInput") text = e.data;
    else {
        var code = e.charCode || e.keyCode;
        if (code < 32 || e.charCode == 0 || e.ctrlKey || e.altKey)
            return;
        var text = String.fromCharCode(code);
    }
}

处理文本插入例子：

function forceToUpperCase(element) {
	if (typeof element === "string") element = document.getElementById(element);
	element.oninput = upcase;    //非IE
	element.onpropertychange = upcaseOnpropertyChange;   //IE
	
	function upcase(event) {
		this.value = this.value.toUpperCase();
	};
	function upcaseOnPropertyChange(event) {
		var e = event || window.event;
		if (e.propertyName === "value") {
			this.onpropertychange = null;
			this.value = this.value.toUpperCase();
			this.onpropertychange = upcaseOnPropertyChange;
		}
	};
}