JavaScript event对象
Event对象
JavaScript的event对象用来描述JavaScript的事件,只要作用于IE和NN4以后的各个浏览器版本中. event对象代表事件状态,如事件发生的元素、键盘状态、鼠标位置和鼠标按钮的状态. 一旦事件发生,便会生成event对象,如果单击一个按钮,浏览器的内存中就产生相应的event对象
- 在IE中引用event对象
- 在W3C中引用event对象
- enevent对象的属性
1、在IE中引用event对象
在IE中,event对象被作为windows对象属性访问
window.event
由于window引用部分是可选的,因此脚本像全局引用一样对待event对象:
event.propertyname
这样,一个事件处理程序的任何语句在不进行特殊处理和初始化的情况下,都可以访问event对象
2、在W3C中引用event对象
在W3C事件模型中,event对象引用比较复杂. 多数情况下,必须明确地将event对象作为一个参数传递到事件处理函数中. event对象有时可自动作为参数传递,这依赖于事件处理函数如何与对象绑定
如果使用原始的方法将事件处理函数与对象绑定(通过元素标记的一个属性),则必须把event对象作为参数传递
onKeyUp = "example(evnet)";
这是在W3C模型中唯一像全局引用一样明确引用event对象的方式,这个引用只作为事件处理函数的参数,在别的内容中不起作用. 如果有多个参数,则event对象可以以任意顺序排列.例如:
onKeyUp = "example(this.event)";
与元素绑定的函数定义应该有一个参数变量来“捕获”event对象参数:
function example(widget,evt){...}
这个参数变量名称没有任何限制,在本书的例子中使用event对象或evt. 在跨浏览器的脚本中使用时,应避免用evnet作为参数变量名,以避免与IE的event属性冲突
还可以通过其他方式将事件处理函数绑定到对象(在NN6以后到浏览器版本中,使用属性赋值和W3C DOM的addEventListener()方法),将这些事件处理函数的引用赋给文档中所需要的对象. 例如:
document.forms[0].someButton.onKeyUp = example;
document.getElementByld("myButton").addEventListener("KeyUp",example,false);
通过这些方式进行事件绑定可以防止自己的参数直接到达调用的函数. 但是,W3C浏览器自动传送event对象的引用并将它作为唯一参数,这个event对象是为响应激活事件的用户或系统行为而创建的. 也就是说,函数需要用一个参数变量来接收参数的event对象:
function example(evt){...}
事件对象包含作为事件目标的对象(例如,包含单控件对象的表单对象)的引用,从而可以访问该对象的任何属性
3、event对象属性
(1)altLeft()属性
altLeft属性设置或获取左Alt键的状态. 检索左Alt键的当前状态,返回true表示关闭,false表示不关闭
语法:
[window.]event.altLeft
由于altLeft属性是布尔值,因此可以将该属性应用到if语句中,根据获取的值不同而执行不同的操作
(2)ctrlLeft属性
ctrlLeft属性设置或获取左Ctrl键的状态. 检索左Ctrl键的当前状态,返回值true表示关闭,false表示不关闭
语法:
[window.]evnet.ctrlLeft
由于ctrlLeft属性是Boolean值,因此可以将该属性应用到if语句中,根据获取的值不同而执行不同的操作
(3)shiftLeft属性
shiftLeft属性设置或捉去左shift键的状态. 检索左Shift的当前状态,返回值值true表示关闭,false表示不关闭
语法:
[window.]event.shiftLeft
shiftLeft属性或获取左Shift键的状态. 检索左Shift键的当前状态,返回值true表示关闭,false表示不关闭
语法:
[window.]event.shiftLeft
由于这3个属性值同样也都是Boolean类型的,所以可以将他们组合成一个条件再if语句中应用,并且也可以和altKey、ctrlKey及shiftKey属性同时使用
程序清单:
将altKey、ctrlKey和shiftKey属性进行结合,组成一个综合的条件,应用if语句判断当Ctrl键、Shift键和alt键同时按下时执行一个操作
在本实例中,创建一个自定义函数example(),通过window.event获取Ctrl、Shift键和Alt键的值,并应用if语句判断Ctrl键、Shift键和Alt键是否同时按下,如果是执行alert中的内容和window.location.href超链接的文件.
<script type="text/javascript"> function example(){ //创建自定义函数 if (window.event.ctrlKey&&window.event.altKey&&window.event.shiftKey) { //如果Ctrl、Shift键和Alt键同时被按下,则执行下面的内容 alert('欢迎来到我的博客,我是牧民战天兔!'); //弹出一个对话框 window.location.href = "index.html"; //链接到一个文件 } } document.onkeydown = example; //应用onkeydown事件输出函数example()中的内容 </script>
(4)button属性
button属性设置或获取事件发生时用户所按的鼠标键
语法:
[window.]event.button
该属性设置或获取事件发生时用户所按的鼠标键
| 值 | 说明 | 值 | 说明 |
| 0 | 表示没有按键 | 4 | 按下中间键 |
| 1 | 按下左键(主键) | 5 | 同时按下下左键和中间键 |
| 2 | 按下右键 | 6 | 同时按下右键和中间键 |
| 3 | 同时按下左键和右键 | 7 | 同时按下左键、中间键和右键 |
用户按下多个键时,每次都激活一个onmousedown事件. 如果用户首先按下左键,则onmousedown事件激活,event.button属性值为1;如果此时按下右键,那么onmousedown事件再次发生,单event.button属性值为3.
如果脚本同时按下两个键执行特殊操作,那么就应该忽略单一按键动作,因为在处理过程中很可能激活单键事件,从而干扰目标行为
注意:button属性仅用于onmousedown、onmouseup、onmousemove事件. 对于其他事件,无论鼠标状态如何,都返回0(如onclick)
程序清单:
在浏览网页的过程中,经常会用到鼠标右键进行操作. 为了提高网站的安全性和有效利用资源,可以在页面中添加右击自动链接到指定网站的功能. 在本实例中,实现在页面中的任何位置右击都将弹出“江苏无锡欢迎您”对话框,单击确定按钮后将进入百度www.baidu.com页面
这里主要应用的是event对象中的button属性,判断鼠标右键被按下时提示对话框,单击“确定”按钮后跳转到百度首页.
<script type="text/javascript"> function gosite(){ if (event.button == 2) { alert("江苏无锡欢迎您"); window.open("https://www.baidu.com"); return false; } } document.onmousedown = gosite; </script>
(5)clientX属性
clientX属性获取鼠标在浏览器窗口中的X坐标,是一个只读属性,即只能获取鼠标的当前位置,不能改变属性的位置
语法:
[window.]event.clientX
(6)clientY属性
clientY属性获取鼠标在浏览器串口中的Y坐标,是一个只读属性,即只能获取鼠标的当前位置,不能改变鼠标的位置
语法:
[window.]event.clientY
程序清单:
设计一个文字跟随鼠标移动的实例. 当鼠标移动到文字上方时,拖动鼠标即可使工作区中的文字跟随鼠标移动.
<!DOCTYPE html> <html> <head> <title>跟随鼠标移动的文字</title> <style type="text/css"> .move_out{ position: relative; cursor: hand; font-family: "华文行楷"; } </style> </head> <script type="text/javascript"> var move_out = false; //定义变量,值为false var z,x,y; //定义变量 function move(){ //创建函数 if (event.button == move_out) { //判断当前鼠标是否左键按下状态 z.style.pixelLeft = temporarily1+event.clientX;//获取当前鼠标位置 z.style.pixelTop = temporarily2+event.clientY;//获取当前鼠标位置 return false; } } function down(){ if (event.srcElement.className == "move_out") { move_out = true; z = event.srcElement; temporarily1 = z.style.pixelLeft; temporarily2 = z.style.pixelTop; x = event.clientX; y = event.clientY; document.onmousemove = move; }else{ move_out = false; } } document.onmousedown = down; </script> <body> <font color="0000ff" size="10" class="move_out">江苏欢迎您!</font> </body> </html>
(7)XorY属性
X属性设置或获取鼠标指针位置相对于CSS属性中有position属性的上级元素的X轴坐标. 如果CSS属性中没有position属性的上级元素,默认以body元素作为参考对象
语法:
[window.]event.Y
如果鼠标事件触发后,鼠标指针移出窗口外,则返回值为-1. 这是一个只读属性,只能通过它获取鼠标的当前位置,但不能用它来更改鼠标的位置
程序清单:
本实例主要在用鼠标按住要移动的层时,将层的名称赋给一个变量,并用该变量对层进行移动的操作. 如果直接用层的名称来对层进行移动,将会选中层面的一些信息,其中通过event对象中的X和Y属性在要移动的层上拖动鼠标,来改变当前的位置
1⃣️在页面中添加两个层,并且其中一个层包含另一个层. 在div1层的鼠标按下事件onmousedown触发时调用自定义函数div_down()
xxxxxxx
-------------
这里不好实现,以后补
(8)cancleBubble属性
cancelBubble属性检测是和否受上层元素事件的控制. 如果该属性的值是false,则允许被上层元素事件控制:否则值为true,则不被上层元素的事件控制
语法:
[window.]event.cancleBubble[=cancleBubble]
该属性的值是一个可读写的布尔值,默认值为false
(10)srcElement属性
srcElement属性设置或获取触发事件的对象. srcElement属性是事件初始目标的HTML元素对象引用. 由于事件通过元素容器层次进行处理,且可以在任何一个层次进行处理,因此由一个属性指向产生初始事件的元素是很有帮助的
语法:
[window.]event.srcElement
通过该属性可以读、写属于该元素的属性,并调用它的任何方法
程序清单:
在浏览网页中的表格数据时,有时会忘记浏览到的位置,这时可以用鼠标选中已经读取到的数据并改变表格中单元格的背景颜色,从而记录数据读取的位置,便于后续继续浏览
该功能的主要实现是通过onclick事件,并且应用event对象中的srcElement属性获取发生事件的文档元素,并将其保存到变量e中. 然后应用e.tagName(获取当前位置的标志名称)判断发生事件的文档是否在表格的单元格上,并利用变量e中的runtimeStyle样式中的color和backgroundColor属性来改变当前单元格的前景色和背景的,其中还应用了event对象中的cancelBubble属性,防止下一个外层对象冒泡.最后应用了window对象中的lastSelection属性获取最后一次选中的单元焦点
<script type="text/javascript"> //创建自定义函数select(),保存发生事件的文档元素信息 var lastSelection = null; function select(element){ var e,r,c; if (element == null) { e = event.srcElement; //获取body元素的原始记录 }else{ e = element; } if (e.tagName == "TD") { c = findcell(e); if (c! = null) { if (lastSelection != null) { deselectroworcell(window.lastSelection) } selectroworcell(c); lastSelection = c; } } window.event.cancelBubble = true; //取消冒泡语句,用于防止向下一个外层对象冒泡 } table1.onclick = select; //创建自定义函数findcell(),用于判断选中的位置是否是单元格 function findcell(e){ if (e.tagName == "TD") { return e; }else if(e.tagName == "BODY"){ return null; }else{ return findcell(e.parantElement); } } //创建自定义函数selectroworcell(),用于改变单元格的前景色和背景色 function selectroworcell(r){ r.runtimeStyle.backgroundColor = "darkbule"; r.runtimeStyle.color = "white"; } //创建自定义函数deselectroworcell(),用于前景色和背景色恢复正常 function deselectroworcell(r){ r.runtimeStyle.backgroundColor = ""; r.runtimeStyle.color = ""; } </script>
-----------------------------------------
跟新到这里啦
实验了几周,为了压力小一点,最近要复习Java了,制定了以下新的计划:
JavaScript以后周一到周五准时更新
周六周日不更休息♨️,也还有重要的事情要处理
晚安!
