首页 > 其他 > 详细

事件对象1

时间:2017-08-23 15:24:27      阅读:279      评论:0      收藏:0      [点我收藏+]

ondblclick: 双击

onmousedown: 当用户按下了鼠标还未弹起时触发。

onmouseup: 当用户释放鼠标按钮时触发。

onmouseover: 当鼠标移到某个元素上方时触发。

onmouseout: 当鼠标移出某个元素上方时触发。

onmousemove: 当鼠标指针在元素上移动时触发。


键盘事件:

onkeydown: 当用户按下键盘上任意键触发,如果按住不放,会重复触发。

window.onkeydown=function(){
}


onkeypress: 当用户按下键盘上的字符键触发,如果按住不放,会重复触发。

onkeyup: 当用户释放键盘上的键触发。

HTML事件

onload

onunload: 当页面完全卸载后在window上面触发。

window.onunload=function(){
}

onselect: 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。

onchange: 当文本框(input 或 textarea)内容改变且失去焦点后触发。

onfocus: 当页面或者元素获得焦点时在window及相关元素上面触发。

input.onfocus=function(){
}

onblur: 当页面或元素失去焦点时在window及相关元素上触发。


onsubmit: 当用户点击提交按钮在<form>元素上触发。

<form>
<input type="submit" value="按钮" />
</form>
form.onsubmit=function(){
}

onreset: 当用户点击重置按钮在<form>元素上触发。

<form>
<input type="reset" value="按钮" />
</form>
form.onreset=function(){
}

onresize: 当窗口或框架的大小变化时在window或框架上触发。

window.onresize=function(){
}

onscroll: 当用户滚动带滚动条的元素时触发。

window.onscroll=function(){
}

----------------------------------------------------------------------------------------------------------

window.onload=function(){
document.onclick=box; //因为box()函数被onclick绑定了,所以里面的this代表document
}
function box(){
alert(this); //HTMLDocument,代表是document
}


box(); //object Window,如果是在全局范围调用box(),那么this代表window

当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、
以及其它与特定事件相关的信息。
事件对象,我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的。

window.onload=function(){
document.onclick=function(){
alert(arguments.length); //1 如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,这个参数就是
event对象
alert(arguments[0]); //MouseEvent,鼠标事件对象
}
document.onkeydown =function(){
alert(arguments[0]); //KeyboardEvent,键盘事件对象
}
}

上面这种方法比较累

直接接收event对象,是W3C的做法,IE不支持,IE自己定义了一个event对象,直接在window.event获取即可。
window.onload=function(){
document.onclick=function(evt){
var e=evt||window.event; //实现跨浏览器兼容获取event对象
alert(e);
}
}
//PS:window.event这个属性IE是支持的,Chrome也是支持的,
//PS:Chrome也是支持W3C的
//PS:如果说W3C和IE的都支持的话,那么就以W3C为准
----------------------------------------------------
鼠标事件:
非IE(W3C)中的button属性
0:表示主鼠标按钮(常规一般是鼠标左键) alert(e.button)
1:表示中间的鼠标按钮(鼠标滚轮按钮) alert(e.button)
2:表示次鼠标按钮(常规一般是鼠标右键) alert(e.button)

IE中的button属性
1:表示主鼠标按钮(常规一般是鼠标左键)
4:表示按下了中间的鼠标按钮
2:表示次鼠标按钮(常规一般是鼠标右键)

//跨浏览器鼠标按钮
window.onload=function(){
document.onmouseup=function(evt){
alert(getButton(evt));
}
}
function getButton(evt){
var e=evt||window.event;
if(evt){ //这个写前面
return e.button;
}else if(window.event){
switch(e.button){
case 1:
return 0;
case 4:
return 1;
case 2:
return 2;
case 0: //360浏览器在onmousedown的时候有问题 右键是undefined打印出来是0,有时候可能是冲突
return 2;
}
}
}

------------------------------------------------------------------------------
可视区的横纵坐标:

window.onload=function(){
document.onclick=function(evt){
var e=evt||window.event;
alert(e.clientX+‘,‘+e.clientY);
}
}

--------------------------------------------------------------
离屏幕的坐标:

window.onload=function(){
document.onclick=function(evt){
var e=evt||window.event;
alert(e.screenX+‘,‘+e.screenY);
}
}

-------------------------------------------------------------------------------------------------
修改键
有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为:Shift、Ctrl、Alt和Meat(Windows中
就是Windows键,苹果机中是Cmd键),他们经常被用来修改鼠标事件和行为,所以叫修改键。

shiftKey : 判断是否按下了Shift键
ctrlKey: 判断是否按下了 ctrlKey键
altKey: 判断是否按下了 alt键
metaKey: 判断是否按下了windows键,IE不支持

window.onload=function(){
document.onclick=function(evt){
alert(getKey(evt)); //360有点问题
}
}

function getKey(evt){
var e=evt||window.event;
var keys=[];
if(e.shiftKey) keys.push(‘shift‘);
if(e.ctrlKey) keys.push(‘ctrl‘);
if(e.altKey) keys.push(‘alt‘); //单击+alt和360的快捷键冲突了
return keys;
}

-------------------------------------------------------------------------------------------
键盘事件:
onkeydown,按下任意键,按下的意思就是按下立即触发
onkeyup,是弹起任意键,弹起就是按下然后释放触发
keypress,是按下字符键,abc,123,特殊字符啊什么的 shift、ctrl、alt等等不是字符的键无效

键码:键盘上的任意键,
字符编码:键盘上可以输出的字符的键

键码返回的是ASCII的小写字母对应的,键码只是返回那个键的值,不认识字母大小写
键码在字符上和字符编码的ASCII是一致的。

键码可以返回任意键的编码,而且字母不区分大小写

键码在所有浏览器貌似都兼容

keydown和keyup 用keyCode

window.onload=function(){
document.onkeydown=function(evt){
var e=evt||window.event;
alert(e.keyCode); //keyCode返回键码 a:65 A:65 不区分大小写
}
//如果用keypress返回keyCode,发现Firefox浏览器把所有字符键返回0,
//Chrome支持keypress返回keyCode,而且还支持大小写(大小写返回的值不一样)
//IE支持keypress返回keyCode,而且还支持大小写

不同浏览器在;号上返回的键码值不一致,如果用到,需要做兼容
}

字符编码:
Firefox、Chrome和Safari的event对象都支持一个charCode属性,这个属性只有在发生keypress事件时才包含值,而且这
个值是按下的那个键所代表字符的ASCII编码

keypress用charCode
charCode在使用keypress的情况下,Firefox会返回字符键盘的编码,支持大小写
IE和Opera不支持charCode这个属性

一般情况下,我们不管非字符键,基本上处理的都是字符按键。
window.onload=function(){
document.onkeypress=function(evt){
alert(getCharCode(evt)); //alert(String.fromCharCode(getCharCode(evt))) 返回a 或者 A
}
}
//所有浏览器都支持
function getCharCode(evt){
var e=evt||window.event;
if(typeof e.charCode==‘number‘){
return e.charCode;
}else {
return e.keyCode;
}
}

------------------------------------------------------------------------------------------------------
页面中有个div,点击这个div

window.onload=function(){
document.onclick=function(evt){
var e=evt||window.event;
//alert(e.target); //你点击哪里,得到哪里的对象
//alert(e.target.targetName); //DIV
alert(e.target.innerHTML);

alert(getTarget(evt)); //兼容各个浏览器
}
}


做兼容:
function getTarget(evt){
var e=evt||window.event;
return e.target||e.srcElement;
}

 

事件对象1

原文:http://www.cnblogs.com/gengxinnihaoma/p/7418328.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!