JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型
时间：2020-02-08来源：系统城作者：电脑系统城
事件的移除
removeEventListener()
第二个参数需要指定要移除的事件句柄，不能是匿名函数，因为无法识别
想要移除成功，那么三个参数必须跟addEventListener中的三个完全一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
input{
display: block;
margin-bottom:10px;
}
.active{
color:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var btn1 = document.querySelector("#btn1");
function click1(){
alert("hello1~");
}
btn1.addEventListener("click", click1, false);
//移除绑定的事件
btn1.removeEventListener("click", click1, false);
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
</body>
</html>
IE事件流
attachEvent(event, function) event都是on开头的
浏览器兼容性主要就是指IE浏览器的兼容，尤其是低版本IE（IE6-8）
IE不支持事件捕获，默认都是冒泡，所以没有第三个参数
detachEvent() 移除事件
DOM0级 兼容所有浏览器
DOM2级
addEventListener 主要兼容谷歌、火狐、IE9+
attachEvent 主要兼容IE6-8
attachEvent 可以绑定多个事件类型，而且后绑定的先执行
还有一个很逆天的知识点补充，匿名函数中的this指向window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
input{
display: block;
margin-bottom:10px;
}
.active{
color:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var btn1 = document.querySelector("#btn1");
function click1(){
alert("hello1~");
}
function click2(){
alert("hello2~");
}
btn1.attachEvent("onclick", click1);
btn1.attachEvent("onclick", click2); //先弹出hello2，再弹出hello1
//移除绑定的事件
btn1.detachEvent("onclick", click1); //解除绑定hello1，只弹出hello2
//this指向window
btn1.attachEvent("onclick", function(){
alert(this===window);//true
});
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
</body>
</html>
跨浏览器事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
input{
display: block;
margin-bottom:10px;
}
.active{
color:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
}
}
var btn1=document.getElementById("btn1");
var click=function(){
alert("我被点击啦！");
}
EventUtil.addHandler(btn1, "click", click);
EventUtil.removeHandler(btn1, "click", click);
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
</body>
</html>
事件冒泡与事件捕获
直系亲属树
事件冒泡：当某个元素的点击事件被触发之后，由于冒泡，它的直系亲属树上的元素，只要被添加了事件的，都会被触发（从下往上）
事件捕获：当某个元素的点击事件被触发之后，由于捕获，它的直系亲属树上的元素，只要被添加了事件的，都会被触发（从上往下）
大部分情况下，都是使用事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
input{
display: block;
margin-bottom:10px;
}
.active{
color:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var parent=document.getElementById("parent");
var child=document.getElementById("child");
//事件冒泡，先出现child，再出现parent
parent.addEventListener("click", function(){
alert("parent");
});
child.addEventListener("click", function(){
alert("child");
});
//事件捕获，先出现parent，再出现child
// parent.addEventListener("click", function(){
// alert("parent");
// }, true);
// child.addEventListener("click", function(){
// alert("child");
// }, true);
});
</script>
</head>
<body>
<div id="parent">
<div id="child">点击child</div>
</div>
</body>
</html>
利用事件冒泡机制实现事件委托
事件绑定会损耗性能，事件委托是一个很棒棒的选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
input{
display: block;
margin-bottom:10px;
}
.active{
color:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
// 父 ul 绑定事件
// 子 li 没有事件
// 当子元素（li）被点击时，在子元素直系亲属树上的所有元素，凡是绑定了事件的（ul）都会被触发
ul.addEventListener("click", function(event){
// event,target可以获取到点击的那个元素
console.log(event.target.innerHTML);
if(event.target.id==="li1"){
alert("是1哦");
}else if(event.target.id==="li2"){
alert("是2哦");
}else if(event.target.id==="li3"){
alert("是3哦");
}else if(event.target.id==="li4"){
alert("是4哦");
}
});
});
</script>
</head>
<body>
<ul id="ul">
<li id="li1">li1</li>
<li id="li2">li2</li>
<li id="li3">li3</li>
<li id="li4">li4</li>
</ul>
</body>
</html>
w3c 制定的 javascript 标准事件模型，先事件捕获从windows > document 往下级直到 特定的事件节点，然后进行事件处理，再事件冒泡，从特定节点往上级，这个完整的过程。
事件捕获->事件处理->事件冒泡
event对象常用的属性和方法
事件句柄的参数event对象
event.type 事件类型
event.target 被点击的元素
event.currentTarget 被绑定事件的元素
event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止事件捕获或者冒泡，需要添加到子元素上
clientY 浏览器顶部底边到鼠标的位置
pageY 浏览器顶部底边到鼠标的位置+页面滚动的距离
screenY 屏幕顶部到鼠标的位置（如果浏览器缩小，screenY依然是根据电脑屏幕来计算，与浏览器无关）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
#scroll{
height:1000px;
background:#abcdef;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
ul.addEventListener("click", function(event){
console.log(event.type);//click
console.log(event.target);//<li id="li3">li3</li>
console.log(event.currentTarget);
/*
<ul id="ul">
<li id="li1">li1</li>
<li id="li2">li2</li>
<li id="li3">li3</li>
<li id="li4">li4</li>
</ul>
*/
alert(event.target.innerHTML);
});
var a=document.getElementById("a");
a.addEventListener("click", function(event){
event.preventDefault();//阻止了a链接的跳转
alert("hello");
})
//阻止子元素执行时冒泡到父元素
var parent=document.getElementById("parent");
var child=document.getElementById("child");
parent.addEventListener("click", function(event){
alert("parent");
event.stopPropagation();
});
child.addEventListener("click", function(event){
alert("child");
event.stopPropagation();
});
var scroll=document.getElementById("scroll");
scroll.addEventListener("click", function(event){
console.log(event.pageY);//813
console.log(event.clientY);//480
console.log(event.screenY);//535
})
});
</script>
</head>
<body>
<ul id="ul">
<li id="li1">li1</li>
<li id="li2">li2</li>
<li id="li3">li3</li>
<li id="li4">li4</li>
</ul>
<a id="a" href="http://www.baidu.com">点击链接</a>
<div id="parent">
<div id="child">这是儿子</div>
</div>
<div id="scroll">这是滚动区域</div>
</body>
</html>
IE中的event对象（attachEvent）
event.type 事件类型
event.returnValue=false; 阻止默认行为
event.cancelBubble=true; 阻止冒泡，需要添加到子元素上
event.srcElement 被点击的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
#scroll{
height:1000px;
background:#abcdef;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
ul.attachEvent("onclick", function(event){
alert(event.type);//click
alert(event.srcElement.innerHTML);//点击li1，弹出li1
});
var a=document.getElementById("a");
a.attachEvent("onclick", function(event){
//阻止默认行为
event.returnValue=false;
alert("hello");
});
//阻止子元素执行时冒泡到父元素，需要添加到子元素上
var parent=document.getElementById("parent");
var child=document.getElementById("child");
parent.attachEvent("onclick", function(event){
alert("parent");
});
child.attachEvent("onclick", function(event){
alert("child");
event.cancelBubble=true;
});
});
</script>
</head>
<body>
<ul id="ul">
<li id="li1">li1</li>
<li id="li2">li2</li>
<li id="li3">li3</li>
<li id="li4">li4</li>
</ul>
<a id="a" href="http://www.baidu.com">点击链接</a>
<div id="parent">
<div id="child">这是儿子</div>
</div>
</body>
</html>
Event跨浏览器的兼容性写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
#scroll{
height:1000px;
background:#abcdef;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var a=document.getElementById("a");
EventUtil.addHandler(a, "click", function(event){
alert("hello");
EventUtil.mypreventDefault(event);//阻止默认行为
});
var parent=document.getElementById("parent");
EventUtil.addHandler(parent, "click", function(event){
alert("parent");
});
var child=document.getElementById("child");
EventUtil.addHandler(child, "click", function(event){
var target=EventUtil.mycurrentTarget(event);
alert(target.id);//<div id="child">这是儿子</div>
EventUtil.mystopPropagation(event);//阻止冒泡到父元素
})
});
</script>
</head>
<body>
<ul id="ul">
<li id="li1">li1</li>
<li id="li2">li2</li>
<li id="li3">li3</li>
<li id="li4">li4</li>
</ul>
<a id="a" href="http://www.baidu.com">点击链接</a>
<div id="parent">
<div id="child">这是儿子</div>
</div>
</body>
</html>
UI事件 load
window的load事件
img的load事件
script的load事件
css的load事件
window的unload事件 用户从一个页面切换到另一个页面
window的resize事件 窗口大小调整
window的scroll事件 窗口滚动
由于resize和scroll是重复执行的，因此特别损耗性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:2000px;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
// window的load事件
EventUtil.addHandler(window, "load", function(){
//alert("window的load事件！");
});
//img图片加载完毕
var img=document.createElement("img");
EventUtil.addHandler(img, "load", function(){
//alert("img图片加载完毕！");
});
img.src="source/cat.jpg";
//img图片预加载（存入内存中）
var img=new Image();
EventUtil.addHandler(img, "load", function(){
//alert("img图片预加载完毕！");
});
img.src="source/cat.jpg";
//动态加载js
var script=document.createElement("script");
EventUtil.addHandler(script, "load", function(){
//alert("js加载完毕！");
});
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(){
//alert("css加载完毕！");
});
link.href="style.css";
//document.getElementsByTagName[0].appendChild(link);
//window unload
EventUtil.addHandler(window, "unload", function(){
//alert("unload！");
});
//window resize
EventUtil.addHandler(window, "resize", function(){
//alert("resize");
});
//window scroll
EventUtil.addHandler(window, "scroll", function(){
//alert("scroll");
});
});
</script>
</head>
<body>
</body>
</html>
焦点事件
onfocus 得到焦点
onblur 失去焦点
鼠标事件
onclick 鼠标单击
ondblclick 鼠标双击
onmousedown 鼠标按下
onmousemove 鼠标在目标区域移动（重复执行影响性能）
onmouseup 鼠标松开
mousedown+mouseup=click
onmouseover 鼠标移入（进入元素或者元素的子元素）
onmouseout 鼠标移出 （移出元素或者元素的子元素）
onmouseenter 鼠标移入（进入元素本身）
onmouseleave 鼠标移出（移出元素本身）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
}
#div{
width:200px;
height:200px;
margin:50px auto;
background:#abcdef;
position: relative;
}
#child{
width:80px;
height:80px;
background:pink;
font-size:14px;
position: absolute;
left:50%;
top:50%;
margin-left:-40px;
margin-top:-40px;
line-height:80px;
text-align: center;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
//获得焦点
var inout=document.getElementById("text");
EventUtil.addHandler(inout, "focus", function(){
//console.log("获得焦点");
});
//失去焦点
var inout=document.getElementById("text");
EventUtil.addHandler(inout, "blur", function(){
//console.log("失去焦点");
});
//鼠标单击
var div=document.getElementById("div");
EventUtil.addHandler(div, "click", function(){
//console.log("鼠标单击");
});
//鼠标双击
var div=document.getElementById("div");
EventUtil.addHandler(div, "dblclick", function(){
//console.log("鼠标双击");
});
//鼠标按下
var div=document.getElementById("div");
EventUtil.addHandler(div, "mousedown", function(){
//console.log("鼠标按下");
});
//鼠标松开
var div=document.getElementById("div");
EventUtil.addHandler(div, "mouseup", function(){
//console.log("鼠标松开");
});
//鼠标移动
var div=document.getElementById("div");
EventUtil.addHandler(div, "mousemove", function(){
//console.log("鼠标移动");
});
//鼠标进入
var div=document.getElementById("div");
EventUtil.addHandler(div, "mouseover", function(){
console.log("mouseover鼠标进入");
});
//鼠标离开
var div=document.getElementById("div");
EventUtil.addHandler(div, "mouseout", function(){
console.log("mouseout鼠标离开");
});
//鼠标进入
var div=document.getElementById("div");
EventUtil.addHandler(div, "mouseenter", function(){
console.log("mouseenter鼠标进入");
});
//鼠标离开
var div=document.getElementById("div");
EventUtil.addHandler(div, "mouseleave", function(){
console.log("mouseleave鼠标离开");
});
});
</script>
</head>
<body>
<input type="text" id="text" value="text">
<div id="div">
<div id="child">这是子元素</div>
</div>
</body>
</html>
event.shiftKey shift+点击
event.ctrlKey ctrl+点击
event.altKey alt+点击
event.metaKey meta+点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
}
#box{
width:200px;
height:200px;
margin:50px auto;
background:#abcdef;
position: relative;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var box=document.getElementById("box");
EventUtil.addHandler(box, "click", function(e){
var keys=[];
if(e.shiftKey){
keys.push("shift");
}
if(e.ctrlKey){
keys.push("ctrl");
}
if(e.altKey){
keys.push("alt");
}
if(e.metaKey){
keys.push("meta");
}
console.log(keys.join(","));//数组转字符串
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
针对mousedown，存在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 按下中间键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
}
#box{
width:200px;
height:200px;
margin:50px auto;
background:#abcdef;
position: relative;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
var box=document.getElementById("box");
EventUtil.addHandler(box, "mousedown", function(e){
console.log(e.button);
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
键盘事件
keydown 按下任意键 keyup 松开键盘 event.keyCode 键码（通过keydown获取）
keypress 按下键盘上的字符键 charCode ascii码（通过keypress获取）
textInput 文本输入 data 输入的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
}
#box{
width:200px;
height:200px;
margin:50px auto;
background:#abcdef;
position: relative;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
var input=document.getElementById("input");
EventUtil.addHandler(input, "keydown", function(e){
//console.log(e.keyCode+"keydown");
});
EventUtil.addHandler(input, "keyup", function(e){
//console.log(e.keyCode+"keyup");
});
EventUtil.addHandler(input, "keypress", function(e){
//console.log(e.charCode+"keypress");
});
EventUtil.addHandler(input, "textInput", function(e){
console.log(e.data+"textInput");
});
});
</script>
</head>
<body>
<input type="text" id="input">
</body>
</html>
DOM 相关事件
DOMNodeRemoved DOM中某元素被删除
DOMNodeRemovedFromDocument 从文档中被删除前触发（事件句柄必须加在被操作的元素上，浏览器支持性不好，不推荐）
DOMNodeInserted DOM中某元素被添加
DOMNodeInsertedIntoDocument 从文档中被添加之前触发（事件句柄必须加在被操作的元素上，浏览器支持性不好，不推荐）
DOMSubtreeModified DOM结构发生改变
DOMContentLoaded DOM树加载完即可
loaded DOM树加载完，并且图像+js+css等其他资源也加载完
因此DOMContentLoaded速度快于loaded
hashchange #后面的值发生变化，只能给window对象绑定
event.oldURL 原来的url
event.newURL 新的url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
}
#box{
width:200px;
height:200px;
margin:50px auto;
background:#abcdef;
position: relative;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
var ul=document.getElementById("ul");
//DOM中某元素被删除
EventUtil.addHandler(document, "DOMNodeRemoved", function(e){
//console.log("removed");//removed
});
//ul.removeChild(ul.children[3]);
//DOM中某元素被添加
var li=document.createElement("li");
EventUtil.addHandler(document, "DOMNodeInserted", function(e){
//console.log("inserted");//inserted
});
//ul.appendChild(li);
//DOM结构从文档中被删除之前触发
//addHandler中填写的是被删除的元素
var li=ul.children[3];
EventUtil.addHandler(li, "DOMNodeRemovedFromDocument", function(e){
//console.log("DOM结构从文档中被删除之前触发");//DOM结构从文档中被删除之前触发
});
//ul.removeChild(li);
//DOM结构从文档中被添加之前触发
//addHandler中填写的是被添加的元素
var li=document.createElement("li");
EventUtil.addHandler(li, "DOMNodeInsertedIntoDocument", function(e){
//console.log("DOM结构从文档中被添加之前触发");//DOM结构从文档中被添加之前触发
});
//ul.appendChild(li);
//DOM结构发生改变
EventUtil.addHandler(document, "DOMSubtreeModified", function(e){
//console.log("DOM结构发生改变");//DOM结构发生改变
});
//ul.removeChild(ul.children[3]);//4被删除
//DOM结构发生改变
EventUtil.addHandler(document, "DOMSubtreeModified", function(e){
//console.log("DOM结构发生改变");//DOM结构发生改变
});
//ul.removeChild(ul.children[3]);//4被删除
//DOM树加载完
EventUtil.addHandler(document, "DOMContentLoaded", function(e){
//console.log("DOM树加载完");//DOM结构发生改变
});
//hash值改变
EventUtil.addHandler(window, "hashchange", function(e){
console.log(e.oldURL + "\n" + e.newURL);//DOM结构发生改变
//file:///C:/Users/96579/Desktop/index.html#11
//file:///C:/Users/96579/Desktop/index.html#
});
});
</script>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
移动端常用事件 类型
touchstart 手指接触屏幕
touchmove 手指在屏幕上移动
touchend 手指离开屏幕
touchcancel 系统停止触摸跟踪时触发
首先在head上添加移动端适配的设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
touch的event对象
event.touches 屏幕上的触摸点个数
event.changedTouches 屏幕上移动的触摸点的个数
event.targetTouches 目标区域内的触摸点的个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width:100%;
}
#div{
width:100px;
height:100px;
background:#abcdef;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
var div=document.getElementById("div");
EventUtil.addHandler(div, "touchstart", function(e){
console.log("touchstart");
console.log(e.touches);
console.log(e.changedTouches);
console.log(e.targetTouches);
});
EventUtil.addHandler(div, "touchmove", function(e){
console.log("touchmove");
});
EventUtil.addHandler(div, "touchend", function(e){
console.log("touchend");
});
});
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
一个小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width:100%;
}
#div{
width:400px;
height:400px;
border:1px solid;
margin:50px;
}
#ul{
list-style: none;
}
#ul li{
width:100px;
height:30px;
line-height:30px;
text-align: center;
border-radius:5px;
display: inline-block;
cursor:pointer;
}
#ul li:hover{
color:#fff;
}
#ul li:first-child{
background:pink;
}
#ul li:nth-child(2){
background:#abcdef;
}
#ul li:nth-child(3){
background:lightgreen;
}
#ul li:last-child{
background:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){
var EventUtil={
addHandler:function(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, handler);
}else{
ele["on"+type]=handler;
}
},
removeHandler:function(ele, type, handler){
if(ele.removeEventListener){
ele.removeEventListener(type, handler, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, handler);
}else{
ele["on"+type]=null;
}
},
mycurrentTarget:function(event){
return event.Target || event.srcElement;
},
mypreventDefault:function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue=false;
}
},
mystopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}
var ul=document.getElementById("ul");
var div=document.getElementById("div");
EventUtil.addHandler(ul, "click", function(event){
var e=event.target;//缓存
if(e.innerHTML=="仙女粉"){
div.style.background="pink";
}else if(e.innerHTML=="气质蓝"){
div.style.background="#abcdef";
}else if(e.innerHTML=="薄荷绿"){
div.style.background="lightgreen";
}else if(e.innerHTML=="元气橙"){
div.style.background="orange";
}
});
});
</script>
</head>
<body>
<div id="div"></div>
<ul id="ul">
<li>仙女粉</li>
<li>气质蓝</li>
<li>薄荷绿</li>
<li>元气橙</li>
</ul>
</body>
</html>
分享到：
相关信息
-
-
-
2023-03-18
如何使用正则表达式保留部分内容的替换功能 -
2023-03-18
gulp-font-spider实现中文字体包压缩实践 -
2023-03-18
ChatGPT在前端领域的初步探索
-
-
uniapp五分钟实现刷抖音小程序教程示例最近闲来无事，在自己的小程序里面集成了一个小视频的接口，但是由于小程序对于播放视频的限制，只能用来做一个demo刷视频了，没办法上线体验。小程序播放视频限制最多10个，超出可能...
2023-03-18
-
Vue.js React与Angular流行前端框架优势对比Vue.js、React和Angular对比 以下是Vue.js的代码示例： 以下是React的代码示例： 以下是Angular的代码示例：...
2023-03-18
热门系统总排行
- 3091次 1 雨林木风Win10专业版64位纯净版系统官方下载
- 2650次 2 电脑公司ghost win7 64位纯净专业版v2019.08
- 1749次 3 深度技术 GHOST WIN10 X64 纯净版 V2019.09（64位）
- 1356次 4 电脑系统城ghost win7 sp132位 经典标准版 V2019.11
- 1350次 5 Win11官方最新版系统下载_Ghost Win11 22000.434(KB5009566)专业免激活版下载
- 1271次 6 电脑公司ghost win7 32位精简旗舰版v2019.08
- 1270次 7 电脑公司 GHOST WIN10 X64 正式专业版 V2019.09（64位）
- 1261次 8 电脑公司 GHOST XP SP3 安全稳定纯净版 V2019.08
系统教程栏目
栏目热门教程
- 1524次 1 详解mybatis-plus配置找不到Mapper接口路径的坑
- 772次 2 vue中使用vue-print.js实现多页打印
- 772次 3 arco design按需导入报错排查思路与解决方案解析
- 616次 4 基于SpringBoot bootstrap.yml配置未生效的解决
- 613次 5 前端项目内网怎么npm install以及安装node-sass
- 551次 6 JavaScript对象原型链原理详解
- 541次 7 javascript事件循环event loop的简单模型解释与应用分析
- 490次 8 Jmeter如何将每次测试的结果保存到文件中
- 444次 9 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
- 439次 10 vue实现全屏滚动效果（非fullpage.js）
人气教程排行
- 50050次 1 联想笔记本进入bios的三种方法 联想笔记本怎么进入bios
- 47587次 2 打印机为什么打印出来是黑的_打印出来纸张表面黑的解决方法
- 38021次 3 笔记本电脑序列号在哪|笔记本电脑序列号怎么看
- 30229次 4 对于目标文件系统文件过大无法复制到u盘怎么解决方法
- 29322次 5 mac连上wifi却上不了网如何解决 网络没问题但mac无法上网怎么办
- 23103次 6 电脑免费的加速器有哪些 永久免费的四款加速器推荐
- 20506次 7 小马激活工具 Win10正版激活 一键完美激活Win10_小编亲测
- 18819次 8 打印机显示休眠不打印怎么办 打印机深度休眠不打印解决方法
- 17556次 9 鲁大师跑分100万什么水平 鲁大师跑分多少算好电脑
- 15924次 10 win10系统更新到57%出现死机的原因和解决方法
站长推荐
- 8811次 1 Win11怎么激活？Win11系统永久激活方法汇总(附激活码)
- 5470次 2 联想拯救者win10一键恢复如何使用_联想win10一键还原孔使用方法
- 3824次 3 联想电脑开机出现PXE-MOF:Exiting Intel PXE ROM怎么解决
- 3753次 4 怎么在u盘pe下给电脑系统安装ahci驱动
- 3115次 5 华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法
- 3042次 6 如何用u盘装系统？用系统城U盘启动制作盘安装Win10系统教程
- 2587次 7 win10怎么改为uefi启动_win10系统设置uefi启动模式的方法
- 1527次 8 CentOS 8 系统图形化安装教程（超详细）
- 1461次 9 VMware中安装Linux系统（Redhat8）及虚拟机的网络配置方法
- 1416次 10 win10系统下检测不到独立显卡如何解决
热门系统下载
- 3310次 1 网吧游戏专用Win7 Sp1 64位免激活旗舰版 V2021.05
- 3091次 2 雨林木风Win10专业版64位纯净版系统官方下载
- 2957次 3 Windows Server 2019 官方原版系统64位系统下载
- 2698次 4 电脑公司ghost win10 64位游戏专用精简网吧版v2020.05
- 2650次 5 电脑公司ghost win7 64位纯净专业版v2019.08
- 2549次 6 Windows Server 2008 简体中文官方原版32位系统下载
- 2242次 7 系统之家win7系统安装盘_系统之家ghost win7 64位免激活专业网吧专业完整版v2021.05下载
- 2055次 8 UOS Desktop home 20 （1010）桌面个人版（64位）系统下载
