js事件应用--基础（事件对象、鼠标事件、键盘事件）

来源：互联网发布：剑灵24人本优化不卡编辑：程序博客网时间：2024/05/22 06:54

案例1：event事件对象：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>window.onclick = function(){document.onclick =function(ev){//IE 、Chrome//alert(event.clientX+','+event.clientY);//FF//alert(ev.clientX+','+ev.clientY);//解决兼容问题var oEvent = ev || event;alert(oEvent.clientX+','+oEvent.clientY);}}</script></head><body></body></html>

案例2：事件冒泡，一层一层往上传递

<!DOCTYPE html><html onclick="alert('html')"><head><meta charset="utf-8"><title></title><style>div {padding: 100px;}#div1{background: gray;}#div1 #div2 {background: green;}#div1 #div2 #div3{background: black;}</style></head><body onclick="alert('body')"><div id = "div1" onclick="alert('div1')"><div id = "div2" onclick="alert('div2')"><div id = "div3" onclick="alert('div3')"></div></div></div></body></html>

案例3：仿select下拉框（点击按钮显示下拉框、点击其他空白地区，下拉框隐藏）

oEven.cancelBubble = true;的使用

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#div1 {height: 200px;width: 200px; background: red;display: none;}</style><script>window.onclick = function(){var oDiv = document.getElementById("div1");var oBtn = document.getElementById("btn");oBtn.onclick = function(ev){var oEven = ev || event;oDiv.style.display = 'block';oEven.cancelBubble = true;};document.onclick =function(){oDiv.style.display = 'none';};}</script></head><body><input type="button" value="按钮" id = "btn"/><div id = "div1"></div></body></html>

案例4：鼠标移动

-跟随鼠标移动的div

-------清除滚动条的影响

------------------滚动条的意义（可视区与页面顶部的距离）

注意：clientX计算的是可视区的x坐标！

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#div1{height: 200px;width: 200px;background: red;position: absolute;}</style><script>window.onmousemove = function(ev){var oDiv = document.getElementById("div1");var oEvent = ev || event;var scollTop = document.documentElement.scrollTop || document.body.scrollTop;oDiv.style.left = oEvent.clientX + 'px';oDiv.style.top = oEvent.clientY + scollTop + 'px';}</script></head><body style="height: 2000px;"><div id = "div1"></div></body></html>

案例5：一串跟随的div:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div{height: 20px;width: 20px;background: red;position: absolute;}</style><script>function pos (ev){var scollTop = document.documentElement.scrollTop || document.body.scrollTop;var scollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;return {x:scollLeft + ev.clientX,y:scollTop + ev.clientY};}window.onmousemove = function(ev){var aDiv = document.getElementsByTagName('div');for(var i = aDiv.length - 1; i > 0; i--){aDiv[i].style.left = aDiv[i-1].offsetLeft + 'px';aDiv[i].style.top = aDiv[i-1].offsetTop + 'px';}var oEvent = ev || event ;var posit = pos(oEvent);aDiv[0].style.left = posit.x + 'px';aDiv[0].style.top = posit.y + 'px';}</script></head><body style="height: 2000px;"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></body></html>

案例6：键盘事件

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div{height: 100px;width: 100px;background: red;position: absolute;}</style><script>document.onkeydown = function(ev){var oEvent = ev || event;var oDiv = document.getElementById("div1");if(oEvent.keyCode == 37){ //左oDiv.style.left = oDiv.offsetLeft - 10 + 'px';}if(oEvent.keyCode == 38){ //上oDiv.style.top = oDiv.offsetTop - 10 + 'px';}if(oEvent.keyCode == 39){ //右oDiv.style.left = oDiv.offsetLeft + 10 + 'px';}if(oEvent.keyCode == 40){oDiv.style.top = oDiv.offsetTop + 10 + 'px';}}</script></head><body><div id = 'div1'></div></body></html>

案例7：回车提交/回车+ctrl提交

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>window.onclick = function(){var oTxt1 = document.getElementById("txt1");var oBtn = document.getElementById("btn");var oTxt2 = document.getElementById("txt2");oBtn.onclick = function(){ //按键响应  oTxt2.value += oTxt1.value + '\n';  oTxt1.value = '';}//document.onkeydown = function(ev){ //回车响应//var oEvent = ev || event;//if(oEvent.keyCode == 13){//  oTxt2.value += oTxt1.value + '\n';//  oTxt1.value = '';//}//}document.onkeydown = function(ev){  //ctrl+回车响应var oEvent = ev || event;if(oEvent.keyCode == 13 && oEvent.ctrlKey){    oTxt2.value += oTxt1.value + '\n';    oTxt1.value = '';}}}</script></head><body><input type="text" id = "txt1"/><input type="button" id = "btn" value="发布"/><br /><br /><textarea id = "txt2" rows="10" cols="20"></textarea></body></html>

阅读全文

0 0