<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#outdiv{width:100px; height:100px; background:yellow;}
#midid{width:70px; height:70px; background:blue;}
#innerdiv{width:40px; height:40px; background:black;}
</style>
</head>
<body style=" height:1000px;">
<input type="button" value="确定" id="btn"/>
<div id="outdiv">
<div id="midid">
<div id="innerdiv"></div>
</div>
</div>
<img src="444444.png" />
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function () { //兼容
alert("onclick")
};
//btn.addEventListener("click", function () {
//alert("addEventListener");
// }, false);
//true表示在捕获阶段调用事件处理程序,false 表示在冒泡阶段采用事件处理程序
//var outdiv = document.getElementById("outdiv");
//outdiv.addEventListener("click", function () {
// alert("out 冒泡");
// }, false); //冒泡
//outdiv.addEventListener("click", function () {
//alert("out 捕获");
// }, true); //捕获
var midid = document.getElementById("midid");
// midid.addEventListener("click", function () {
// alert("midid");
// },false);
// var innerdiv = document.getElementById("innerdiv");
// innerdiv.addEventListener("click", function () {
// alert("innerdiv");
// }, false); //默认是冒泡
//兼容
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
var handler = function () {
alert("handler");
};
EventUtil.addHandler(btn,"click",handler);
//load 事件
window.onload = function(){
alert("loaded");
}
//另外一种load方法是在body 里面加上<body onload="alert('loaded')">
//图片加载，加载完成之后
var imgs = document.getElementsByTagName("img");
//console.log(imgs.nodeType);
imgs[0].onload = function(){
alert("img load");
};
//预加载图片
window.onload = function(){
var image = new Image();
image.onload = function(){
alert("img load");
};
image.src = "444444.png";
};
EventUtil.addHandler(window,"load",function(){
var script = document.createElement("script");
EventUtil.addHandler(script,"load",function(){
alert("done");
});
//script.src = "xx.js";
//document.getElementsByTagName("head")[0].appendChild(script);
});
//resize 调整窗口事件
window.onresize = function(){
//alert("onresize");
};
EventUtil.addHandler(window,"resize",function(){
alert("rezise");
});
//scroll
function getSize(){
var db = document.body;
var dd = document.documentElement;
var width = db.clientWidth==0?dd.clientClient:db.clientWidth;
var height = db.clientHeight?dd.clientHeight:db.clientHeight;
var getSizes = {
"width":width,
"height":height
}
return getSizes;
}
EventUtil.addHandler(window,"scroll",function(){
console.log(document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop);
var sTop = document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;
if(getSize().height+sTop>=1000){
alert("ddddddddd");
}
});
//mousedown mouseup click mousedown mouseup click dbclick
//clientX clientY screenX screenY pageX pageY
//没有滚动条的情况下，pageY和clientY相等，存在滚动条，则pageY = clientY+scrollTop
EventUtil.addHandler(document.body,"click",function(e){
var screenX = e.screenX;
var clientX = e.clientY;
var pageX = e.pageY;
console.log(screenX+","+clientX+","+pageX);
});
</script>
</html>
浙公网安备 33010602011771号