09-JS事件
1 初识js事件
2 事件定义(上)
3 事件定义(下)
4 事件解绑
5 IE事件处理程序
6 跨浏览器事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<button id="mybtn">点击我</button>
<script type="text/javascript">
//兼容所有浏览器 addEventListener attachEvent
var EventUtil={
addHandler:function(element,type,handler){
//绑定事件
//chrome、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器等 attachEvent
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
removeHandler:function(element,type,handler){
//移除事件
//chrome、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器等 detachEvent
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
}
var btn=document.getElementById("mybtn");
var handler=function(){
alert("clicked");
}
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
</script>
</body>
</html>
7 事件委托与事件冒泡(难点,多看几遍,多练习)
8 Event对象属性与方法(难点,多看几遍,多练习)
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
#gaodu{
height: 2000px;
background: lightgreen;
}
</style>
</head>
<body>
<button id="mybtn">点击我</button>
<div id="parent">
<div id="child">点击我</div>
</div>
<a href="http://www.baidu.com" id="a">跳转链接</a>
<div id="gaodu"></div>
<script type="text/javascript">
var btn=document.getElementById("mybtn");
//event.type 事件类型
var eventFun=function(event){
if(event.type=="click"){
alert("click事件被触发");
}else if(event.type=="mouseout"){
alert("mouseout事件被触发");
}
}
mybtn.addEventListener("click",eventFun);
mybtn.addEventListener("mouseout",eventFun);
//target和currentTarget
var parent=document.getElementById("parent");
parent.addEventListener("click",function(event){
//点击儿子,事件是在父亲上面
//target 点击谁谁就是target,事件源
//currentTarget 事件绑定在谁身上,就是指向谁
console.log(event.target);
console.log(event.currentTarget);
});
var child=document.getElementById("child");
child.addEventListener("click",function(event){
//点击儿子,事件是在父亲上面
//target 点击谁谁就是target,事件源
//currentTarget 事件绑定在谁身上,就是指向谁
console.log(event.target);
console.log(event.currentTarget);
})
// event.preventDefault 阻止默认行为
var a=document.getElementById("a");
a.addEventListener("click",function(event){
event.preventDefault();
alert(11);
});
//event.stopPropagation() 阻止事件冒泡或者捕获
var parent=document.getElementById("parent");
parent.addEventListener("click",function(){
alert("parent");
});
child.addEventListener("click",function(){
alert("child");
event.stopPropagation();
})
// event.clientY、pageY、screenY
// clientY 就是指浏览器顶部底边到鼠标位置,不计算滚动轴距离
// pageY 就是指浏览器顶部底边到鼠标位置,但是它计算滚动轴的距离
// screenY 屏幕顶部到鼠标位置
var gaudu=document.getElementById("gaodu");
gaodu.addEventListener("click",function(event){
alert("clientY:"+event.clientY+";pageY:"+event.pageY+";screenY:"+event.screenY);
});
</script>
</body>
</html>
9 IE8中的Event对象属性与方法
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<button id="mybtn">点击我</button>
<a href="http://www.baidu.com" id="a">跳转链接</a>
<div id="parent">
<div id="child">点击我</div>
</div>
<button id="target">target</button>
<script type="text/javascript">
//IE8及以下浏览器的Event对象属性与方法
// attachEvent
var mybtn=document.getElementById("mybtn");
mybtn.attachEvent("onclick",function(event){
// event.type 事件类型
alert(event.type);
});
// event.returnValue=false; 阻止默认事件同preventDefault
var a=document.getElementById("a");
a.attachEvent("onclick",function(event){
event.returnValue=false;
});
// event.cancelBubble=true; 取消事件冒泡同stopPropaga
var parent=document.getElementById("parent");
parent.attachEvent("onclick",function(event){
alert("parent被触发了");
});
var child=document.getElementById("child");
child.attachEvent("onclick",function(event){
event.cancelBubble=true;
alert("child被触发了");
});
// srcElement 同target
var target=document.getElementById("target");
target.attachEvent("onclick",function(event){
console.log(event.srcElement);
})
</script>
</body>
</html>
10 Event对象跨浏览器兼容性写法
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="http://www.baidu.com" id="a">跳转链接</a>
<div id="parent">
<div id="child">点击我</div>
</div>
<script type="text/javascript">
// Event对象跨浏览器兼容写法
// Event addEventListener chrome fox IE9 event.target preventDefault stopPropagation
// Event attachEvent IE8系列的 event.srcElement returnValue cancelBubble
var EventUtil={
//兼容所有浏览器 addEventListener attachEvent
addHandler:function(element,type,handler){
//绑定事件
//chrome、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器等 attachEvent
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
removeHandler:function(element,type,handler){
//移除事件
//chrome、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器等 detachEvent
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var parent=document.getElementById("parent");
EventUtil.addHandler(parent,"click",function(event){
alert("parent被触发了");
})
var child=document.getElementById("child");
EventUtil.addHandler(child,"click",function(event){
alert("child被触发了");
var target=EventUtil.getTarget(event);
console.log(target);
EventUtil.stopPropagation(event);
});
var a=document.getElementById("a");
EventUtil.addHandler(a,"click",function(event){
EventUtil.preventDefault(event);
});
</script>
</body>
</html>
11 事件类型(一)
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<style type="text/css">
body{
height: 1000px;
}
input{
width: 300px;
height: 50px;
}
div{
padding: 20px 0;
background-color: #666;
}
#mydiv{
width: 500px;
height: 500px;
background:lightgreen;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<input id="input" type="text" name="">
<div id="div">
<button id="mybtn">点击我</button>
</div>
<div id="mydiv"></div>
<script type="text/javascript">
var EventUtil={
//兼容所有浏览器 addEventListener attachEvent
addHandler:function(element,type,handler){
//绑定事件
//chrome、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器等 attachEvent
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
removeHandler:function(element,type,handler){
//移除事件
//chrome、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器等 detachEvent
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
// UI事件
//当页面完全加载后在window上面触发
EventUtil.addHandler(window,"load",function(e){
alert("Loaded!");
});
// img标签加载完毕
var image=document.createElement("img");
EventUtil.addHandler(image,"load",function(e){
alert("图片加载完毕")
})
image.src="效果图.png";
// 图片预加载
var image= new Image();
EventUtil.addHandler(image,"load",function(event){
alert("Image loaded!");
});
image.src="效果图.png";
// js动态加载完毕
var script=document.createElement("script");
EventUtil.addHandler(script,"load",function(event){
alert("js Loaded");
});
script.src="jquery.js";
document.body.appendChild(script);
// css动态加载完毕
var link=document.createElement("link");
link.type="text/css";
link.rel="stylesheet";
EventUtil.addHandler(link,"load",function(event){
alert("css Loaded");
});
link.href="example.css";
document.getElementByTagName("head")[0].appendChild(link);
//用户从一个页面切换到另一个页面
EventUtil.addHandler(window,"unload",function(event){
alert("unloaded");
});
//窗口大小发生变化时触发
EventUtil.addHandler(window,"resize",function(event){
alert("resized");
});
//
EventUtil.addHandler(window,"scroll",function(event){
alert(111);
});
// 焦点事件
//1.blur
var input=document.getElementById("input");
EventUtil.addHandler(input,"blur",function(event){
alert("元素失去焦点的时候触发");
});
// 2.focus 不支持冒泡
EventUtil.addHandler(input,"focus",function(event){
console.log("元素获取焦点的时候触发");
});
// 3.同focus一样
EventUtil.addHandler(input,"focusin",function(event){
console.log("元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+,chrom等");
});
// 4.focusout 同blur
EventUtil.addHandler(input,"focusout",function(event){
console.log("元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+,chrom等")
});
//鼠标事件
EventUtil.addHandler(mybtn,"click",function(event){
});
//双击事件
EventUtil.addHandler(mybtn,"dblclick",function(event){
console.log(111111);
});
//鼠标按下时候触发的事件
EventUtil.addHandler(mybtn,"mousedown",function(event){
console.log("mousedown");
console.log(event.button);
// event.button==0 鼠标左键
// event.button==1 鼠标中键
// event.button==2 鼠标右键
//IE8派系
// event.button==0 没有按下按钮
// event.button==1 按下主鼠标按钮
// event.button==2 按下次鼠标按钮
// event.button==3 同时按下主、次鼠标按钮
// event.button==4 按下中间鼠标按钮
});
//鼠标松开时候触发的事件
EventUtil.addHandler(mybtn,"mouseup",function(event){
console.log("mouseup");
});
// mousedown + mouseup= click
EventUtil.addHandler(mybtn,"mousemove",function(event){
console.log("mousemove");
});
var div=document.getElementById("div");
//离开目标元素或者子元素时候执行
EventUtil.addHandler(mybtn,"mouseout",function(event){
console.log("mouseout");
});
//进入目标元素或者子元素时候执行
EventUtil.addHandler(mybtn,"mouseover",function(event){
console.log("mouseover");
});
//只能进入目标元素时候才去触发
EventUtil.addHandler(mybtn,"mouseenter",function(event){
console.log("mouseenter");
});
//只能离开目标元素时候才去触发
EventUtil.addHandler(mybtn,"mouseleave",function(event){
console.log("mouseleave");
});
var div=document.getElementById("mydiv");
EventUtil.addHandler(div,"click",function(event){
var keys=new Array();
if(event.shiftKey){
keys.push("shift");
}
if(event.ctrlKey){
keys.push("ctrl");
}
if(event.altKey){
keys.push("alt");
}
if(event.metaKey){
keys.push("meta");
}
console.log("keys:"+keys.join(","));
});
</script>
</body>
</html>
12 事件类型(二)
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<style type="text/css">
body{
height: 1000px;
}
input{
width: 300px;
height: 50px;
}
div{
padding: 20px 0;
background-color: #666;
}
#mydiv{
width: 500px;
height: 500px;
background:lightgreen;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<input type="text" id="mytext">
<ul id="mylist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script type="text/javascript">
var EventUtil={
//兼容所有浏览器 addEventListener attachEvent
addHandler:function(element,type,handler){
//绑定事件
//chrome、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器等 attachEvent
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getCharCode:function(event){
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
},
removeHandler:function(element,type,handler){
//移除事件
//chrome、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器等 detachEvent
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var mytext=document.getElementById("mytext");
//键码,按任意键触发
EventUtil.addHandler(mytext,"keydown",function(event){
console.log(event.keyCode);
});
//释放某键时候触发,支持keyCode
EventUtil.addHandler(mytext,"keyup",function(event){
console.log(event.keyCode);
});
//ASCII码,字符键触发
EventUtil.addHandler(mytext,"keypress",function(event){
console.log("event.charCode:"+event.charCode);
});
EventUtil.addHandler(mytext,"textInput",function(event){
console.log(event.data);
});
//document中任意元素被删除就会触发
EventUtil.addHandler(document,"DOMNodeRemoved",function(event){
console.log(1111111);
});
//document结构中发生任何变化都会触发
EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
console.log(1111111);
});
//从文档中移除之前被触发
EventUtil.addHandler(document,"DOMNodeRemovedFromDocument",function(event){
console.log(1111111);
});
document.body.removeChild(mytext);
var mylist=document.getElementById("mylist");
var item=document.createElement("li");
//document中任意元素被添加就会触发
EventUtil.addHandler(document,"DOMNodeInserted",function(event){
console.log(1111111);
});
//DOM结构中发生任何变化都会触发
EventUtil.addHandler(mylist,"DOMSubtreeModified",function(event){
console.log(111111);
});
//从文档中添加之前被触发
EventUtil.addHandler(item,"DOMNodeInsertedIntoDocument",function(event){
console.log(111111);
});
mylist.appendChild(item);
//在DOM树之后就会触发,不理会图像、javascript文件、css文件或其他资源是否已经下载
//DOMContentLoaded load
EventUtil.addHandler(document,"DOMContentLoaded",function(event){
console.log("DOMContentLoaded速度一定快于load事件")
})
readystatechange 支持IE、firfox、opera,提供文档或者元素加载过程,但是很难预料与load事件一起使用时候
1、document.readyState==uninitialized 尚未初始化
2、loading 对象正在加载数据
3、interactive 可以操作对象,但还没有完全加载
4、对象已经加载完毕
EventUtil.addHandler(document,"readystatechange",function(event){
//情绪化,限制IE,很难预料
})
//hashchange事件 一定给window添加,#号后面的值变化
EventUtil.addHandler(window,"hashchange",function(event){
console.log(event.oldURL+";"+event.newURL);
});
</script>
</body>
</html>
13 事件类型(三)
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<button id="mybtn">点击我</button>
<script type="text/javascript">
var EventUtil={
//兼容所有浏览器 addEventListener attachEvent
addHandler:function(element,type,handler){
//绑定事件
//chrome、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器等 attachEvent
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getCharCode:function(event){
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
},
removeHandler:function(element,type,handler){
//移除事件
//chrome、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器等 detachEvent
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
//touch
var mybtn=document.getElementById("mybtn");
//手指触摸屏幕时触发
EventUtil.addHandler(mybtn,"touchstart",function(event){
console.log("当前触摸屏幕的触摸点数组:"+event.touches);
console.log("数组中只包含引起事件的触摸点信息:"+event.changeTouches);
console.log("只包含放在元素上的触摸信息:"+event.targertTouches);
});
//手指在屏幕上滑动时触发
EventUtil.addHandler(mybtn,"touchmove",function(event){
console.log(111111);
});
//手指在屏幕上移开时触发
EventUtil.addHandler(mybtn,"touchend",function(event){
console.log(111111);
});
//touchcancel 当系统停止跟踪触摸时触发
</script>
</body>
</html>
14 小项目
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#canvas{
height: 300px;
}
li{
float: left;
width: 100px;
height: 30px;
border-radius: 10px;
background: #333;
text-align: center;
line-height: 30px;
color: #fff;
}
ul li:nth-child(1){
background: red;
}
ul li:nth-child(2){
background: black;
}
ul li:nth-child(3){
background: blue;
}
ul li:nth-child(4){
background: yellow;
}
ul li:nth-child(5){
background: green;
}
</style>
</head>
<body>
<div id="canvas"></div>
<ul id="ul">
<li>红色</li>
<li>黑色</li>
<li>蓝色</li>
<li>黄色</li>
<li>绿色</li>
</ul>
<script type="text/javascript">
var EventUtil={
//兼容所有浏览器 addEventListener attachEvent
addHandler:function(element,type,handler){
//绑定事件
//chrome、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器等 attachEvent
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getCharCode:function(event){
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
},
removeHandler:function(element,type,handler){
//移除事件
//chrome、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器等 detachEvent
if (element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var ul=document.getElementById('ul');
var canvas=document.getElementById('canvas');
EventUtil.addHandler(ul,"click",function(event){
var that=event.target;
if(that.innerHTML=="红色"){
canvas.style.background="red";
}else if(that.innerHTML=="黑色"){
canvas.style.background="black";
}else if(that.innerHTML=="蓝色"){
canvas.style.background="blue";
}else if(that.innerHTML=="黄色"){
canvas.style.background="yellow";
}else if(that.innerHTML=="绿色"){
canvas.style.background="green";
}
})
</script>
</body>
</html>