新普京网站-澳门新普京 > 新普京网站 > 获取事件对象以及元素澳门新普京:

获取事件对象以及元素澳门新普京:

2019/12/29 20:17

其次种: 直接掉用隐敝的event对象。event对象有个srcElement属性,能够直接待上访谈它 复制代码 代码如下:

js 获取事件目的以致元素

何以拿到事件源及触发该事件的指标,方法有众多,js中能够透过event来落实,上边有个不利的演示,感兴趣的情侣能够参照下

某Html元素有onclick方法:onclick='return myfunction(event)'

代码如下:

function myfunction(event) {

event = event ? event : window.event;

var obj = event.srcElement ? event.srcElement : event.target;

 

//当时obj正是触发事件的指标,能够动用它的种种属性

//还足以将obj转变来jquery对象,方便接收别的因素

var $obj = $(obj);

 

alert($obj.parent().attr(href));

 

 

代码如下:
var evt = window.event || arguments[0];

上面分两种丰硕事件的艺术商讨,你恐怕会看见早先从未见到过的获得方式。
1,第风华正茂种丰盛事件的办法,直接在html的属性中写JS代码
复制代码代码如下:

Div1 Element

大概那是上世纪90年份的写法,此时向来把js代码写在网页中很分布,可能那时的js并不太重要,只是用来做做说明或一些花里胡梢的效率而已。怎么样在这里种增加事件措施下获得到事件目的?IE中很简短,因为event是用作全局对象的,所以一向运用event就能够,如下
复制代码代码如下:

Div1 Element

点击该Div后,IE中会弹出'click'字符的音讯框。表明事件目的取拿到了,假若在 Opera/Safari/Chrome 中也测量试验了,会发掘效果和IE同样,说明Opera/Safari/Chrome 中也协理IE格局( window.event 卡塔尔(قطر‎获取事件目的。
Firefox中会报错,提醒:window.event is undefined,表达Firefox不扶助IE情势拿到事件目的而是以句柄的首先个参数字传送入的,随笔早先意见提到了。
地点的用 window.event 来获取事件目的,其实window能够总结的,好似使用alert并非window.alert一样。如
复制代码代码如下:

Div1 Element

在 IE/Opera/Safari/Chrome 中测验,和恰巧不会有何样分别。在Firefox中再测,会有个高兴,你会意识竟然弹出的是click新闻框,并非undefined。
一回测验不一致仅仅三个用window.event.type,二个用event.type。那个难点上边详细讨论。
上面用句柄第二个参数来获得事件目的,能够把onclick属性的值想象成四个无名氏函数,onclick属性值的字符串实际上都以以此无名函数内的js代码。
既然那样,我们就足以通过Function的两性格质argumengs获取到该佚名函数的第一个参数,而该参数便是事件目的。如
复制代码代码如下:

Div1 Element

IE中会报错,提醒:arguments.0.type为空或不是指标
Firefox/Opera/Safari/Chrome 中会弹出click内容的音信框,表达他们都扶植事件目的作为句柄第几个参数字传送入。从左侧也证实了 Opera/Safari/Chrome 不独有扶持W3C标准方法获得事件指标,同一时间也相称了IE情势拿到事件目的。
既然如此知道onclick对应的是二个佚名函数,大家无妨把该佚名函数打字与印刷出来看看,只需以下代码
复制代码代码如下:

Div1 Element

 

在各浏览器中式茶食击该Div,结果如下:

IE6/7/8 :

function onclick(){ alert(arguments.callee);}

IE9 :

function onclick(event){ alert(arguments.callee);}

Firefox / Safari :
function onclick(event) { alert(arguments.callee);}

Chrome :
function onclick(evt) { alert(arguments.callee);}

Opera :

function anonymous(event) {alert(arguments.callee);}

观望这几个函数开掘:
IE6/7/8不曾概念参数
IE9/Firefox/Safari/Opera 定义了参数event
Chrome定义了参数evt。
今昔回到地点遗留的主题材料,如下

复制代码代码如下:

Div1 Element

Div1 Element

那多个div的区分仅window.event.type和event.type。分别点击后,前面一个在Firefox中不弹出undefined,而是click,是因为Firefox中无名氏函数定义了参数event,该参数正好与IE的大局对象event同名,进而误认为Firefox也补助IE格局获得事件指标。

一直以来的道理,Chrome中定义的参数是evt,那么在Chrome中还能透过以下措施获得事件目标,如下
复制代码代码如下:

Div1 Element

2,第两种丰盛事件的章程,定义一个函数,赋值给html成分的onXXX属性
复制代码代码如下:
<script type=text/javascript>
function clk(){}
</script>

Div2 Element

先定义函数clk,然后赋值给onclick属性,这种方法也应当归属上世纪90年间的风行写法。比第风华正茂种艺术好的是它把业务逻辑代码都封装在叁个函数里了,使HTML代码与JS代码稍稍某个抽离,不至于第后生可畏种那么紧凑耦合。
怎么在这种形式(clk函数内卡塔尔中赢得事件目的?IE中利用全局对象event仍旧没难点,如:
复制代码代码如下:
<script type=text/javascript>
function clk(){alert(window.event);}
</script>

Div2 Element

点击Div后,除Firefox外,IE/Opera/Safari/Chrome都能寻常获取事件目的。上面已经涉嫌了 Opera/Safari/Chrome 宽容IE情势(window.event卡塔尔获取事件指标,而唯独Firefox不支持。从而Firefox中只可以通过参数字传送入了。试着那样写
复制代码代码如下:
<script type=text/javascript>
function clk(){alert(event);}
</script>

Div2 Element

因为在Firefox中无名函数是富有event参数的,而clk(State of Qatar是在无名函数之内的,打印出无名函数便知
复制代码代码如下:
<script type=text/javascript>
function clk(){alert(arguments.callee.caller);}
</script>

Div2 Element

点击该Div,Firefox弹出新闻框内容如下
复制代码代码如下:
function onclick(event) {
clk();
}

归来clk中的alert(event卡塔尔,既然无名函数的event传入了,那么在该闭包中clk是能够取获得event的,事实上点击后Firefox会报错:event is not defined。猜想该佚名函数的闭包和function clk(卡塔尔国{alert(eventState of Qatar;}不是同一个闭包碰到。这种方法特别,则只好通过突显的参数字传送入了,如
复制代码代码如下:
<script type=text/javascript>
function clk(e){alert(e);}
</script>

Div2 Element

点击Div,在Firefox中国中国科学技术大学学学弹出了事件指标,协助参数字传送入的浏览器都得以,如Opera/Safari/Chrome。
把上述代码中的arguments[0]改成event,那么全体浏览器都协理。
把以上代码中的arguments[0]改成window.event,那么将唯有Firefox不扶助。
把以上代码中的arguments[0]改成evt,那么将唯有Chrome补助。
观念下为何?
3,第二种丰硕事件措施,使用element.onXXX形式
复制代码代码如下:

Div3 Element

<script type=text/javascript>
var d3 = document.getElementById('d3');
d3.onclick = function(){ }
</script>

这种办法也正如初期,但低价是能够将JS与HTML完全分离,但前提是急需给HTML成分提供一个附加的id属性(或任何能赢得该因素对象的不二等秘书诀卡塔尔(قطر‎。
这种艺术丰富事件IE6/7/8只扶植window.event不扶助参数字传送入,Firefox只帮助参数字传送入不协助其余方法。IE9/Opera/Safari/Chrome 二种情势都支持。
4,第三种丰裕事件措施,使用addEventListener或IE专有的attach伊芙nt
复制代码代码如下:

Div4 Element

<script type=text/javascript>
var d4 = document.getElementById('d4');
function clk(){alert(4)}
if(d4.addEventListener){
d4.addEventListener('click',clk,false);
}
if(d4.attachEvent){
d4.attachEvent('onclick',clk);
}
</script>

那是时下引用的章程,较前三种格局效果尤为有力,可感到成分加多多少个句柄(或称响应函数卡塔尔,扶植事件冒泡或捕获,前三种艺术私下认可都以冒泡。当然IE6/7/8还是没犹如约标准而采纳了和煦专有的attach伊芙nt,且不扶持事件捕获。IE9 中风度翩翩度支撑addEventListener了。
先用window.event测试,如
复制代码代码如下:
<script type=text/javascript>
var d4 = document.getElementById('d4');
function clk(){alert(window.event)}
if(d4.addEventListener){
d4.addEventListener('click',clk,false);
}
if(d4.attachEvent){
d4.attachEvent('onclick',clk);
}
</script>

点击Div[id=d4],IE/Opera/Safari/Chrome都不错的弹出了轩然大波指标新闻框,Firefox弹出的是undefined,预料之中,因为Firefox不援救window.event作为事件目的。
再换到句柄的率先个参数测量检验,如
复制代码代码如下:
<script type=text/javascript>
var d4 = document.getElementById('d4');
function clk(e){alert(e)}
if(d4.addEventListener){
d4.addEventListener('click',clk,false);
}
if(d4.attachEvent){
d4.attachEvent('onclick',clk);
}
</script>

测验以前,估算一下怎样结果,大概有人会感到IE中应该弹出undefined,别的浏览器都以事件指标。事实上全数浏览器弹出的音讯框突显都以事件指标。
总结下:
1,IE6/7/8支撑通过window.event获取对象,通过attach伊芙nt格局丰硕事件时也扶持事件目的作为句柄第一个参数传入
2,Firefox只帮衬事件目的作为句柄第二个参数字传送入
3,IE9/Opera/Safari/Chrome二种情势都协理
澳门新普京 1  

获取事件指标甚至成分怎么着赢得事件源及触发该事件的目的,方法有超级多,js中得以经过event来促成,上边有个不错的亲自过问,感兴趣的朋...

在javascript的平地风波响应中,多数动静大家需求拿到事件源对象来对其天性举办改变,比方修正img的src属性。在事件响应函数中获取事件源的章程有如下二种: 第少年老成种: 直接把作为多少个参数传入。举个例子 复制代码 代码如下:

上一篇:javascript回车完美兑现tab切换到效_javascript技术_脚本之家 下一篇:滑动效果的返回顶部代码_jquery_脚本之家,20款网页常用的返回顶部代码