事件对象1

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;
}

时间: 2024-10-24 08:29:45

事件对象1的相关文章

事件对象(二)

冒泡和默认行为 如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题. 例,html代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件对象</title> <script type="text/javascript" src="jquery-1.12.3.js&

javascript event(事件对象)详解

1. 事件对象 thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.45;vertical-align:top;border-top:1px solid #ddd}.table>thead

jQuery事件对象的属性和方法

jQuery事件对象的属性和方法 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(

jQuery事件对象的作用

jQuery事件对象的作用 事件中的Event对象容易被初学者忽略掉,可能大多时候初学者不知道怎么去用它,但有些时候它还是非常有用的 一个标准的"click"点击事件 $(elem).on("click",function(event){ event //事件对象 }) 在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异.jQuery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象

JS-DOM2级事件对象跨浏览器处理(已封装)

1 var eventUill = { 2 //添加事件 3 addHander: function(element, type, handler) { 4 if(element.addEventListener) { 5 element.addEventListener(type, handler, false); 6 } else if(element.attachEvent) { 7 element.attachEvent('on' + type, handler); 8 } else {

JS 事件(3)——事件对象

事件对象 在触发DOM节点上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息. DOM中的事件对象 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>事件对象</title> 6 </head> 7 <body> 8 <div id="box"&

JS 事件(4)——跨浏览器的事件对象

跨浏览器的事件对象详解 封装事件对象 1 var event_util = { 2 //添加事件 3 addHandler: function(element, type, handler) { 4 if(element.addEventListener) { 5 element.addEventListener(type, handler, false); 6 } else if(element.attachEvent) { 7 element.attachEvent("on" +

JS—事件对象

事件对象: 在触发DOM事件的时候都会产生一个对象 事件对象Event: 1)type:获取事件类型 2)target:获取事件目标 3)stopPropagation():阻止事件冒泡 4)preventDefault():阻止事件默认行为 <div id="div"> <button id="btn">按钮</button> <a href="www.baidu.com" id="aid&q

JavaScript的事件对象_鼠标事件

鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等. 一.鼠标按钮 只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发 click 事件,因此检测按钮的信息并不是必要的. 但对于 mousedown 和 mouseup 事件来说,则在其 event 对象存在一个 button 属性,表示按下或释放按钮. <script type="text/javascript"> window.onload

js跨浏览器事件对象、事件处理程序

项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节点.事件名.事件处理函数 addHanler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒