Event事件
妙味课堂-Event事件
1、焦点：当一个元素有焦点的时候，那么他就可以接受用户的输入(不是所有元素都能接受焦点)
给元素设置焦点的方式：
1、点击
2、tab
3、js
2、（例子：输入框提示文字）
onfocus:当元素获取焦点时触发：
1 element.onfocus = function(){};
onblur:当元素失去焦点时触发：
1 element.onblur = function(){};
obj.focus() 给指定的元素设置焦点
obj.blur() 取消指定元素的焦点
obj.select()选择指定元素里面的文本内容
3、（例子：方块随着鼠标移动）
event: 事件对象。
当一个事件发生时，和当前这个对象发生的事件所有有关的信息都会临时保存在一个指定的地方-event对象，供我们需要时调用。就像是飞机的黑匣子。
事件对象必须在一个对象的事件调用函数中使用才有内容。
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时决定而是在调用的时候决定
4、兼容
1 element.onclick = fn1;
IE/Chrome浏览器:event是一个内置的全局对象（可以直接使用）
1 function fn1(){ 2 alert(event); 3 }
标准下：事件对象是通过事件函数的第一个参数传入
1 function fn1(ev){ 2 alert(ev); 3 }
兼容写法：
1 function fn1(ev){ 2 var ev = ev || event; 3 }
clientX[Y]:当一个事件发生的时候，鼠标到页面可视区的距离
5、事件流（例子：仿select控件）
● 事件冒泡：当一个元素接受到事件的时候，会把他接受到的事件传播给他的父级，一直到顶层window。
● 事件捕获:一个元素要想接受到事件，它的父元素会首先接受到该事件，然后再传给它。
注意：在ie下是没有的事件捕获的。在事件绑定中，标准下有
6、事件绑定
● 第一种：
1 element.onclick = fn1;
注意：oDiv.onclick = fn1;
oDiv.onclick = fn2;
这样fn2会覆盖fn1;
● 第二种：
IE:obj.attachEvent(事件名称，事件函数)
1、没有捕获
2、事件名称有on
3、事件函数的执行顺序：标准》正序 非标准》倒序
4、this指向window
1 element.attachEvent(onclick,fn1);
标准：obj.addEventListener(事件名称，事件函数，是否捕获)
1、有捕获
2、事件名称没有on
3、事件的执行顺序是正序
4、this指向触发该事件的对象
1 element.addEventListener(click,fn1,false);
bind函数
1 function bind(obj,evname,fn){ 2 if(obj.addEventListener){ 3 obj.addEventListener(evname,fn,false); 4 }else{ 5 obj.attachEvent('on' + evname,function(){ 6 fn.call(obj); 7 }); 8 } 9 }
7、事件取消绑定
● 第一种
1 element.onclick = null;
● 第二种
IE:obj.detachEvent(事件名称，事件函数);
1 document.detachEvent('onclick',fn1);
标准：obj.removeEventListener(事件名称，事件函数，是否捕获)；
1 document.removeEventListener('click',fn1,false);
8、键盘事件(例子：留言本)
● onkeydown : 当键盘按键按下的时候触发
● onkeyup : 当键盘按键抬起的时候触发
● event.keyCode : 数字类型 键盘按键的值 键值
ctrlKey，shiftKey，altKey布尔值
当一个事件触发的时候，如果shift || ctrl || alt键没有按下，则返回false，否则返回true;
9、默认事件(例子：自定义右键菜单、键盘控制div运动)
● 事件默认行为 : 当一个事件发生的时候浏览器默认会做的事。
● 阻止默认事件：return false;
oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发。
案例：
▓▓▓▓▓▓ 方块随着鼠标移动：
onmouseover:当鼠标在一个元素上移动时触发
注意：触发的频率不是像素，而是间隔时间。在一个间隔时间内不论鼠标移动了多远只触发一次
1 <style> 2 body{ 3 height: 2000px; 4 } 5 #div{ 6 width:100px; 7 height: 100px; 8 background:red; 9 position: absolute; 10 } 11 </style> 12 <body> 13 <div id="div1"></div> 14 </body> 15 <script> 16 var oDiv = document.getElementById('div1'); 17 document.onmouseover = function(ev){ 18 var ev = ev || event; 19 // 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离 20 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 21 oDIv.style.top = ev.clientX + scrollTop + 'px'; 22 oDIv.style.left = ev.clientY + 'px'; 23 } 24 </script>
▓▓▓▓▓▓ 输入框文字提示:
1 <style></style> 2 <body> 3 <input type="text" id="text1" value="请输入内容"/> 4 <input type="button" id="btn" value="全选" /> 5 </body> 6 <script> 7 var oText = document.getElementById('text1'); 8 var oBtn = document.getElementById('btn'); 9 oText.onfocus = function(){ 10 if(this.value == '请输入内容'){ 11 this.value = ''; 12 } 13 } 14 oText.onblur = function(){ 15 if(this.value == ''){ 16 this.value = '请输入内容'; 17 } 18 } 19 oBtn.onclick = function(){ 20 oText.select(); 21 } 22 </script>
▓▓▓▓▓▓仿select控件：
1 <style> 2 #div1{ 3 width: 100px; 4 height: 200px; 5 border: 1px solid red; 6 display: none; 7 } 8 </style> 9 <body> 10 <input type="button" value="按钮" id="btn" /> 11 <div id="div1"></div> 12 <p>ppppppppp</p> 13 <p>ppppppppp</p> 14 <p>ppppppppp</p> 15 <p>ppppppppp</p> 16 <p>ppppppppp</p> 17 </body> 18 <script> 19 window.onload = function(){ 20 var oBtn = document.getElementById('btn'); 21 var oDiv = document.getElementById('div1'); 22 oBtn.onclick = function(ev){ 23 var ev = ev || event; 24 ev.cancelBubble = true; 25 oDiv.style.display = 'block'; 26 } 27 document.onclick = function(){ 28 oDiv.style.display = 'none'; 29 } 30 } 31 </script>
▓▓▓▓▓▓ 留言本:
1 <style></style> 2 <body> 3 <input type="text" id="con"/> 4 <ul id="box"></ul> 5 </body> 6 <script> 7 var oUl = document.getElementById('box'); 8 var oText = document.getElementById('con'); 9 10 document.onkeyup = function(ev){ 11 var ev = ev || even; 12 if(ev.keyCode != ''){ 13 if(ev.keyCode == 13){ 14 var oLi = document.createElement('li'); 15 oLi.innerHTML = oText.value; 16 if(oUl.children[0]){ 17 oUl.insertBefore(oLi,oUl.children[0]); 18 }else{ 19 oUl.appendChild(oLi); 20 } 21 } 22 } 23 } 24 </script>
▓▓▓▓▓▓ 自定义右键菜单:
1 <style> 2 body{ 3 height: 2000px; 4 } 5 #box{ 6 width: 100px; 7 height: 200px; 8 background: red; 9 display: none; 10 position: absolute;; 11 } 12 </style> 13 <body> 14 <div id="box"></div> 15 </body> 16 <script> 17 var oBox = document.getElementById('box'); 18 document.oncontextmenu = function(ev){ 19 var ev = ev || event; 20 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 21 var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 22 oBox.style.display = 'block'; 23 oBox.style.top = scrollTop + ev.clientY + 'px'; 24 oBox.style.left = scrollLeft + ev.clientX + 'px'; 25 26 return false; 27 } 28 document.onclick = function(){ 29 oBox.style.display = 'none'; 30 } 31 </script>
▓▓▓▓▓▓ 键盘控制div运动:
1 <style> 2 #box{ 3 width: 100px; 4 height: 100px; 5 background: red; 6 position: absolute; 7 } 8 </style> 9 <body> 10 <div id="box"></div> 11 </body> 12 <script> 13 var oBox = document.getElementById('box'); 14 var timer = null; 15 var oLeft = false; 16 var oTop = false; 17 var oRight = false; 18 var oBottom = false; 19 20 21 // 运动一直就绪，等待按键操作 22 timer = setInterval(function(){ 23 if(oLeft){ 24 oBox.style.left = oBox.offsetLeft - 10 + 'px'; 25 }else if(oTop){ 26 oBox.style.top = oBox.offsetTop - 10 + 'px'; 27 }else if(oRight){ 28 oBox.style.left = oBox.offsetLeft + 10 + 'px'; 29 }else if(oBottom){ 30 oBox.style.top = oBox.offsetTop + 10 + 'px'; 31 } 32 // 防止溢出 33 limit(); 34 },10); 35 36 // 按键按下，开始运动 37 document.onkeydown = function(ev){ 38 var ev = ev || even; 39 switch (ev.keyCode){ 40 case 37: 41 oLeft = true; 42 break; 43 case 38: 44 oTop = true; 45 break; 46 case 39: 47 oRight = true; 48 break; 49 case 40: 50 oBottom = true; 51 break; 52 } 53 } 54 55 // 按键抬起，停止运动 56 document.onkeyup = function(ev){ 57 var ev = ev || even; 58 switch (ev.keyCode){ 59 case 37: 60 oLeft = false; 61 break; 62 case 38: 63 oTop = false; 64 break; 65 case 39: 66 oRight = false; 67 break; 68 case 40: 69 oBottom = false; 70 break; 71 } 72 } 73 74 function limit(){ 75 // 控制左边 76 if(oBox.offsetLeft <= 0){ 77 oBox.style.left = 0; 78 } 79 // 控制上边 80 if(oBox.offsetTop <= 0){ 81 oBox.style.top = 0; 82 } 83 // 控制右边 84 if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){ 85 oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px'; 86 } 87 // 控制下边 88 if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){ 89 oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px'; 90 } 91 } 92 </script>
