事件绑定
1：element.onclick = function(){} 只能绑定一个方法，
2：IE下 element.attachEvent('事件','函数')
标准下 element.addEventListener('事件','函数','false')第三个参数代表是否捕获 默认false 冒泡。 冒泡是以出去的事件触发，捕获是被进入的事件触发
取消绑定
1：element.onclick = null 如果是普通的绑定，以赋值的形式取消
2：IE下 element.dettachEvent('事件','函数')
标准下 element.removeEventListener('事件','函数','是否冒泡，bool值')
键盘事件
onkeydown: 键盘按下触发
onkeyup: 键盘抬起触发
event.keyCode: 键盘建值的ASCII吗
ctrlKey， shiftKey, altKey bool值 | 当一个事件发生的时候，如果ctrl， shift， alt处于按下的状态返回true，否则返回fasle
事件的默认行为
oncontextmenu: 右键菜单事件， 当右键菜单（环境菜单 ）显示出来的时候触发
创建元素： document.createElement('tagName')
插入元素： element.insertBefore('要插入的元素','原位置的元素')
添加元素： element.appendChild('要添加的元素')
拖拽
需要三个事件
onmousedown: 鼠标按下选择元素
onmousemove: 拖拽元素
onmouseup: 释放元素
鼠标滚轮事件
IE/Chrom onmousewheel 获取滚动方向 event.wheelDelta = 120 向上滚动 event.wheelDelta = -120 向下滚动
firefox DOMMouseScroll 必须使用 addEventListener 来实现事件绑定 例如： Element.addEventListener('DOMMouseScroll ', Function(), false)
获取滚动方向 Event.detail = -3 向上滚动 Event.detail = 3 向下滚动
return false 可以组织 obj.on事件名称=fn 所触发的默认行为。
addEventListener绑定的事件必须通过event下面的preventDefault()
// 1:拖拽的时候，如果浏览器中有文字被选中，会产生问题
// 原因：当鼠标按下的时候，如果浏览器中有文字被选中，会触发浏览器默认的文字拖拽效果
// 解决：标准浏览器下 阻止默认行为。非标准下通过设置全局捕获解决
// element.setCapture() 当我们给一个元素设置全局捕获后，该元素就会监听后续的所有事件,即当有事件发生时，就会别设置了全局捕获的元素所触发。 在IE中存在并且有效果， 在Firefox中存在但是没有效果，在Chrome中不存在
// element.releaseCapture() 释放捕获
// 2:图片拖拽的时候，会产生和有选中的文字一样的问题，解决方案同上
window.onload = function() {
var oDiv = document.getElementById('div1');
dragEffect(oDiv);
function dragEffect(obj) {
obj.onmousedown = function(ev) {
ev = ev || event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
if (obj.setCapture) {
obj.setCapture();
}
document.onmousemove = function(ev) {
ev = ev || event;
// 限制拖拽区域，同理可以实现吸附效果
var L = ev.clientX - disX;
var T = ev.clientY - disY;
if (L < 0) {
L = 0
}else if (L > document.documentElement.clientWidth - obj.offsetWidth) {
L = document.documentElement.clientX - obj.offsetWidth
}
if (T < 0) {
T = 0
}else if (T > document.documentElement.clientHeight - obj.offsetHeight) {
T = document.documentElement.clientY - obj - offsetHeight
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
if (obj.releaseCapture) {
obj.releaseCapture();
}
}
// 阻止默认的文字拖动效果
return false;
}
}
}
window.onload = function() {
var oDiv = document.getElementsByTagName('div')[0];
mouseScroll(oDiv);
function mouseScroll(obj) {
obj.onmousewheel = needAction;
if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', needAction, false);
alert(2);
}else {
alert(1);
}
function needAction(ev) {
ev = ev || event;
var isUp = true;
if (ev.wheelDelta) {
isUp = ev.wheelDelta > 0;
}else {
isUp = ev.detail < 0;
}
if (isUp) {
obj.style.height = obj.offsetHeight - 10 + 'px';
}else {
obj.style.height = obj.offsetHeight + 10 + 'px';
}
if (ev.preventDefault) {
ev.preventDefault();
}else {
return false;
}
}
}
document.oncontextmenu = function() {
return false;
};
document.addEventListener('oncontextmenu', function(ev){
ev.preventDefault();
},false);
}