我花了几天时间来写这个低效率绘图库(求优化)，现在已经提交到GitHub上了，目前在鼠标定位方面还稍微有点偏差，希望有空的码农稍微帮一下忙(发布前检查的时候还是好的呢இ௰இ,so sad)。
这是初代版，即可以用但是功能还不是很完善。
继续阅读CanvasObjLibrary-canvas基础绘图库
标签归档：javascript
更方便的DOM选择器 querySelector
用过jQuery或者一些其它js库的少年们都应该知道他们都有自己的选择器，使用起来各种方便各种狂拽酷霸吊，简化了原本元素获取的许多麻烦。
用jQuery来举个例子，比如你要获取id为f_ck的元素(第一个)
var e=$("#f_ck")
这样就得到了元素的jquery对象（注意这样获取到的不是元素本身，而是一个满足条件的元素的数组，配上一些方便的元素操作方法）
用传统的getelement的话会是这个样子
var e=document.getElementById("f_ck");
这么写明显长一点，而且只能获取有特定id的元素。
继续阅读更方便的DOM选择器 querySelector
[javascript]知道你的浏览器显示区大小
实在没啥好写的来凑个数。。。
前端码农在做界面的时候有的时候需要知道窗口大小，特别是做响应式布局页面的时候需要看看大约多大合适，然后又使用的chrome或者其它没有这种特殊功能的浏览器，懒得另外装什么插件，于是你可以像我一样这么做。
首先按Ctrl+Shift+J或者其他你知道的方法调出控制台（不是系统控制台，是浏览器控制台），然后输入如下代码
window.onresize=function (){
console.log("宽:"+window.innerWidth+",高:"+window.innerHeight);
}
然后改变你的浏览器尺寸，显示区的长宽就会出现在控制台里了。一般做页面只要知道宽，除非你的页面和win8风格一样是横过来的。。。
[javascript]toFixed保留小数位数
这是一个笔记，如果有什么建议或学习意见或错误可以留言提出来。
[爪机博]
[想直接看正文请往最底下看]
之前突发奇想要做个什么东西，需要截断小数点后指定位数的小数，当时还不知道有toFixed这个方法，于是乎我自己想了很多伤资源的方法，比如乘以10的几次方以后舍小数再除回去之类的。这是一段悲剧的思考过程，考虑了一堆事情，为了纪念浪费掉的这段时间[对我来说待在学校里比这还浪费时间],我决定特意为这个方法写一篇博文来mark一下。
似乎是正文：
toFixed是一个Number对象的方法，主要用来保留小数，然后它的用法是
var a=213.1234567898754; a.toFixed(指定位数);
Ps:
小数最后一位采用四舍五入。
位数为0〜20的整数，参数错误会抛出异常。
如果参数大于le+21（这是啥？）的话，会返回指数形式的数[结果是string类型]。
如果小数本身位数不足指定位数，会用0补足。
默认参数是0，也就是不输入参数的话它的行为是保留整数。
正文似乎结束了。
server-sent 服务器主动发送事件
以前的HTML版本中，要获取实时数据，必须要不断向服务器发出请求来查询有没有新内容，这样不管从建立连接还是等待时间来说都是要多苦逼就有多苦逼啊(微观来说)，[最近死在学校里实在没事做就去逛了逛w3，中文的w3school更新比英文版慢了不知多少啊]然后我发现了w3的html专版里多出了一个HTML5 服务器发送事件这东西。
看了一下他的介绍大概知道她是干什么用的了，简单地说就是用javascript建立一个长连接到一个网页脚本，然后脚本就可以按需向浏览器页面主动发送数据。
下面来解释一下工作方式
//这是我整合了w3里的示例代码，添加详细注释来助解
if (typeof(EventSource) !== "undefined") {//检查是否支持服务器推送
var a = new EventSource("脚本.php");//建立和"脚本.php"的连接
a.onmessage=function(event) {//接收到消息的事件
/*这里的event.data存储了从服务器传回来的数据*/
/*比如alert(event.data)来提示返回的数据*/
};
a.onopen=function(event){//打开连接时的事件
/*用event.readyState可以获取此时的状态号*/
/*建立好连接的时候干些什么*/
};
a.onerror=function(event){//发生错误时的事件
/*用event.readyState可以获取此时的状态号*/
/*发生错误的时候干些什么*/
};
} else {//不支持推送的话
alert("您老的浏览器不支持服务器推送");
a.close();//用close()方法可以关闭连接
a=null;//把a对象清空，让它的空间自动被回收
}
HTML5 web存储
HTML5里提供了一种便捷的数据存储方法，和原本的饼干君相比，他的优点是可以存储较大的数据。
打开浏览器的开发人员工具可能会发现下面这个东西[红框里的东西]
这就是本文讲的HTML5浏览器存储：localStorage和sessionStorage。
继续阅读HTML5 web存储
[javascript]设置函数默认参数
在javascript里是不可以用
function a(q=0){..}
这种方式定义参数的默认值的，但是默认值又是一个很有用的东东，它可以设置一些普遍使用的参数来减小使用时候的麻烦。
那么总会有办法解决这种奇葩的问题的。
接下来就是见证奇迹的时刻！
function a(b){
var c=arguments[1]?arguments[1]:"c的默认值";
alert(b);
alert(c);
}
这个时候使用它
a(213,3);//先后跳出提示框:213和3 a(213);//先后跳出提示框:213和"c的默认值"
肿么会这样纸呢？细心的小朋友们应该可以发现这么一个[arguments[1]?arguments[1]:”c的默认值”],而且第一次调用a()的时候输入了两个参数。
原因就是：
首先，js不会因为输入的参数个数和定义时的个数不一样而报错
然后，函数中有一个叫做arguments的数组来保存输入函数的参数
这样就可以知道了，在arguments[1]?arguments[1]:”c的默认值”里，arguments[1]就是输入函数的第二个参数(数组的编号从0开始)(首先在这里假如你知道?:操作符的用法，不知道请先去百度回炉。。)
var c= //c等于 arguments[1]? //第二个参数存在吗？存在的话c等于第二个参数的值 arguments[1]: //第二个参数不存在？ "c的默认值"; //不存在就设置为"c的默认值"
===========2021/11/27 更新============
现在的js已经可以用文章开头的方法定义默认参数了，只要调用函数时没有填该参数或者参数的值为undefined，都会使用定义的默认参数传入。
iframe元素操作
本文所有内容均未测试，只是看着参考写出来的笔记，不保证内容的准确性，如果发现了错误请指出谢谢。
在很久很久以前(其实是忘了时间。。。)我发现iframe内部的内容是可以在iframe外面操作的。
在这之前我曾经把Glory的blog做了iframe放在我的佳佳实验室里，然后他一脸黑线，现在我终于知道是为什么了~
接下来进入正文
访问iframe元素的关键就在于要知道连接到iframe的方法，看下面
[PS：不同方法在不同浏览器里可能不可用]
图片转data:URI工具
昨晚由于需要用data:uri，于是做了这么个转换工具
可本地使用，因为文件不用上传
疯狂的点击这里看demo
截图[此截图使用datauri,看不见请升级人品]
上面这张图的datauri
data:image/png;base64,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7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQRL/G/+c//wNAn/5fp2D0CgAAAABJRU5ErkJggg==
datauri优点：
在页面添加图片不用额外上传文件了！
还有什么就不知到了
缺点：
无法缓存，每次加载页面都要载入（其实想缓存它只要用js文件复制给变量就行了，而且可以一个文件存N张图，和图片分割异曲同工啊）
浏览器支持不全面
转出来的字符串体积一般比原文件大= =。。。
demo源码[部分参考其他网站]
把图片拖到这里
[其实我发现除了图片以外还可以拖其它任何文件进来，只不过下面的预览图会裂掉另外最好不要把超过1MB的文件拉进来，不然你懂的]
PS:如果同时拖入多个文件，只操作第一个，拖入文件夹无效
视频手动载入js
俺花了好长时间，用我这不熟练的技术好不容易做了个带满缺点的js
那么这货的用处就是屏蔽掉flash这样的东西【当然如果修改一下js可以屏蔽掉body里的任何标签
先来个示例【有视频有真相
embed标签的例子（无视频源）video标签的例子(同上)
其实屏蔽了以后看起来都是一样的。。
这货的功能：点击以后再载入，防止意外流量损失或带宽？占用
这就是个鲜明的例子181
里面装满了视频，这样就可以解决打开这个网页一下载入很多视频的问题了
原理：让div插队再干掉背后的原标签并给这个div添加可以给自己内部写入被杀掉标签的事件↓
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);//插队到原标签前面
objarray[i].parentNode.removeChild(objarray[i]);//干掉原标签
特点：插队的div使用源元素的宽高和定位【本来想把z-index也算进去的，时间不够就不做了↓
//一堆if用来判断是否有这些属性
if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);}
if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);}
if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);}
if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);}
if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);}
全代码↓
var changevideos=function(){
var target=new Object;
function findtag(tag) {
return document.getElementsByTagName(tag);
}
function getwidth(obj){
if(obj.width){return obj.width;}else if(obj.style.width){return obj.style.width;}else{return false;}
}
function getheight(obj){
if(obj.height){return obj.height;}else if(obj.style.height){return obj.style.height;}else{return false;}
}
function getposition(obj){
return obj.style.position?obj.style.position:false;
}
function getright(obj){
return obj.style.right?obj.style.right: false;
}
function getleft(obj){
return obj.style.left?obj.style.left:false;
}
function changeinner(html){
target=event.srcElement?event.srcElement:event.target;
target.innerHTML=html;
}
function run(objarray){
for (var i = 0; i < objarray.length; i++) { var aimhtml = objarray[i].outerHTML; var tmpdiv=document.createElement("div"); if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);} if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);} if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);} if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);} if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);} tmpdiv.innerHTML='<div class="hideitemzhanwei" style="width:'+getwidth(objarray[i])+'px;height:'+getheight(objarray[i])+'px;"><center><h2 style=\'color:#fff;\'>为了防止流量计费用户的流量损失<br>此处已被自动屏蔽</h2><span style="position:absolute;bottom:2px;right:2px;">点击恢复</span></center></div>';//填上填充显示的内容
//tmpdiv.style.overflow="hidden";
tmpdiv.setAttribute('onClick','changevideos.changeinner(\''+aimhtml+'\')');
tmpdiv.style.display="inline-block";
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);
objarray[i].parentNode.removeChild(objarray[i]);
}
}
function changehideneededtag() {
var tmpstyle=document.createElement("style");
tmpstyle.innerHTML=".hideitemzhanwei{position:relative;background-color:#66ccff;color:#fff;cursor:pointer;}";
document.getElementsByTagName("head")[0].appendChild(tmpstyle);
var a;
if(a=findtag("embed")){
run(a);}
if(a=findtag("object")){
run(a);}
if(a=findtag("video")){
run(a);}
}
changehideneededtag();
}
changevideos.changeinner=function(html){
target=event.srcElement?event.srcElement:event.target;
target.innerHTML=html;
}
没时间了所以还有些可能出错的地方没做错误处理，以后来补上
[javascript]document.createElement()
正在制作找喷的底栏中，为了装到B的效果，所以要做成一个完整的可以对底栏进行操作的对象，自然就要创建标签了。
假如用innerHTML的话，会出现各种苦逼，why就自己思考吧。。
所以使劲百度，找到了document.createElement()这个东西
它的作用：创建标签
可创建标签：所有（IE请另当别论）
用法
document.createElement("div")
document.createElement("a")
document.createElement("table")
document.createElement("header")
.......
创建以后会返回一个对象，所以创建的时候要用个变量（对象）来把返回值接住，像这样
var f_u_*_k=document.createElement("div")
然后创建好的标签不会自己显示出来【浏览器表示迷路了<(￣▽￣)> 哇哈哈…】，所以我们要给它指一下路
这里要用到appendChild()和insertBefore() 两个。。函数？
//先找个要操作的对象，比如一个div标签的对象【youjiecao】 youjiecao.appendChild(f_u_*_k) //功能：把创建的标签插入youjiecao的内部底端 youjiecao.insertBefore(f_u_*_k) //功能：【不知道，欢迎大家来填补】
这样就可以创建很多可以控制的标签而不用每个标签都设置id啦！
(>^ω^<)
[javascript]offsetWidth和offsetHeight
之前一直在为没法知道一个不确定宽高元素的实际宽高而困扰，结果发现用style.width和style.height获取的都是在元素里定义的值
偶然发现了以前经常见到但是又怕麻烦所以没去接触的offsetWidth和offsetHeight,这两个可以获取一个元素在页面中占用的实际尺寸，不管有没有定义。
比如
<div id="1">12eddcvg42few</div>
<script>
alert(document.getElementById("1").offsetWidth);
</script>
弹出警告窗显示627（也就是现在div由于里面的文字而撑开来以后所占的宽度）
给wordpress加上了个代码显示函数
原理：文档加载完成以后运行相关函数修改所有code标签
首先要做一件事，把加载文章的php的一个函数修改一下，阻止其给code标签内自动把\n换行替换成<br>标签（这个问题苦了我好久吖╮(╯3╰)╭），函数名wpautop,此函数位于/wp-includes/formatting.php中,找到这个函数里的
`$pee = preg_replace_callback(‘/<(script|style).*?<\/\\1>/s’, ‘_autop_newline_preservation_helper’, $pee);`
这一行，括号里加上|code,变成这样：
`$pee = preg_replace_callback(‘/<(script|style|code).*?<\/\\1>/s’, ‘_autop_newline_preservation_helper’, $pee);`
【这要怎么理解呢。。应该就算是不进行修改的标签列表吧】
然后一切就都方便了，给onLoad加上自己的code处理函数。
以下是我的code处理函数：
function tolist(string, width) {
if (width == "") {
width = "auto";
}
var codelist = '<div style=\'background-color:#fff;overflow:hidden;width:' + width + ';max-width:' + width + ';word-wrap:break-word;word-break:break-all;word-wrap:break-all;display:block;margin:0px;font-family: "微软雅黑";\' ><div style="color:#CCCCCC;font-size:13px;background-color:#fff;width:100%;height:20px;font-weight:900;">Code:</div><ol style="margin:0px;background-color:#E7E7E7;border:1px solid #CCCCCC;padding-left:50px;color:#00CC33;">';
//string=string.replace(/&/g,"&");
string = string.replace(/</g, "<");
string = string.replace(/>/g, ">");
string = string.replace(/ /g, "$nbsp;");
string = string.replace(/\'/g, "'");
string = string.replace(/\"/g, """);
string = string.replace(/<br\/>/g, '<span style="color:#999999;"><br/></span>');
var code = string.split("\n");
for (var i = 0;; i++) {
if (code[i] == "" || code[i] == " ") {
code[i] = null;
}
else {
break;
}
}
for (var i = code.length; i > 0; i--) {
if (code[i] == "" || code[i] == " ") {
code[i] = null;
}
else {
break;
}
}
for (var i = 0; i < code.length; i++) {
if (code[i] == null) {}
else {
codelist = codelist + '<li style="font-size:13px;"><div style="border-left:1px solid #999;display:block;margin-right:0px;background-color:#fff;width:auto;min-width:60px;position:relative;color:#000;">' + code[i] + ' </div></li>';
}
}
codelist = codelist + '</ol></div>';
return codelist;
}
function findcodetag() {
return document.getElementsByTagName("code");
}
function changecodetag() {
var a = findcodetag();
for (var i = 0; i < a.length; i++) {
var code = a[i].innerHTML;
a[i].innerHTML = tolist(code);
}
}
然后onLoad加上changecodetag()
暂时没做出高亮，而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏？
后期可能有改动，文章就不改了，详见源代码。
做了个元素拖动实验
iframe框引用demo：
原始demo地址:demo.luojia.me/moveelement/
代码:
<style>
body{ margin:0px; }
</style>
<script src="jquery.js">
</script>
<div id="1" style="position:fixed; border:1px solid #000;height:200px;width:400px; text-align:center; line-height:200px;background-color:#69F;cursor:move">
点着拖我
</div>
<script>
clickpointx = 0;
clickpointy = 0;
divx = (window.innerWidth - 400) / 2;
divy = (window.innerHeight - 200) / 2;
$("#1").css("left", divx);
$("#1").css("top", divy);
$("#1").mousedown(function(event) {
$(document).unbind("mouseup");
$(document).unbind("mousemove");
$("#1").unbind("animate");
event.preventDefault();
var clickpointx = event.pageX;
var clickpointy = event.pageY;
$(document).mouseup(function(event) {
$(document).unbind("mouseup");
$(document).unbind("mousemove");
$("#1").animate({
top: divy
},
500);
$("#1").animate({
left: divx
},
500);
});
$(document).mousemove(function(event) {
event.preventDefault();
var pointx = event.pageX - clickpointx;
var pointy = event.pageY - clickpointy;
$("#1").css("left", pointx + divx);
$("#1").css("top", pointy + divy);
});
});
</script>
[javascript]键盘按键事件
<script>
function whichButton(e)
{
document.getElementById("1").innerHTML=e.keyCode;
}
</script>
<body onkeydown="whichButton(event)"><div id="1"></div></body>
这似乎是把调用对象扔给函数的方法。。
<script>
function qw(e){
alert(e.id);
}
</script>
<div id="adadfcfca" onClick="qw(this)">123e</div>
结果：弹出提示框显示adadfcfca
还有其它什么方法吗，求教
2012年11月21日更新：
函数里定义一个对象，
target=new Object; target=event.srcElement ? event.srcElement : event.target;