JS中易弄错的地方(推荐阅读)

最新推荐文章于 2021-06-22 19:05:55 发布

转载最新推荐文章于 2021-06-22 19:05:55 发布 · 684 阅读

文章标签：

#action #div #ie #opera #input #function

js 专栏收录该内容

48 篇文章

订阅专栏

本文分享了JavaScript编程中的实用技巧，包括解决字符集问题、图片尺寸获取、事件绑定等关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近开始用js了，写个备忘。

1.你的js文件是用gb2312类型保存的吧，如果被有charset=utf-8的网页引用了，你麻烦就大了，js里的中文字符全变乱码。

所以在引用js文件时请加上 charset=”gb2312″，如<script type=”text/javascript” charset=”gb2312″></script>

2.js文件可分为“方法”和“方法调用”两块内容，“方法”块放在<head />内，“方法调用”块放页尾。

3.图片的onload事件使用。在现版本下的ie、ff图片的src发生改变都会重新生成一次往服务器端的请求，伴随着onload事件的执行。而在opera的缓存机制影响下，onload事件不会再被执行，强制刷新链接/图片src，在地址后加 ‘?c=123456′ 任意参数才会再次触发图片的onload事件，这样代价很高。

4.图片的原始尺寸。被设定了width属性的<img />，你还怎么知道它的原始尺寸？通过js可以做到，img.removeAttribute(”width”)，然后alert(img.width)即可得到图片的原始尺寸，该方法，各浏览器兼容。

5.掌握call方法很重要。如果你想给某些事件绑定复杂的带有参数的方法，请熟练使用call()方法。

6.this指代何物？js中免不了使用this“指针”。情况一：如果类clss定义了方法fun(){alert(this)}，那么clss.fun()会成为alert(clss)，this指代调用该方法的对象的实例。情况二：普通的函数ofun(){this}，或者直接在<script>alert(this.location)</script>中使用的this，指代当前window，你可以用alert(this.location)测试。情况三：事件绑定方法，div.onclick=efun， function efun(){this}，不要指望这里的this可以指代发生事件的源div，this还是指代window，要追溯到div还得使用this.event.srcElement亦即window.event.srcElement，在ie下window.event是作为全局对象使用的，ff下可不是这样(兼容ff请看7)。情况四：<div onclick=”alert(this.tagName)” />，哈哈，终于这里的this指代div本身拉，不过要是你写成这样<div onclick=”efun()” /><script>function efun(){alert(this.tagName)}</script>就不对拉，这跟情况三同。

7.event的事件源获取<div onclick=”efun(event)” /><script>function efun(e){e = e || window.event;var s = e.target || e.srcElement}</script>这样才能兼容ff，原因在于ie下的event是window下的global全局对象，无论在哪写window.event就可以调到了，ff下就则会在事件发生处象事件处理函数传递一个临时event对象，所以必须在<div onclick=”efun(event)” />里给处理函数efun(event)传一个参数event，用以兼容ff，在ie下这次事件已被记录在window.event全局对象中了，所以在efun(e)函数定义中，为了兼容ie和ff，需要e = e || window.event这句。让ie下的全局event和ff的临时event统一起来。至于事件源的获取这句很好理解：var s = e.target || e.srcElement 。

8.如何准确无误无差错无干扰获取<form action=”" /> 里的action属性，如果你说用 frm.action ，还不够准确，<form action=”"><input name=”action”></form> 注意到form下有一个input 的name 被命名为action了，frm.action 取到的会是input 而不是我们所希望的那个。解决方案：frm.attributes[83] (for ie)；frm.attributes[1] (for ff)。如没有特别说明，兼容了ff一般都兼容opera。

9.关于文本节点nodeType的判断很重要，在使用nextSibling时不要忽略了文本节点nodeType=3的存在，ff会把空格符当作文本节点。

10.关于event.x(ie)和event.layerX(ff)，两者都表示相对于最近相对层的x距离，相对层即position:relative层。个人认为这个属性是最好用的，其他的不好用。。。

原文：http://hi.baidu.com/5fad_01/blog/item/f02677093e1242ca3bc76329.html