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>




你可能感兴趣的:(JavaScript)