JS--事件对象中部份浏览器不兼容方法
测试时主要用的浏览器是Firefox 28.0、IE11、IE8、Chrome 34.0
一、什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
事件对象:我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的,可以通过arguments来获得函数传递过来的参数。
function box(){
alert(arguments.length); //
}
box(); var box=document.getElementById("box"); //获得HTML界面上id为box的DIV 对象
box.onclick=function(){
alert(arguments.length); //1 在事件绑定函数中获得了一个隐藏的变量
} box.onclick = function(){
alert(argument.length); //
alert(typeof arguments[0]); //object
alert(arguments[0]); //IE11: object PointerEvent Firefox/Chroms: obejct MouseEvent
}
通过arguments可以获得事件绑定函数中浏览器传递过来的参数对象,event,但是这种方式比较麻烦,可以通过直接接受参数的方法,但是存在浏览器的兼容性问题,
//兼容方法 IE11和Chrome对下面两种方法都支持,Firefox只是支持第一种,IE8支持第二中
window.onload = function(){
var input = document.getElementsByTagName("input")[0];
input.onclick=function(event){ //这个参数名称可以随便取
var e = event || window.event;
alert(e);
}
}
二、鼠标事件
鼠标事件中的onclick是被单击事才触发的事件,因此检测的信息不是很重要,但是对于onmousedown和onmouseup事件中,event对象提供了一个button属性,用来获得鼠标按下的是哪一个键值 存在浏览器的兼容性问题
//Firefox、Chrome、IE11 : 0(左键)、1(中键滚轮)、2(右键)
//IE8 :1(左键)、4(中键滚轮)、2(右键)
//做兼容
function getButton(event){
var e = event || window.event;
if(event){ //非IE8及以下,都支持这个属性,并且button属性和W3C返回的是一样的
return e.button; //直接返回
}else if(window.event){
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}
}
} //调用
document.onmouseup=function(event){
var button = getButton(event);
if(button == 0){
alert("按下了左键");
}else if(button ==1 ){
alert("按下了中键滚轮");
}else{
alert("按下了右键");
}
}
获得可视区以及屏幕的坐标,默认单位是像素 px
document.onclick = function(event){
var e = event || window.event;
alert(e.clientX); //可视区X坐标,点击的地方距离可视区左边边框的距离
alert(e.clientY); //可视区X坐标,点击的地方距离可视区上边边框的距离 alert(e.screenX); //屏幕X坐标,点击的地方距离整个屏幕左边的距离
alert(e.screenY); //屏幕Y坐标,点击的地方距离整个屏幕上面的距离
}
修改键 ,通过event对象来判断是否是按下了ctrl、shift、Alt键
//修改键
document.onclick = function(event){
var e = event || window.event;
if(e.ctrlKey){
alert("按下了ctrl键");
}
if(e.shiftKey){
alert("按下了shift键");
}
if(e.altKey){
alert("按下了Alt键");
}
} //这三个键可以同时按下,那么上面三个都会答应出来,我们可以通过一个方法来获得按下的键
document.onclick = function(event){
var keys = getKeys(event);
alert(keys);
} function getKeys(event){
var e = event || window.event;
var keys=[]; if(e.ctrlKey){
keys.push("Ctrl");
}
if(e.shiftKey){
keys.push("shift");
}
if(e.altKey){
keys.push("alt");
}
return keys;
}
三、键盘事件
键码 :在发生 onkeydown 和 onkeyup 事件的时候,event对象中的keyCode属性会包含一个代码值, 与键盘上一个特定的键对应。对数字和字母字符集,keyCode返回的就是对应的ASCII值,不区分大小写
document.onkeyup = function(event){
var e = event || window.event;
alert(e.keyCode);
}
//PS: Firefox 和 Safari 中分号键返回的是59,而其他几款浏览器返回的则是186
字符编码 :Firefox、Chrome 和 Safari 的 event 对象都支持一个 charCode 属性,这个属性只有在发生 keypress 事件时才包含值,而且这个值是按下的那个键所代表字符的 ASCII 编码。此时的 keyCode 通常等于 0 或者也可能等于所按键的编码。
IE 和 Opera 则是在 keyCode 中保存字符的 ASCII 编码。
keypress:按键按下并且松开时才会触发的事件,等价于onclick
需要做浏览器的兼容
document.onkeypress = function(event){
var e = event || window.event;
if(typeof e.charKode == "number"){
alert(e.charCode); //火狐、IE11、chrome都支持
}else{
alert(e.keyCode); //IE8 ,Chrome、IE11
}
}
PS: 火狐中按F5键同样会有值返回,而shift等键按下的时候没有值输入,因为它根本就不会触发这个事件
可以通过方法 String.fromCharCode(); 方法将ASCII值转换成实际的字符
四、W3C 与 IE
在标准的DOM级事件中,event对象包含与创建它的事件有关的属性和方法,触发的事件不一样可用的属性和方法也不一样,此处罗列三个不一样的地方,
获得事件源 W3C: target IE8: srcElement IE11和Chrome两种方法都支持
window.onload = function(){
var input = document.getElementsByTagName("input")[0];
input.onclick = function(event){
getSrc(event); //去调用另外一个函数,
}
} function getSrc(event){
var e = event || window.event;
alert(e.target); //HTMLInputElement
alert(e.target.tarName); //INPUT
alert(e.srcElement); //HTMLIntElement Firefox:null
alert(typeof e.srcElement); //Firefox: undefiend
}
做浏览器的兼容
function getSrc(event){
var e = event || window.event;
if(event){
return e.target;
}
if(window.event){
return e.srcElement;
}
}
//因为 typeof e.target 返回的是undefined,故等价于 return e.target || e.srcElement;
取消事件冒泡
//事件冒泡
window.onload=function(){
document.onclick=function(event){
alert("document");
}
//document.getElementsByTagName("html")[0].onclick=function(event){
document.documentElement.onclick = function(event){
alert("html");
}
document.body.onclick=function(event){
alert("body");
}
document.getElementById('box').onclick = function () {
alert('div');
}; document.getElementsByTagName("input")[0].onclick=function(event){
alert("input");
}
} //上面的代码中,如果在按钮input上面进行点击,那么上面五个点击事件都会被触发,这就是冒泡 //IE和W3C取消冒泡的方式不一样,同样是IE8和Firefox之间的区别,IE11和Chrome两种方法都支持
//如果只是希望在input上面执行单击事件,那么将最后一个单击事件函数改一改
//W3C
document.getElementsByTagName("input")[0].onclick=function(event){
alert("input");
if(event.bubbles){ //也可以不用判断。直接取消
event.stopPropagation();
}
} //IE8
document.getElementsByTagName("input")[0].onclick=function(){
alert("input");
var e = window.event;
e.cancelBubble = true;
}
做浏览器的兼容
document.getElementsByTagName("input")[0].onclick=function(event){
alert("input");
var e = event || window.event;
window.event ? e.cancelBubble : e.stopPropagation();
//(typeof e.stopPropagation == 'function')?e.stopPropagation:e.cancelBubble=true;
}
阻止默认事件发生,比如页面上有一个超链接元素 <a href="http://www.baidu.com">百度</a>
//比如页面上有一个超链接元素 <a href="http://www.baidu.com">百度</a>
window.onload=function(){
var a = document.getElementsByTagName("a")[0];
a.onclick = function(){
alert("a");
}
}
//在点击了这个a标签后,先打印出字符 a 然后会自动的跳转到百度页面,而这个跳转就是默认行为
默认事件
//W3C IE11 Chrome都支持
window.onload=function(){
var a = document.getElementsByTagName("a")[0];
a.onclick = function(event){
alert("a");
if(cancelable){ //如果为真,表示可以取消默认行为,也可以不进行此判断,直接取消
event.preventDefault();
}
}
} //IE8 IE11已经不支持了,但是Chrome还是支持
window.onload=function(){
var a = document.getElementsByTagName("a")[0];
a.onclick = function(){
var e = window.event;
alert("a");
e.returnValue = false; //默认为true
}
}
取消默认行为方法
做浏览器的兼容,新版本的IE已经不支持旧版本的方法
//做兼容
window.onload=function(){
var a = document.getElementsByTagName("a")[0];
a.onclick = function(event){
alert("a");
var e = event || window.event;
typeof e.preventDefault == "function" ? e.preventDefault() : e.returnValue = false;
}
}
JS--事件对象中部份浏览器不兼容方法的更多相关文章
- JavaScript的事件对象中的特殊属性和方法(鼠标,键盘)
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- JS—事件对象
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
- JS 事件对象和事件冒泡
1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- JS:事件对象1
一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- JS删除对象中的某一属性(delete)
var obj= {} 1.JS对象添加新属性 obj.address="shenzhen" 2.JS删除对象中的某一属性(delete) var obj= { height: , ...
- js 事件对象
/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...
随机推荐
- SMTP Failed on Process Scheduler
If you are seeing messages like this in your message log when running a process through the process ...
- ASP.NET的学习之asp.net整体运行机制
1.浏览器向服务器发送请求报文,服务器端的软件比如是IIS,接受请求 2.IIS通过aspnet_isapi.dll 这个程序集来请求FrameWork中的ASP.Net框架,这是对于集成模式 3.进 ...
- js给php传值
//ajax传值 var str= JSON.stringify(arr1);//数组转string //alert(typeof(str)); $.ajax({ url:'test.php' ,ty ...
- 表格控件表头栏目(Column)与数据表头步
不用手工增加栏目的列,也就是Column,由数据库的查询结果自动创建. 用的是Delphi2010,安装了Dev,用CxGrid显示数据库查询结果.用什么控件没有关键,道理相同的.
- jquery 点击页面其他地方实现隐藏菜单功能
1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...
- 开始认真学计算机网络----computer network学习笔记(一)
什么是计算机网络,就是连一堆计算机,计算机不单单指pc,还包括打印机啦,手机啦巴拉巴拉一堆 为什么要连,share data共享数据 数据? 文档,图片,视频,巴拉巴拉 网络有什么类型? LAN--- ...
- JS把函数当作参数传递
getDescPage("commonPage","/page/common/tips/tips.html",init()); $("#"+ ...
- Java 逻辑运算符、位运算符、移位操作符 总结(Java 学习中的小记录)
Java 逻辑运算符.位运算符.移位操作符 总结 作者:王可利(Star·星星) 逻辑运算符,表格如下: 解析逻辑运算符表: 1.与 (&) 特点:两个都为真的时候,结果为真.两个为 ...
- CSV 文件读取类
class CsvReader { private $csv_file; private $spl_object = null; private $error; public function __c ...
- iOS另类的内存管理
iOS的内存管理算是老生常谈的问题了,我们写iOS的时候无时无刻不在涉及到内存管理.从开始的MRR(manual retain-release)到后来ARC(Automatic Reference C ...