【笔记】 《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;    //非IEelement.onpropertychange = upcaseOnpropertyChange;   //IEfunction 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;}};}