事件对象1

Posted 2020-10-04 耿鑫

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