事件的三要素：
- 事件源
- 事件名
- 事件行为、
在原生的js中事件分为0 级事件绑定和2级事件绑定，下面想说说0级的事件绑定
<p onclick=" alert(1)" style="cursor: pointer;">点击我</p>
<!-- 代码的方式绑定事件 -->
<!-- 推荐使用 -->
<p id="p" style="cursor: pointer;">我是一段文字，请点击我</p>
<script>
var p = document.getElementById('p');
p.onclick = function(){
//在事件的响应方法中，this指向当前事件的原对象
alert(this.innerHTML);
}
//这种绑定事件的方式只能绑定一个方法；
</script>事件的绑定案例（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件案例</title>
</head>
<body>
<ul>
<li>我是li里面的内容1</li>
<li>我是li里面的内容2</li>
<li>我是li里面的内容3</li>
</ul>
<script>
//给多有的li标签添加点击事件，并弹出其内容
var li = document.querySelectorAll('li');
// for(var i = 0; i < li.length;i++){
// li[i].onclick = function(){
// alert(this.innerHTML);
// }
// }
li.forEach(function(item,index){
item.onclick = liOnclickHandle;
//优化，减少内存消耗多个li公用有个函数；
})
//li标签点击触发的函数
function liOnclickHandle(){
alert(this.innerHTML)
}
//因为li标签的响应事件都是一样的，所以没有必要没循环一次就创建一个事件响应函数的对象
</script>
</body>
</html>事件流
事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)；、
DOM2级事件绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加事件的第二种方式</title>
<style>
div{
border: 1px solid #ccc;
}
.parent{
height: 200px;
width: 200px;
background: #87c;
padding: 30px;
}
.child{
height: 100px;
width: 100px;
background-color: #4d4d4d;
}
</style> <style>
div{
border: 1px solid #ccc;
}
.parent{
height: 200px;
width: 200px;
background: #87c;
padding: 30px;
}
.child{
height: 100px;
width: 100px;
background-color: #4d4d4d;
}
</style>
</head>
<body>
<input type="button" value="点击我吧" id="btn">
<div class="parent">
我是父元素
<div class="child">
我是子元素
</div>
</div>
<script>
//首先拿到DOM元素对象
var btn = document.querySelector('#btn');
//第一种DOM绑定方式；
// btn.onclick = function(){}
//缺点：1，不能绑定多个事件处理程序
//2.只能在冒泡阶段执行事件响应程序
//第二种 绑定事件的方式， 传递三个参数；
//第一个参数是事件类型字符串 不带on 。第二个参数是事件处理程序。第三个参数是:是否在捕获阶段执行事件处理程序。
btn.addEventListener('click',function(){
alert("第一次弹出");
},false)
//给一个按钮绑定两个事件处理程序；
btn.addEventListener('click',function(){
alert("第二次弹出");
},false);
//控制在捕获阶段执行事件处理程序；
var parentDiv = document.querySelector('.parent');
var childDiv = document.querySelector('.child');
parentDiv.addEventListener('click',function(){
alert('父div')
},true);
childDiv.addEventListener('click',function(){
alert('子div')
},true)
//冒泡阶段触发事件
// parentDiv.addEventListener('click',function(){
// alert('父div')
// },true);
// childDiv.addEventListener('click',function(){
// alert('子div')
// },true)
</script>
</body>
</html>五角星事件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星事件案例</title>
</head>
<body>
<div class="wjx-wrap">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<script>
var wjxList = document.querySelectorAll('.wjx-wrap span');
// wjxList.forEach(function(elem,index){
// elem.addEventListener('click',function(){
// //首先把所有的五角星变成☆
// wjxList.forEach(function(item,index){
// item.innerHTML = '☆';
// });
// //其次吧自己变成★
// elem.innerHTML = '★';
// },false)
// });
//循环注册事件的时候要注意内存消耗问题；
wjxList.forEach(function(elem,index){
elem.addEventListener("click",wjxClickHandler)
})
function wjxClickHandler(){
//首先把所有的五角星变成☆
wjxList.forEach(function(item,index){
item.innerHTML = '☆';
});
//其次吧自己变成★
// elem.innerHTML = '★';
// 在事件处理函数的作用域中，this就指向当前注册的事件标签元素
this.innerHTML = '★';
}
</script>
</body>
</html>IE8 事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE8绑定事件</title>
</head>
<body>
<input type="button" id="btn" value="点击">
<script>
var btn = document.getElementById('btn');
//Ie 浏览器绑定事件
btn.attachEvent('onclick',function(){
alert(1)
})
</script>
</body>
</html>事件绑定的兼容处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定兼容</title>
</head>
<body>
<input type="button" id="btn" value="点击">
<script>
var btn = document.getElementById('btn');
if(btn.addEventListener){
btn.addEventListener('click',clickHandler,false);
}else if(btn.attachEvent){
btn.attachEvent('onclick',clickHandler);
}
function clickHandler(){
alert('兼容处理');
}
</script>
</body>
</html>事件响应方法的执行顺：
查看事件响应的执行顺序要在不同的浏览器中对比（IE和chrome）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<script>
var btn = document.getElementById('btn');
//DOM 2级
if(btn.addEventListener){
btn.addEventListener('click',function(){
alert("DOM 2级 -1")
},false);
btn.addEventListener('click',function(){
alert("DOM 2级 -2")
},false);
btn.addEventListener('click',function(){
alert("DOM 2级 -3")
},false);
}else if(btn.attachEvent){
btn.attachEvent('onclick',function(){
alert("DOM 2级IE -1")
});
btn.attachEvent('onclick',function(){
alert("DOM 2级IE -2")
});
btn.attachEvent('onclick',function(){
alert("DOM 2级IE -3")
});
}
//DOM 0级
btn.onclick = function(){
alert("DOM 0级")
}
</script>
</body>
</html>事件对象
获取事件对象的兼容处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象的兼容处理</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function(e){
//在标准的浏览器中，e就是事件对象。
//在IE浏览器中是通过 window.event属性获取当前的事件对象。
e = e ? e : window.event;
console.dir(e);
}
</script>
</body>
</html>阻止冒泡事件的兼容处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡处理</title>
<style>
div{
border: 1px solid #ccc;
}
.parent{
height: 200px;
width: 200px;
background: #87c;
padding: 30px;
}
.child{
height: 100px;
width: 100px;
background-color: #4d4d4d;
}
</style>
</head>
<body>
<div class="parent">
我是父元素
<div class="child">
我是子元素
</div>
</div>
<script>
var parent = document.querySelector('.parent'),
child = document.querySelector('.child');
child.addEventListener('click',function(e){
alert('子元素执行了');
// 阻止子元素的事件冒泡
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();//在标准浏览器下
}else{
e.cancelBubble = true;//IE8及以下 浏览器下
}
},false)
parent.addEventListener('click',function(e){
alert('父元素执行了');
},false)
</script>
</body>阻止事件捕获处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件捕获处理</title>
<style>
div{
border: 1px solid #ccc;
}
.parent{
height: 200px;
width: 200px;
background: #87c;
padding: 30px;
}
.child{
height: 100px;
width: 100px;
background-color: #4d4d4d;
}
</style>
</head>
<body>
<div class="parent">
我是父元素
<div class="child">
我是子元素
</div>
</div>
<script>
var parent = document.querySelector('.parent'),
child = document.querySelector('.child');
child.addEventListener('click',function(e){
alert('子元素执行了');
},true)
parent.addEventListener('click',function(e){
alert('父元素执行了');
e.stopPropagation();
},true)
</script>
</body>阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认行为</title>
</head>
<body>
<a href="http://www.baidu.com" id="linkToBaidu">百度</a>
<script>
var linkToBaidu = document.getElementById('linkToBaidu');
linkToBaidu.onclick = function(e){
alert("默认跳转被取消了")
e = e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
return false;//返回值给一个false，非常有用，也可以实现阻止默认事件的效果；
}
</script>
</body>
</html>阻止表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止表单提交</title>
</head>
<body>
<form action="#">
用户名：<input type="text" name="text" id="txtname">
<input type="submit" value="点击" id="btnSub" >
</form>
<script>
var btnSub = document.getElementById('btnSub');
btnSub.onclick = function(e){
e = e || window.event
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
return false;
}
</script>
</body>
</html>事件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件案例</title>
</head>
<body>
<input type="text" id="txt">
<script>
var txt = document.getElementById('txt');
//onkeypress 事件，当键盘上键被按下的时候会触发，
txt.onkeypress = function(e){
e = e || window.event;
//事件对象中的keyCode属性就是你所按下的键盘上的编码
// console.log(e.keyCode)
//0=>48, 9=>57
if(e.keyCode<48 || e.keyCode>57){
console.log(e.keyCode);
return false;
}
}
</script>
</body>
</html>提醒用户是否离开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提醒用户是否离开</title>
</head>
<body>
<form action="http://aicoder.com">
<input type="text" id="txtName">
<input type="submit" value="提交" id="btnSub">
</form>
<script>
window.onbeforeunload = function(){
return "你是否要离开？"//返回一个字符串浏览器在跳转其他页面或者关闭的的时候会提示信息；
}
var btnSub = document.getElementById("btnSub"),
txtName = document.getElementById("txtName");
// btnSub.onclick = function(){
// //取消默认操作（在dom0级中）可以使用 return false；
// if(!txtName.value){
// alert('用户名不能为空');
// return false;//所有浏览器都支持；只能在dom 0 级中使用；
// }
// };
//提交按钮的事件处理程序
if(btnSub.addEventListener){
//标准浏览器
btnSub.addEventListener('click',btnClickHandler,false);
}else{
//IE 8及以下浏览器
btnSub.attachEvent('onclick',btnClickHandler);
};
function btnClickHandler(e){
//判断是否为空
e = e || window.event;
if(!txtName.value){
alert('用户名不能为空');
//处理默认事件；
if(e.preventDefault){
//处理标准的浏览器
e.preventDefault();
}else{
//处理IE8及以下的浏览器；
e.returnValue = false;
}
}
}
</script>
</body>
</html>事件类型
onload 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 事件</title>
</head>
<body>
<!-- 第一情况 -->
<!-- <input type="button" value="点击" id="btn">
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
console.log(1)
})
</script> -->
<!-- 第二种情况 -->
<!-- <script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
console.log(1)
})
</script>
<input type="button" value="点击" id="btn"> -->
<!-- 第三种情况 -->
<script>
//页面的内容全部加载完成后，才会触发事件;
window.onload = function(){
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
console.log(1)
});
}
</script>
<input type="button" value="点击" id="btn">
</body>
</html模拟JQuery中的document中的ready
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 兼容一下：标准浏览器和IE浏览器在文档加载完成后，就立即绑定事件；IE9以上才支持
// document/addEventListener('DOMContentLoaded',function(e){
// console.log('DOMContentLoaded');
// //给按钮绑定事件
// var btn = document.getElementById('btn');
// btn.addEventListener('click',function(){
// alert('ok')
// })
// });
//文档记载完成后就绑定事件 IE8；
// document.onreadystatechange = function(){
// console.log(document.readyState);
// var btn = document.getElementById('btn');
// if(document.readyState == "complete"){
// btn.attachEvent('onclick',function(){
// alert("IE8 is OK");
// });
// }
// 或者用document.readyState == "interactive"
// if(document.readyState == "interactive"){
// btn.attachEvent('onclick',function(){
// alert("IE8 is OK");
// });
// }
// }
//所有的窗口中的元素都加载完成后才出发，这里不包括ajax请求的内容；
// window.onload = function(){
// console.log('window.onload');
// }
// 封装一个方法myReady jQuery 内部实现ready的脚本原理;
document.myReady = function(callback){
if(document.addEventListener){
//标准的浏览器
document.addEventListener('DOMContentLoaded',callback,false);
}else if(document.attachEvent){
//IE8 及以下的浏览器；
document.attachEvent('onreadystatechange',function(){
//当文档的状态变为：interactive
if(document.readyState == 'interactive'){
callback();
}
})
}else{
//其他特殊情况；
window.onload = callback;
}
};
document.myReady(function(){
var btn = document.getElementById('btn');
btn.onclick=function(){
alert('ok');
};
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn">
</body>
</html>resize事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//页面大小发生改变：
// 注意： 一次可能触发很多事件，所以尽量不要做大量的计算代码；
window.onresize =function (){
console.log(new Date());
}
</script>
</body>
</html>onscroll 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onscroll 事件</title>
</head>
<body>
<div style="height:1000px;"></div>
<script>
//scroll 事件会进行重复触发
window.onscroll = function(e){
console.log("scroll");
//标准浏览器pageYOffset和pageXOffset IE不支持
// console.log(window.pageYOffset);
// console.log(window.pageXOffset);
//IE 支持document.documentElement.scrollTop 标准的支持document.body.scrollTo
console.log(document.documentElement.scrollTop);//IE支持的
console.log(document.body.scrollTop);//标准浏览器支持
// console.log(document.documentElement.scrollTop||document.body.scrollTop);
}
</script>
</body>
</html>滚动到底部自动加载新内容.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-滚动到底部自动加载新内容.html</title>
<script src="js/documentReady.js"></script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
</ul>
<script>
document.myReady(function(){
window.onscroll = function(){
//获取滚动的距离
var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
//整个网页的高度
var pageH = document.body.clientHeight;
//或者整个视口的高度
var viewportH = document.documentElement.clientHeight;
//获取底部高度
var bottomH = pageH - viewportH -scrollH;
if(bottomH<50){
var list = document.getElementById('list');
var tmpStr = "";
for(var i=0;i<10;i++){
tmpStr = "<li>"+new Date()+"</li>"
}
list.innerHTML=list.innerHTML +tmpStr
}
}
});
</script>
</body>
</html>页面滚动固定定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>32-页面滚动固定定位案例.html</title>
<script src="js/documentReady.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.header{
text-align: center
}
.header-tips{
height: 100px;
background: #8877ee;
}
.header-seacher{
height: 100px;
background: #6633ff;
line-height: 100px;
width: 100%;
}
.cnt{
height: 1000px;
background:red;
}
</style>
</head>
<body>
<div class="header">
<div class="header-tips">这里是头部tips</div>
<div class="header-seacher">
<input type="text">
<input type="button" value="搜索">
</div>
</div>
<div class="cnt">
这里是内容
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
</ul>
</div>
<script>
document.myReady(function(){
window.onscroll = function(){
var scrollH = document.documentElement.scrollTop ||document.body.scrollTop;
var headerSeacher = document.querySelector('.header-seacher');
var cnt = document.querySelector('.cnt');
if(scrollH > 100){
headerSeacher.style.position = 'fixed';
headerSeacher.style.top = 0;
cnt.style.marginTop = 100 +"px";
}else{
headerSeacher.style.position = 'static';
headerSeacher.style.top = 0;
cnt.style.marginTop = 0;
}
}
});
</script>
</body>
</html>焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点事件</title>
</head>
<body>
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="button" id="btn" value="点击获得焦点" >
<script>
window.onload = function(){
var txt1 = document.getElementById('txt1');
txt1.onfocus = function(){
console.log('txt1 get focus')
};
txt1.onblur = function(){
console.log('txt1 lost focus')
};
document.getElementById('btn').onclick = function(){
document.getElementById('txt2').focus();
};
var txt2 = document.getElementById('txt2');
txt2.onblur = function(){
if(!txt2.value){
txt2.focus();
txt2.style.borderColor = 'red';
}else{
txt2.style.borderColor = '';
}
}
}
</script>
</body>
</html>文本框提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框提示信息</title>
</head>
<body>
<input type="text" placeholder="老马">
<input type="text" value="老马" id="txt2">
<!--
placeholder在早期的IE8 及其以上的浏览器是不支持的
用以下代码完成placeholder的方法
-->
<script>
window.onload = function(){
var txt2 = document.getElementById('txt2');
txt2.style.color = '#ccc'
txt2.onfocus = function(){
if(txt2.value == '老马'){
txt2.value ='';
txt2.style.color = '#424242'
}
};
txt2.onblur = function(){
if(txt2.value == ''){
txt2.value ='老马';
txt2.style.color = '#ccc'
}
}
}
</script>
</body>
</html>弹出消息提示选择框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出消息提示选择框</title>
<style>
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.search-box-wrap{
margin: 0 auto;
width: 300px;
margin-top: 100px;
position: relative;
}
.list{
border: 1px solid #ccc;
box-sizing: border-box;
display: none;
position: absolute;
width: 100%;
}
.list li{
height: 25px;
line-height: 25px;
padding-left: 10px;
}
.list li:hover{
background: #eee;
}
.txt-search{
padding-left: 10px;
width: 300px;
height: 25px;
line-height: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="search-box-wrap">
<input type="text" id="txtSearch" class="txt-search">
<ul class="list">
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
<li>hello5</li>
</ul>
</div>
<script>
window.onload = function(){
(function(){
var txtSearch =document.getElementById('txtSearch');
var list = document.querySelector('.list');
var li = document.querySelectorAll('.list li');
//当获得焦点时，list显示
txtSearch.onfocus = function(){
list.style.display = 'block';
}
//当时去焦点时，list消失
txtSearch.onblur = function(){
list.style.display = 'none';
};
//给所有的Li上添加点击事件；
li.forEach(function(element){
// element.onclick = liClickHandler; //不能实现
element.onmousedown = liClickHandler;
//点击事件和失去焦点事件执行的顺序：
//第一步：先执行onmousedown 事件。事件中让被点击的元素获得焦点;
//那么原来获得焦点的元素会失去焦点；
// mousedown->原来获得焦点元素的blur事件->当前元素的mouseup事件。
//->click 事件;
});
//减少内存消耗
function liClickHandler(){
txtSearch.value=this.innerHTML;
}
})()
}
</script>
</body>
</html>鼠标事件的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
margin: 50px 200px;
padding: 100px;
box-sizing: border-box;
border: 1px salmon solid;
}
p{
border: 2px solid saddlebrown;
margin: 10px;
}
</style>
</head>
<body>
<div id="box">
<p>感谢我自己还在努力学东西1</p>
<p>感谢我自己还在努力学东西2</p>
<p>感谢我自己还在努力学东西3</p>
<p>感谢我自己还在努力学东西4</p>
<p>感谢我自己还在努力学东西5</p>
<p>感谢我自己还在努力学东西6</p>
<p>感谢我自己还在努力学东西7</p>
<p>感谢我自己还在努力学东西8</p>
</div>
<script>
(function(){
window.onload = function(){
var box =document.getElementById('box');
box.addEventListener('mousedown',function(){
console.log("1mousedown")//最先执行
},false);
box.addEventListener('mouseup',function(){
console.log("2mouseup")// 其次执行
},false);
//如果鼠标不在当前元素上up，那么久不会触发click 事件；
box.addEventListener('click',function(){
console.log("3click")// 最后执行
},false);
// <!-- mouseenter和mouseleave-->
//当鼠标进入元素范围内部的时候，只执行一次;不会冒泡
box.addEventListener('mouseenter',function(){
console.log("mouseenter");
},false);
//当鼠标离开元素范围内部的时候，只执行一次;不会冒泡
box.addEventListener('mouseleave',function(){
console.log("mouseleave");
},false);
// <!-- mouseover和 mouseout-->
//当鼠标在元素及子元素上的时候会触发，触发多次，冒泡；
box.addEventListener('mouseover',function(){
console.log("mouseover");
},false);
box.addEventListener('mouseout',function(){
console.log("mouseout");
},false);
}
})()
</script>
</body>
</html>元素块跟着鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.tips{
position: absolute;
height: 50px;
width: 50px;
border: #eee;
background-color:greenyellow;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="tips" id="tips"></div>
<div style="height:1000px"></div>
<script>
(function(){
window.onload =function(){
var tips = document.getElementById('tips');
//给整个文档添加一个onmousemove事件;
document.onmousemove = function(e){//e.MouseEvent鼠标事件对象。
var e = e || window.event;
//获取鼠标在整个面的位置 鼠标在整个页面的位置 = 鼠标在视口的位置 + 页面滚动的位置
// e.clientX的兼容性很好;
var tipsX = e.clientX + (document.documentElement.scrollLeft||document.body.scrollLeft);
var tipsY = e.clientY +(document.documentElement.scrollTop||document.body.scrollTop);
//给固定的元素块设置一个位置
tips.style.left = tipsX-25+'px';
tips.style.top = tipsY-25+'px';
}
}
})()
</script>
</body>
</html>拖动Div案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动Div案例</title>
<style>
html,body,div{
margin: 0;
padding: 0;
}
body{
background-color:mistyrose;
}
.box{
position:absolute;
height: 100px;
width: 100px;
border: 1px solid salmon;
background-color:purple;
cursor:move;
}
</style>
</head>
<body>
<div class="box" id="box" style="top:10px;left:10px;"></div>
<script>
(function(){
//监听div的mousedown事件。开始计算鼠标移动的位移，
//通过鼠标水平方向位移设置div的left值，通过水杯垂直方向设置div 的top值；
//div的mouseup触发时，div移动结束
window.onload = function(){
var box =document.getElementById('box');
//当mousedown的时候设置标志位true开始移动 ； mouseup设置标志位位false；mousemove时记录当前和位置和前一个位置，计算其移动的距离；
var tempX = 0,tempY = 0;
var isMove = false;
//鼠标按下开始移动div
box.onmousedown = function(e){
var e = e ||window.event;
isMove = true;
tempX = e.clientX +(document.documentElement.scrollLeft||document.body.scrollLeft);
tempY = e.clientY +(document.documentElement.scrollTop||document.body.scrollTop);
};
//鼠标抬起停止移动div
box.onmouseup = function(e){
isMove = false;
}
//mousemove 时开始移动div
document.onmousemove = function(e){
//判断是否是鼠标按下去时
if(!isMove){
return;
}
//计算出当前鼠标的位置
//screenX screenY 和clientX clientY,都是有滚动问题;
//pageX和pageY不管是否滚动都不会影响;
var e = e ||window.event;
// 鼠标相对于页面的位置
var pageX = e.clientX +(document.documentElement.scrollLeft||document.body.scrollLeft);
var pageY = e.clientY +(document.documentElement.scrollTop||document.body.scrollTop);
//移动距离的计算
moveX = pageX - tempX;
moveY = pageY - tempY;
//要把div在x方向上移动moveX，在y上移动moveY；
//设置div的style.left style.top;
//一开始没有通过style.top和style.left来设置style属性，那么气值都是“”;
//js是拿不到css里面设置的left和top的值;
//js只能通过控制style属性，并且 可以读取style属性里面的left和top的值;
box.style.left = (parseFloat(box.style.left)+moveX)+"px";
box.style.top = (parseFloat(box.style.top)+moveY)+"px";
//为鼠标笑一次movemove做初始化鼠标坐标位置;
tempX = pageX;
tempY = pageY;
}
}
})()
</script>
</body>
</html>自定义右键菜单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义右键案例</title>
<style>
*{
margin: 0;
padding: 0;
}
.tip-box{
list-style: none;
}
.tip-box{
display: none;
position: absolute;
border: 1px saddlebrown solid;
}
.tip-box li{
border: 1px rebeccapurple solid;
padding: 0 20px;
}
.tip-box li:hover{
background-color: lemonchiffon ;
}
</style>
</head>
<body>
<h1 id="t">右键点击</h1>
<ul class="tip-box" id="tipBox">
<li>hello ssss</li>
<li>hello aaaa</li>
<li>hello llll</li>
</ul>
<script>
(function(){
window.onload = function(){
var t = document.getElementById('t');
var tipBox = document.getElementById('tipBox');
t.onmousedown = function(e){
var e = e||window.event;
if(e.button == 2||e.button ==6){
console.log('右键点击了');
//弹出自定义的菜单
tipBox.style.display = 'block';
//弹出菜单的位置
var pageX = e.clientX +(document.documentElement.scrollLeft||document.body.scrollLeft);
var pageY = e.clientY +(document.documentElement.scrollTop||document.body.scrollTop);
tipBox.style.left = pageX +"px"
tipBox.style.top = pageY +"px"
}
}
//点击文档就关闭菜单
document.onclick = function(e){
tipBox.style.display = 'none';
}
document.oncontextmenu = function(e){
//阻止默认行为就阻止浏览器弹出右键菜单;
var e = e||window.event;
if(e.preventDefault){
e.preventDefault();
} else{
e.returnValue = false;
}
return false;
}
}
})()
</script>
</body>
</html>段落多选和互斥单选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落多选和互斥单选案例</title>
<style>
html,body,div,p{
padding: 0;
margin: 0;
}
p{
cursor: pointer;
padding: 3px;
}
.p-box{
padding: 10px 20px;
}
.p-bg-gray{
background-color: #eee;
}
.p-bg-white{
background-color: #fff;
}
</style>
</head>
<body>
<div class="p-box" id="pBox">
<p>我是其中的段落1</p>
<p>我是其中的段落2</p>
<p>我是其中的段落3</p>
<p>我是其中的段落4</p>
<p>我是其中的段落5</p>
<p>我是其中的段落6</p>
<p>我是其中的段落7</p>
<p>我是其中的段落8</p>
<p>我是其中的段落9</p>
</div>
<script>
(function(){
window.onload = function(){
//拿到所有的p标签
var pBox = document.getElementById('pBox');
var p=pBox.getElementsByTagName('p');
for(var i=0;i<p.length;i++){
p[i].onclick = pClickHandler
}
//算罗标签点击的事件处理程序
function pClickHandler(e){
var e = e||window.event;
//判断是否按下ctrl键；
if(e.ctrlKey){
//多选
console.log('多选');
this.className = 'p-bg-gray';
}else{
// 单选
console.log('单选');
//首先所有的p标签都去背景颜色；
for(var i=0;i<p.length;i++){
p[i].className = 'p-bg-white';
}
//给自己添加背景颜色；
this.className = 'p-bg-gray';
}
}
}
})()
</script>
</body>
</html>键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script src="../js/documentReady.js"></script>
</head>
<body>
<input type="text" id="txt">
<script>
(function(){
document.myReady(function(){
//可以绑定事件；
var txt = document.getElementById('txt');
//键盘上的键只要被按下就会触发keydown事件应用于所有的Dom对象；可以监听功能键；
//可以按着一直不放开会一直触发；
txt.onkeydown = function(e){
var e = e || window.event;
console.log("keydown==>keyCode:"+e.keyCode+"charCode:"+e.charCode);
}
//可以一直触发。只能监听可以打印字符的键。退格键就不行；
//keypress事件区分按下的大写小写字符；
txt.onkeypress = function(e){
var e = e || window.event;
console.log("keypress==>keyCode:"+e.keyCode+"charCode:"+e.charCode);
}
//只能触发一次，不区分大小写，按下的疑虑按大写的阿斯克码值计算；
txt.onkeyup = function(e){
var e = e || window.event;
console.log("keyup==>keyCode:"+e.keyCode+"charCode:"+e.charCode);
}
})
})()
</script>
</body>
</html>文本框自动获得焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框自动获得焦点</title>
<script src="../js/documentReady.js"></script>
</head>
<body>
<div class="box-wrap">
<div id="inpBox">
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="text" id="txt3">
<input type="text" id="txt3">
<input type="text" id="txt4">
<input type="text" id="txt5">
</div>
<input type="button" id="btn" value="提交">
</div>
<script>
(function(){
document.myReady(function(){
//页面加载完成后执行；
//首先获取所有input标签，绑定事件；
var inpBox = document.getElementById('inpBox'),
inputs = inpBox.getElementsByTagName('input');
//绑定keyup事件
for(var i = 0;i < inputs.length ;i++){
// inputs[i].onkeyup = keyUpHandler
(function(j){
inputs[j].onkeyup=function(e){
//检测文本框出入的文本的长度是否达到3个长度，达到了就让下一个文本获取焦点；
if(this.value.length>=3){
//让下一个文本框获取焦点;
if(j<=inputs.length-2){
inputs[j+1].focus();
}else{
document.getElementById('btn').focus();
}
}
}
})(i)
};
});
})()
</script>
</body>
</html>文本框change事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框change事件</title>
<script src="../js/documentReady.js"></script>
</head>
<body>
用户名<input type="text" id="userName">
<input type="button" id="subBtn" value="uuuu">
<script>
(function () {
document.myReady(function () {
var userName = document.getElementById('userName');
//失去焦点才能触发；
userName.onchange = function(){
//判断文本框的长度
//文本框继续获得标点；
if(this.value.length>9||this.value.length<3){
alert('用户名必须是3到9个字符')
}
}//end for onchange
//不需要失去焦点就能触发
// userName.oninput = function(){
// //判断文本框的长度
// //文本框继续获得标点；
// if(true){
// alert('用户名必须是3到9个字符')
// }
// }//end for oninput
});//end for myReady
})()
</script>
</body>
</html>js事件委托案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托案例</title>
<style>
ul{
list-style: none;
}
li{
padding: 10px 0;
border: 1px saddlebrown solid;
width: 200px;
cursor: pointer;
}
</style>
<script src="../js/documentReady.js"></script>
<script src="../js/EventUtil.js"></script>
</head>
<body>
<ul id="list">
<li>我是li标签1</li>
<li>我是li标签2</li>
<li>我是li标签3</li>
<li>我是li标签4</li>
<li>我是li标签5</li>
<li>我是li标签6</li>
<li>我是li标签7</li>
<li>我是li标签8</li>
<li>我是li标签9</li>
</ul>
<script>
(function(){
document.myReady(function(){
//拿到所有的li标签绑定事件
var oUl = document.getElementById('list');
var oLi = oUl.getElementsByTagName('li');
//这种方式的问题：
//1，后来动态添加的li标签，不能绑定事件绑定程序；
//2,li标签很多的时候，会产生很多绑定信息，很浪费内存;
// for(var i = 0;i < oLi.length;i++){
// EventUtil.addEvent(oLi[i],'click',function(){
// console.log(this.innerHTML);
// })
// }
//解决上面的问题；
//1事件是有冒泡的；
//2弹出事件源对象的内容 e.target||e.srcElement ；
//3getElementsByTagName, 返回的伪数组是一个动态的;会自动更新；
//子元素的事件委托父容器来进行注册来处理
EventUtil.addEvent(oUl,'click',function(e){
var target = EventUtil.getTarget(e);
//如果是父元素点击了自己，那就直接什么都不做；
//如果点击的是子元素就弹出自己的内容；
if(target==this){
return;
}
//如果点击的是子元素，则执行下面的函数；
console.log(target.innerHTML);
})
});// end for myReady
})();
</script>
</body>
</html>
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
