鼠标和键盘事件
事件
.div1{ height: 1200px;width: 400px;background-color: #999; }
<form> <input type="text"> <input type="submit" value="确定"> </form> <div id="div1" class="div1">我是文本</div>
var oDiv = document.getElementById("div1"); var oForm = document.getElementsByTagName("form")[0]; var aInput = document.getElementsByTagName("input"); oForm.onsubmit = function(){console.log("submit");return false;} aInput[0].onfocus = function(){console.log("txtFocus");} aInput[0].onblur = function(){console.log("txtOnBlur");}//文本输入框失去焦点 aInput[0].onchange = function(){console.log("txtOnChange");}//文本输入框内容发生改变后，鼠标点击其他地方 aInput[0].oninput = function(){console.log("txtInput");}//文本框正在输入 oDiv.onclick = function(){console.log("click");}//onclick包括了onmousedown和onmouseup,click事件最后触发
oDiv.ondblclick = function(){console.log("dblclick");}//双击事件
oDiv.onmouseover = function(){console.log(this.innerText);} oDiv.onmousedown = function(){console.log("mousedown");} oDiv.onmouseup = function(){console.log("mouseup");} oDiv.onmousemove = function(){console.log("mousemove");}作用域中鼠标移动 oDiv.onmouseout = function(){console.log("mouseout");}
如果单击和双击同时存在，为了不引起冲突
var div1 = document.getElementById('box'); var time; div1.onclick = function(){ clearTimeout(time); time = setTimeout(function(){ console.log('单击'); },300);//它会在300毫秒后才会触发 } div1.ondblclick = function(){ clearTimeout(time);//如果触发的是双击事件，先将单击事件的时钟清除 console.log('双击'); }
事件对象
当触发某个事件时，会产生一个事件对象，这个对象包含着所有有关事件的信息，包括事件的元素，类型，与特定的信息。通过事件绑定的执行函数可以得到一个隐藏参数，浏览器会自动分配这个EVENT参数;
e.clientX,e.clientY,当前鼠标距离页面左边距和顶部的距离,可视距离，忽略页面滚动条的存在
e.pageX,e.pageY,鼠标距离页面左边距和顶部的距离，绝对距离，如果页面有滚动条，
e.offsetX,e.offsetY 鼠标距离事件源的左边距和顶部的距离,只作用与该节点
oDiv.onclick = function(e){ console.log(e);//e隐藏参数,点击返回mouseEvent{istrusted:true,screenX:222,screenY:333,clientX:222,clientY:211,...}IE不支持，有局限性 console.log(window.event);//IE支持 var evt = e || event ;//封装隐藏参数， console.log(evt.clientX,evt.clientY); console.log(evt.pageX,evt.pageY); console.log(evt.offsetX,evt.offsetY); }
让一个元素SPAN实时显示鼠标在div中的当前鼠标距离页面左边距和顶部的距离
.div2{ position: relative;height: 200px;width: 300px;border: 1px solid #888 } .span{ position :absolute;bottom: 0 }
<div id="div2" class="div2"> <span class="span"></span> </div>
var oDiv2 = document.getElementById("div2"); var oSpan = oDiv2.children[0]; oDiv2.onmousemove = function(e){ var evt = e || event;//判断是否是IE浏览器还是其他浏览器的隐藏参数 oSpan.innerHTML = evt.clientX + "," + evt.clientY; } oDiv2.onmouseout = function(){ oSpan.innerHTML = null;//鼠标移出div的时候，清空span中的内容 }
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
键盘事件
document.onkeypress = function(){//按下字符键触发 console.log("onkeypress"); } document.onkeydown = function(){//按下任意键触发 console.log("onkeydown"); }
document.onkeypress = function(){//按下非功能键触发，比如ctrl ,shift之类的就无法触发
console.log("onkeypress");
}
键盘事件altKey,ctrlKey,shiftKey判断
document.onkeydown = function(e){ var evt = e || event; console.log(evt.ctrlKey,evt.altKey,evt.shiftKey); console.log(evt.keyCode);//返回按下某个键的keyCode }
键盘事件练习
#div3{ height: 80px;width: 300px;border: 5px solid #888; }
<div id="div3"></div> <input type="text"><input type="button" value="确定">
var oDiv3 = document.getElementById("div3"); var aInput2 = document.getElementsByTagName("input"); aInput2[1].onclick = commentTxt;//将按钮的点击方法赋予一个方法 function commentTxt(){ oDiv3.innerHTML += aInput2[0].value;//把文本框里的文字添加到div中 } aInput2[0].onkeydown = function(e){//在文本框中输入文字时触发 var evt = e || event; if(evt.ctrlKey && evt.keyCode == 65){//判断键盘事件ctrl+a commentTxt(); } }
事件流
页面接受事件的顺序，捕获，目标，冒泡
事件委托机制
利用事件冒泡机制，把本应该附加在某元素上的事件委托给它父级
#outer{height: 100px;width: 200px;background: #999;;} #inner{height: 50px;width: 50px;background: #777}
<div id="outer"><div id="inner"></div></div>
var divInner = document.getElementById("inner"); var divOuter = document.getElementById("outer"); divOuter.onclick = function(){ console.log("outer"); } divInner.onclick = function(e){ var evt = e || event; console.log("inner"); evt.cancelBubble = true;//阻止冒泡,适用于IE //evt.stopPropagation();//两个一样的效果，主要适用与新的浏览器 }//inner先输出，outter后输出,冒泡是由最特定的目标到最不特定的目标，捕获是相反的，从document-outer-inner,
li{margin: 10px;background: red}
<ul> <li>1</li><li>2</li><li>3</li><li>4</li> </ul>
var oUl = document.getElementsByTagName("ul")[0]; var oLi = document.getElementsByTagName("li"); for(i = 0; i < oLi.length ; i++){ oLi[i].onclick = function(){ console.log(this.innerHTML); } } for(i = 0; i < 5; i++){ var newLi = document.createElement("li"); newLi.innerHTML = i; oUl.appendChild(newLi); }
新添加的li没有添加上事件，委托事件给ul
oUl.onclick = function(e){ var evt = e || event; var _target = evt.target || evt.srcElement;//支持IE8.0 evt.srcElement if(_target.nodeName.toUpperCase() == "LI"){ console.log(_target.innerHTML); } }
阻止之后的冒泡行为
div1.onclick = function(e){ var evt = e || window.event; console.log('阻止冒泡行为'); evt.stopPropogation();//阻止冒泡行为 }
阻止默认行为，标签有很多的默认行为，submit的提交，输入框，A的跳转,右键菜单等
三种方法同效
evevt.preventDefault();
evevt.returnValue = false;
return false;
三种阻止方法练习
<a href="#">ddf</a> <form><input type="text"><input type="submit"></form>
var oForm = document.getElementsByTagName("form")[0]; var oInput = document.getElementsByTagName("input"); var oA = document.getElementsByTagName("a")[0]; oA.onclick = function(e){ var evt = e || event; console.log("aaa"); //return false;//第一种方法 //evt.preventDefault();第二种方法 evt.returnValue = false ;//第三种方法 } oForm.onsubmit = function(){ console.log("submitform"); return false; } oInput[0].onkeydown = function(e){ console.log("txt"); var evt = e||event; evt.preventDefault(); } document.oncontextmenu = function(e){//oncontextmenu右键菜单 var evt = e || event; evt.returnValue = false; }
DOM二级事件
添加事件监听器：addEventLinsener(事件名，处理函数，布尔值); 事件名click..函数指针，true代表捕获，false代表冒泡（默认）,同一个元素可以添加多个事件监听器，事件之间不影响，如果使用 divOuter.onclick = function(){}; 多个onclick会被最后一个事件替换。
移除事件监听器: removeEventLisener(事件名，处理函数，布尔值);要和添加事件的实参一样。普通的事件取消方法 divOuter.onclick = null;
IE下的事件监听器：attachEvent(事件名，处理函数);onclick,指针
detachEvent(事件名，处理函数);
divOuter.addEventListener("click",coLog2,true);//捕获
divInner.addEventListener("click",coLog,true);//不会覆盖原来的click事件
/* divInner.attachEvent("onclick",coLog);适用于IE
divInner.detachEvent("onclick",colog); */
function coLog(){
console.log("innerLisener");
}
function coLog2(){
console.log("outerLisener");
}
给节点添加DOM二级事件函数，封装函数适用于IE
function addEvent(obj,evt,fun,booltf){ if(obj.addEventListener){ obj.addEventListener(evt,fun,booltf); }else{ obj.attachEvent("on"+evt,fun); } }
给节点删除DOM二级事件函数，封装函数适用于IE
function removeEvent(obj,evt,fun){ if(obj.removeEventListener){ obj.removeEventListener(evt,fun); }else{ obj.detachEvent("on"+evt,fun); } }
this
1.在标签中使用，代表标签； <div onclick="func(this)"></div>
2.在函数体中直接使用，代表window;
function (){console.log(this);}
3.在事件函数中使用，代表标签本身；
div1.onclick = function(){console.log(this);}
4.在监听事件函数中，代表标签本身
div1.addEventListener("click",function(){console.log(this);})
鼠标按下移动一个方块，鼠标不按下则不移动。
var div1 = document.getElementById('movebox'); var div1Style = window.getComputedStyle(div1); var basex,basey,movex,movey,d1centerX,d1centerY; div1.addEventListener('mousedown',function(e){ var evt = e || window.event; basex = evt.pageX; basey = evt.pageY; d1centerX = parseInt(div1Style.left) + parseInt(div1Style.width) / 2;//取得方块的中心点的x值 d1centerY = parseInt(div1Style.top) + parseInt(div1Style.height) / 2;//取得方块中心点的y值 div1.style.left = div1.offsetLeft + basex - d1centerX + 'px';//当鼠标按下时，方块的中心移动到鼠标指尖上 div1.style.top = div1.offsetTop + basey - d1centerY + 'px'; div1.onmousemove = function(e){ var evt = e || window.event; movex = evt.pageX - basex;//鼠标移动时x值的与原来的值差值，就是移动距离 basex = evt.pageX; movey = evt.pageY - basey; basey = evt.pageY; div1.style.left = div1.offsetLeft + movex + 'px';//方块原来距离页面左边的距离加上移动的距离 div1.style.top = div1.offsetTop + movey + 'px'; } }); div1.addEventListener('mouseup',function(){ div1.onmousemove = null;//鼠标不按下后，释放鼠标移动的事件 });
浙公网安备 33010602011771号