javascript基础
参考资料，google之，对他们表现感谢！
JQuery DOM加载与事件执行
http://www.nowamagic.net/librarys/posts/jquery/71
解析JavaScript的事件机制
http://www.nowamagic.net/javascript/js_EventAnalysis.php
javascript事件处理机制——容易被我们遗忘的细节问题
http://www.iteye.com/topic/299320
Javascript在页面加载时的执行顺序
http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/
重新整理javascript的domReady函数(更新至IE9)
http://www.joy-studio.com/frontend-develop/rewrite-javascript-domready-function.html
从实例来看JS的事件监听
http://imethan.com/?p=208
javascript阻止冒泡事件、事件源target、当前目标currentTarget解释
http://www.liloy.info/archives/131.html
document.ready和onload的区别——JavaScript文档加载完成事件
http://www.ljf.cn/2010/1/Item191451.html
1. window.onload
function firstFunction(){
alert("firstFunction");
}
function secondFunction(){
alert("secondFunction");
}
window.onload = function(){
firstFunction();
secondFunction();
}
2.对window.onload封装
/*
* http://simonwillison.net/2004/May/26/addLoadEvent/ Executing JavaScript on page load
* 它完成的操作主要有下面几步：
* 首先把现有的window.onload事件处理的函数值存入变量oldLoad。
* 如果这个处理函数没有绑定任何函数，就像平时那样把新函数添加给它。
* 如果这个处理函数已经绑定函数了，就把新的函数追加到现有指令的末尾。
*/
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function(){
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
3. 个人总结，以备查
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ui-content{height:60px; margin-top:20px; border:1px solid red;width:200px;}
</style>
</head>
<body>
<div class="ui-content" >
<input type="button" name="" value="placeholder" id="J_fmInput" />
</div>
<div class="ui-content">
ok
</div>
<script type="text/javascript">
//事件监听
function addEvent(el, type, fn){
if (el.addEventListener) {
el.addEventListener(type, fn, false); //冒泡
}
else {
el['e' + fn] = function(){
fn.call(el, window.event);
}
el.attachEvent('on' + type, el['e' + fn]);
//alert(el.getAttribute('e' + fn)); el['e'+fn]是ie自定义属性
}
}
//handler
function handler(event){
var e = (event) ? event : window.event;
var itarget = (e.target) ? e.target : e.srcElement;
alert("target nodeName: " + itarget.nodeName);
alert("this nodeName: " + this.nodeName);
stopEvent(event);
if (!event.currentTarget) {
return false;
}
alert("currentTarget nodeName: " + e.currentTarget.nodeName);
}
//stopEvent
function stopEvent(event){
var e = (event) ? event : window.event;
if (e.stopPropagation) {
e.stopPropagation();
//e.preventDefault();
}
else {
e.cancelBubble = true;
//e.returnValue = false;
}
}
//封闭window.onload
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function(){
if (oldonload) {
oldonload();
}
func();
}
}
}
function fmInput(){
var fmInput = document.getElementById("J_fmInput");
addEvent(fmInput, 'click', handler)
}
function fmDoc(){
addEvent(document, 'click', handler);
}
function fmBody(){
addEvent(document.body,'click',handler);
}
addLoadEvent(fmInput);
addLoadEvent(fmDoc);
addLoadEvent(fmBody);
</script>
</body>
</html>
