JS笔记-关于在DOM0级别中设置事件处理对象的思考
2015-05-17 23:22
417 查看
在JavaScript指定事件处理程序的方式中,有三层,分别是DOM 0 级, DOM 1 级, DOM 2 级。
DOM 0 级是最传统的形式,主要为直接给指定元素的某个事件直接指定,
ex:
在上述过程中,div元素的click事件被赋予了一个匿名函数。
带有指定参数的方法传递给指定的事件 !
请看下面代码:
执行这段代码,我们会发现,在还没点击div元素的时候,say(s)就已经被执行了!
经过思考,我认为是一下原因:div.onclick = say(s); 这行代码,表达的意思并非是把say(s)这个执行方法传递给div的click事件,而是将其执行的结果传递给click事件。也就是说,这行代码是将say(s)的执行结果传递给了事件,而非方法本身。于是乎,每一次刷新,都会执行一个say(s)以得到执行的结果。
因此,我尝试将say(s)两边加上双引号,目的是达到将字符串赋给click事件。
代码如下:
执行发现,当点击div元素时,并不能执行say(s)中的方法。
综上,得出结论:通过DOm 0 级传递带参数的实名方法给指定事件,只能通过在标签上设置的方法。如:
仅此,才能将带参数的实名方法(如say(s))传递给指定事件。
DOM 0 级是最传统的形式,主要为直接给指定元素的某个事件直接指定,
ex:
<span style="font-family:Microsoft YaHei;font-size:14px;color:#ff6600;">div.onclick = function(){aliert("hello world!")};</span>
在上述过程中,div元素的click事件被赋予了一个匿名函数。
但,请注意:
我们并不能通过DOM 0 级的传统方法将带有指定参数的方法传递给指定的事件 !
请看下面代码:
<pre name="code" class="html"><span style="font-family:Microsoft YaHei;font-size:14px;color:#ff6600;">function say(s) { alert(s); } var s1 = "hello"; div.onclick = say(s);</span>
执行这段代码,我们会发现,在还没点击div元素的时候,say(s)就已经被执行了!
经过思考,我认为是一下原因:div.onclick = say(s); 这行代码,表达的意思并非是把say(s)这个执行方法传递给div的click事件,而是将其执行的结果传递给click事件。也就是说,这行代码是将say(s)的执行结果传递给了事件,而非方法本身。于是乎,每一次刷新,都会执行一个say(s)以得到执行的结果。
因此,我尝试将say(s)两边加上双引号,目的是达到将字符串赋给click事件。
代码如下:
<span style="font-family:Microsoft YaHei;font-size:14px;color:#ff6600;">function say(s) { alert(s); } var s1 = "hello"; div.onclick = "say(s)"; </span>
执行发现,当点击div元素时,并不能执行say(s)中的方法。
综上,得出结论:通过DOm 0 级传递带参数的实名方法给指定事件,只能通过在标签上设置的方法。如:
<strong><span style="font-family:Microsoft YaHei;font-size:14px;color:#ff6600;"><div onclick="say(s)">hello</div></span></strong>
仅此,才能将带参数的实名方法(如say(s))传递给指定事件。
相关文章推荐
- js中关于简单事件的处理与浏览器对象
- js学习笔记:事件——事件流、事件处理程序、事件对象
- JS-DOM2级事件对象跨浏览器处理(已封装)
- js学习笔记之事件处理模型
- js事件处理、事件对象
- JS中关于事件处理函数名后面是否带括号的问题
- JS中关于事件处理函数名后面是否带括号的问题
- 关于Vue.js一些问题和思考学习笔记(1)
- 关于Vue.js一些问题和思考学习笔记(2)
- JS事件-事件处理程序-笔记总结ing...
- js中关于事件处理函数名后面是否带括号的问题
- Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见
- JavaScript学习笔记之JS事件对象
- JavaScript学习笔记之JS事件对象
- 对原生js事件对象处理的封装
- JS笔记【归纳】:DOM中的事件处理程序
- struts2 笔记01 登录、常用配置参数、Action访问Servlet API 和设置Action中对象的值、命名空间和乱码处理、Action中包含多个方法如何调用
- 韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程
- JS事件处理和事件对象