Js获取事件对象代码

一般做法：


代码如下:

<input type="button" id="test" value="点我测试" />
<script type="text/javascript">
var testBtn = document.getElementById('test');
testBtn.onclick = testFun;
function testFun(e)
{
var evt = e || window.event;
alert(evt);
}
</script>

或者：


代码如下:

<input type="button" id="test" value="点我测试" />
<script type="text/javascript">
var testBtn = document.getElementById('test');
if(window.addEventListener)
{
testBtn.addEventListener('click', testFun, false);
}
else if(window.attachEvent)
{
testBtn.attachEvent('onclick', testFun);
}
function testFun(e)
{
var evt = e || window.event;
alert(evt);
}
</script>

返回的值都是 “[object Event]“。
但如果是这种方式呢？


代码如下:

<input type="button" id="test_1" value="点我测试" onclick="testFun_1()" />
<script type="text/javascript">
function testFun_1()
{
//此处如何获得？
}
</script>

“内事不决问百度，外事不决问谷歌”， 此言不虚。搜索了下，答案还真不少，不过大多数雷同（可能是巧合）。
http://www.jb51.net/article/19408.htm
http://www.cnblogs.com/cuixiping/archive/2008/04/13/1150847.html
愚公 的这个文章（貌似转帖）还是颇有见解的。


代码如下:

<input type="button" id="test_1" value="点我测试" onclick="testFun_1()" />
<script type="text/javascript">
function testFun_1()
{
var evt = getEvent();
alert(evt);
}
function getEvent(){
if(window.event) return window.event; //这里用对象检测更为妥当
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
</script>

一般来说，很少用到这种嵌入式的写法（js写在html标签中 onclick="testFun_1()"），也不推荐使用这种方法，会造成维护和开发的麻烦。

赞 (0)

相关推荐

  • js中获取事件对象的方法小结

    js中获取事件对象的方法小结

    复制代码 代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在html的属性中写JS代码 复制代码 代码如下: <div onclick="alert(4);">Div1 Element</div> 大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的

  • 理解JavaScript事件对象

    在触发DOM上的某个事件时,会产生一个事件对象event. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中.event对象包含与创建它的特定事件有关的属性和方法.除法的事件类型不一样,可用的属性方法就不一样.不过,所有的事件都会有下表列出的成员. 下面列出了 2 级 DOM 事件标准定义的属性: bubbles: 返回布尔值,指示事件是否是起泡事件类型. cancelable: 返回布尔值,指示事件是否可拥可取消的默认动作. currentTarget: 返回其

  • JavaScript 获取事件对象的注意点

    平时我们获取事件对象一般写法如下: 复制代码 代码如下: function getEvent(event) { return event || window.event // IE:window.event } 如果没有参数,也可写成(非IE :事件对象会自动传递给对应的事件处理函数,且为第一个参数): 复制代码 代码如下: function getEvent() { return arguments[0] || window.event // IE:window.event } 这样的写法在除

  • Javascript拖拽&拖放系列文章3之细说事件对象第1/4页

    Javascript拖拽&拖放系列文章3之细说事件对象第1/4页

    在阅读本文前,可以先阅读<Javascript拖拽&拖放系列文章2之offsetLeft.offsetTop.offsetWidth.offsetHeight属性>这篇文章,以理清上下文关系.好了,让我们开始进入正题. 模型相同的属性/方法 1 Button属性 Integer类型,可读可写.对于特定的鼠标事件,表示按下的鼠标按钮,它可以在拖拽的时候,判断是否是鼠标左键引发mousedown事件.它的所有取值及其意义(参考自<Javascript高级程序设计>)好了,让我们

  • js 事件对象 鼠标滚轮效果演示说明

    js 事件对象 鼠标滚轮效果演示说明

    Mouse Wheel Data .slider { width:50px; height:180px; background:#eee; padding:10px 0; cursor:n-resize; } .slider-slot { width:16px; margin:0 auto; height:180px; background:#eee; border:1px solid gray; border-color:#999 white white #999; position:rela

  • JavaScript 事件对象的实现

    比如,我们定义了一个Classroom对象,这里我们定一个事件,当教室里的人增加超60人时就触发一个事件onFull;具体定义如下: 复制代码 代码如下: var Classroom=function() { this.numberOfPeople=0; this.onFull=null; this.peopleEnter=function(number) { this.numberOfPeople+=number; if(this.numberOfPeople>60&&this.o

  • JS的Event事件对象使用方法

    fasdf function bb(e){ alert(e); } var container = document.getElementById("contentq"); container.onclick=function(e){ if(document.all){//IE var a=window.event; alert(a.type); }else{ alert(e.type); } } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 事件对象获取统一的方法:(来

  • javascript 事件对象 坐标事件说明

    测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 Safari 4.0 先来看看各个主流浏览器都有哪些坐标属性以及它们的意义 在IE中 event.offsetX event.offsetY 相对于e.srcElement坐标 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. event.clientX event

  • Js获取事件对象代码

    一般做法: 复制代码 代码如下: <input type="button" id="test" value="点我测试" /> <script type="text/javascript"> var testBtn = document.getElementById('test'); testBtn.onclick = testFun; function testFun(e) { var evt = e

  • js中事件对象和事件委托的介绍

    js中事件对象和事件委托的介绍

    Ie9以下浏览器中的事件对象是放在全局中的window.event; 解决兼容性:event = event || window.event 事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变): event.target(点击的目标对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • JS获取html对象的几种方式介绍

    document.getElementById("zx"); 通过ID获取html元素对象,ID号在html文档当中应该是唯一的.返回的是唯一element对象.并且所有浏览器都兼容. document.getElementsByTagName("span")[0]; 通过标签查找html对象,由于html标签在一个页面中可能重复很多次,所以当前页面返回的是一个数组.可以根据标签出现的位置定位元素的对象.所有浏览器都兼容. document.getElementsB

  • 用原生JS获取CLASS对象(很简单实用)

    听说是最常用....我是看了dom编程艺术想到的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • js获取url参数代码实例分享(JS操作URL)

    代码很简单,主要一个思路是把url参数解析为js对象,再做增.删.改.查操作就很方便了~,这里做笔记. 复制代码 代码如下: var LG=(function(lg){    var objURL=function(url){        this.ourl=url||window.location.href;        this.href="";//?前面部分        this.params={};//url参数对象        this.jing="&quo

  • js获取html页面代码中图片地址的实现代码

    第一种方法:js通过正则实现 /** * 获取html代码中图片地址 * @param htmlstr * @returns {Array} */ function getimgsrc(htmlstr) { var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim; var arr = []; while (tem = reg.exec(htmlstr)) { arr.push(tem[2]); } retur

  • 使用node.js 获取客户端信息代码分享

    使用node.js 获取客户端信息代码分享

    在网上看见很多问node.js如何获取客户端信息,所以记录下来,以供大家参考. 结果: 是不是很简单呢,有相同需求的小伙伴直接拿走,自由使用吧.

  • JS获取dom 对象 ajax操作 读写cookie函数

    复制代码 代码如下: var LF = {}; LF.version = '1.0.0'; //全局函数 function $(objName) { return document.getElementById(objName); } function $name(objName) { return document.getElementsByName(objName); } function $tag(objName) { return document.getElementsByTagNam

随机推荐