事件类型:
注意:为了达到各个浏览器之间的兼容问题,下面的Js文件是已经封装好了的方法,下面的某些案例为了避免重复代码,故有的文件则会引用如下几个JS文件.
documentReady.js
/**
* 封装绑定文档加载完成后的事件处理程序
* @callback function 页面文档加载完成后的回调函数
*/
document.myReady = function (callback) {
// jQuery实现文档加载完成后 事件的原理.
// 封装标准浏览器和ie浏览器
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback, false);
} else if (document.attachEvent) {
//兼容IE8及以下的浏览器.
document.attachEvent('onreadystatechange', function () {
//当文档的状态变为:interactive表示,文档的dom对象可以进行访问
if (document.readyState == "interactive") {
callback(window.event);
}
});
} else {
window.onload = callback;
}
};EventUtil.js
// 事件封装
(function () {
// 第一个:封装绑定事件的兼容处理
var EventUtil = {
// 1.给谁绑定 | 2.绑定什么事件 | 3.绑定事件的处理程序 | 4.捕获冒泡
addEvent: function (element, type, handler, isCapture) {
if (element.addEventListener) {
// 标准浏览器的绑定事件
// 处理第四个参数,保证isCapture一定是boolean类型的.
isCapture = isCapture ? true : false;
element.addEventListener(type, handler, isCapture);
} else if (element.attachEvent) {
// ie6-8的事件绑定方法
element.attachEvent('on' + type, function () {
// window.event;
return handler.call(element, window.event); // 函数调用模式
// 所有的事件处理程序中 this == event.target || event.srcElement
});
}
},
// 获取事件对象 兼容处理
getEvent: function (e) {
return e || window.event;
},
// 获取事件源对象
getTarget: function (e) {
return e.target || e.srcElement;
},
// 阻止事件冒泡
stopPropagation: function (e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancleBubble = true;
}
},
// 阻止默认行为
preventDefault: function (e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
};
// 把我们上面定义的对象赋值给window的属性
window.EventUtil = EventUtil;
})(window || {});文档加载完成事件
案例: 29-onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>onload事件</title>
</head>
<body>
<script>
// 页面的内容全部加载完成后,才触发此事件
window.onload = function () {
var btn = document.getElementById('btn'); //btn === null
btn.onclick = function () {
console.log('ok');
alert('1');
}
}
</script>
<input type="button" value="点击" id="btn">
</body>
</html>窗口的事件
案例:30-window的加载事件优化
<!DOCTYPE html>
<!-- DOMContentLoaded -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window的加载事件优化</title>
<script>
// 兼容以下: 标注浏览器和ie浏览器 在文档加载完成后就立即绑定事件.
document.addEventListener('DOMContentLoaded', function (e) {
console.log('DOMContentLoaded');
// 给按钮绑定事件
var btn = document.getElementById('btn');
btn.addEventListener('click', function (e) {
alert('ok');
}, false);
}, false);
// 所有的窗口中元素都加载完成后才触发(不包括Ajax请求的内容)
window.onload = function () {
console.log('window.onload');
};
// 也可以这么写
// document.onDOMContentLoaded = function(){
// };
//ie8 文档加载完成后就立即绑定DOM的事件
document.onreadystatechange = function (e) {
console.log(document.readyState);
// complete 当文档加载完成之后.
if (document.readyState == "complete") {
var btn = document.getElementById('btn');
btn.onclick = function () {
alert('ok')
}
}
}
// jQuery实现文档加载完成后 事件的原理
document.myReady = function (callback) {
// 封装标准浏览器和ie浏览器
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback, false);
} else if (document.attachEvent) {
//兼容IE8及以下的浏览器.
document.attachEvent('onreadystatechange', function () {
//当文档的状态变为:interactive表示,文档的dom对象可以进行访问
if (document.readyState == "interactive") {
callback(window.event);
}
});
} else {
window.onload = callback;
}
};
document.myReady(function (e) {
//注册事件
var btn = document.getElementById('btn');
btn.onclick = function () {
alert('ok2');
};
});
</script>
</head>
<body>
<input type="button" value="点击我" id="btn">
</body>
</html>案例: 31-resize事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>resize事件</title>
</head>
<body>
<script>
window.onresize = function (){
console.log('kkk');
}
</script>
</body>
</html>案例: 32-onscroll事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>onscroll事件</title>
</head>
<body>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<script>
//scroll 事件会重复触发
window.onscroll = function (e) {
console.log('scroll');
//纵向
console.log(window.pageYOffset);
//横向
console.log(window.pageXOffset);
//window.pageXOffset //都是标准浏览器才有的属性
//ie不支持pageXOffset和pageYOffset
console.log(document.document.scrollTop); //ie
console.log(document.body.scrollTop); //0, 标准浏览器支持
// console.log(document.documentElement.scrollTop || document.body.scrollTop);
}
</script>
</body>
</html>滚动案例1:
案例: 33-滚动到底部自动加载新内容案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动到底部自动加载新内容</title>
<script src="../js/documentReady.js"></script>
<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 - scrollH - viewportH;
if (bottomH < 50) {
var list = document.getElementById('list');
var tempStr = "";
for (var i = 0; i < 10; i++) {
tempStr += '<li>' + new Date() + '</li>';
}
list.innerHTML += tempStr;
}
};
});
</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>
</ul>
</body>
</html>
滚动案例2:
案例: 34-页面滚动固定定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面滚动固定定位</title>
<style>
body,
div,
h1 {
padding: 0;
margin: 0;
}
.top-wrap {
height: 150px;
background-color: #c0d;
}
.top-logo-wrap {
height: 40px;
background-color: #cade;
}
.top-search-wrap {
height: 110px;
background-color: maroon;
width: 100%;
}
.top-search-wrap-fixed {
position: fixed;
top: 0;
/* left: 0; */
}
</style>
<script src="../js/documentReady.js"></script>
<script>
document.myReady(function () {
// 当页面滚动到40像素的时候,让搜索div进行固定定位
var searchBox = document.getElementById('searchBox');
window.onscroll = function () {
//拿到滚动的距离
var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollH >= 40) {
//让搜索的div设置样式类.top-search-wrap-fixed
//这里的className为标签设置样式类
searchBox.className = "top-search-wrap top-search-wrap-fixed";
// 标签的class属性在dom对象中className属性.
} else {
searchBox.className = "top-search-wrap"
}
}
});
</script>
</head>
<body>
<div class="top-wrap">
<div class="top-logo-wrap">
可以卷进去的顶部
</div>
<div id="searchBox" class="top-search-wrap">
固定定位
</div>
</div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
</body>
</html>当没有发生滚动时:
当滚动时:
扫描二维码关注公众号，回复： 2828076 查看本文章
焦点事件
案例: 35-焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>焦点事件</title>
</head>
<body>
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="button" value="txt2获得焦点" id="btnFocus2">
<script>
window.onload = function(){
var txt1 = document.getElementById('txt1');
// 当文本框获得焦点时触发
txt1.onfocus = function(){
console.log("获得焦点");
};
//当文本框失去焦点时触发
txt1.onblur = function(){
console.log("失去焦点");
};
var btnFocus2 = document.getElementById('btnFocus2');
btnFocus2.onclick = function(){
// 获取txt2的文本框,并且让txt2的文本框得到焦点.
// 通过js代码设置文本获得焦点
document.getElementById('txt2').focus();
}
// 要实现: 文本框2不能为空
var txt2 = document.getElementById('txt2');
txt2.onblur = function(){
//判断文本框2的value属性是否为空
if(txt2.value == ""){
//如果为空,则让文本框2继续获得焦点
txt2.focus();
txt2.style.borderColor = "red";
}else{
txt2.style.borderColor = "";
}
};
}
</script>
</body>
</html>
焦点事件案例
案例: 36-文本框提示消息案例
<!DOCTYPE html>
<!-- placeholder:呈现灰色字体,当输入字体时它则会消失 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本框提示消息案例</title>
</head>
<body>
<!-- ie8不支持 -->
<input type="text" placeholder="张宜成">
<input type="text" value="张宜成" id="txt2">
<script>
window.onload = function(){
var txt2 = document.getElementById('txt2');
// 设置字体为灰色
txt2.style.color = "#ccc"; // 文档加载完成后,直接设置提示文本为灰色
// 文本框2 获得焦点的时候,判断文本框值是否等于张宜成,如果是则清空
txt2.onfocus = function(){
if(txt2.value =='张宜成'){
txt2.value = "";
txt2.style.color = "#000";
};
};
//文本框2离开焦点时候,判断文本框的值是否为空,空则设置回张宜成
txt2.onblur = function(){
if(txt2.value == "") {
txt2.value = "张宜成";
txt2.style.color = "#ccc";
};
};
};
</script>
</body>
</html>
案例: 37-文本框弹出提示选择框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本框弹出提示选择框案例</title>
<style>
html,
body,
div,
ul,
li,
input {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.search-box-wrap {
margin: 0 auto;
width: 300px;
height: 400px;
padding-top: 30px;
/* text-align: center; */
position: relative;
}
.search-box-wrap .list {
border: 1px solid #ddd;
width: 198px;
display: none;
position: absolute;
}
.txt-search {
border-width: 2px;
width: 191px;
padding-left: 5px;
line-height: 20px;
}
.search-box-wrap .list li {
height: 25px;
line-height: 25px;
padding-left: 5px;
}
.search-box-wrap .list li:hover {
background-color: #eee;
cursor: pointer;
/* 鼠标变成手形 */
}
</style>
</head>
<body>
<div class="search-box-wrap">
<input type="text" id="txtSearch" class="txt-search">
<ul class="list" id="tipList">
<li>张宜成1</li>
<li>张宜成2</li>
<li>张宜成3</li>
<li>张宜成4</li>
<li>张宜成5</li>
</ul>
</div>
<script>
// 当文本框获得焦点,提示框显示.失去焦点,提示框关闭
(function () {
// 模拟的块级作用域,不会影响全局变量
window.onload = function () {
var txtSearch = document.getElementById('txtSearch');
var tipList = document.getElementById('tipList');
var liList = tipList.getElementsByTagName('li');
txtSearch.onfocus = function () {
//弹出提示框
tipList.style.display = "block";
//弹出的提示框,不能影响原来的流式布局
};
txtSearch.onblur = function () {
//关闭提示框
tipList.style.display = "none";
}
//给所有li绑定点击事件,实现li点击后,把li上的文本放到文本框上去.
for (var i = 0; i < liList.length; i++) {
// liList[i].onclick = tipLiHandler;
liList[i].onmousedown = tipLiHandler;
// 重点: 关于点击事件和失去焦点事件产生的冲突解决:
// 点击事件和失去焦点事件执行顺序
// 第一步:先执行mousedown事件, 事件中:会让被点击的元素获得焦点.那么,原来获得焦点元素就会失去焦点.
// mousedown -> 原来获得焦点元素blur事件 -> 当前元素的mouseup事件
// -> click 事件被执行
// 如果mousedown 事件中,阻止默认行为,那么此元素就不会获得焦点
}
// 所有li标签点击事件的绑定的事件处理程序,减少内存的消耗.
function tipLiHandler() {
var txt = this.innerHTML; // this == liList[i]
txtSearch.value = txt; //把li标签的文本设置到文本框上去
}
};
})();
</script>
</body>
</html>
鼠标事件
鼠标事件对象（接口）
案例: 38-鼠标事件
<!DOCTYPE html>
<!--
click事件(单击), 可以通过点击鼠标左键(默认情况)也可以通过键盘的回车键触发.
dbclick:双击事件
mousedown: 按下鼠标键的时候触发,不能通过键盘触发
mouseup: 用户释放鼠标键的时候触发,不能通过键盘触发
mouseenter: 首次进入元素范围触发,不冒泡
mouseover: 当鼠标在元素上面或者子元素上面时触发此事件,会冒泡
mouseleave: 当鼠标离开目标元素位置,不冒泡
mouseout: 当鼠标离开目标元素或者子元素都会触发此事件,会冒泡的(不常用)
mousemove: 鼠标在元素内部移动时重复触发此事件(重点)
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标事件区别</title>
<style>
div {
border: 1px solid #ccc;
}
p {
margin: 20px;
border: 1px solid saddlebrown;
}
</style>
</head>
<body>
<div class="box" id="box">
<p>张宜成1</p>
<p>张宜成2</p>
<p>张宜成3</p>
<p>张宜成4</p>
<p>张宜成5</p>
<p>张宜成6</p>
</div>
<script>
(function () {
window.onload = function () {
var box = document.querySelector(".box");
box.onmousedown = function () {
console.log('鼠标按下'); //最先执行
};
box.onmouseup = function () {
console.log('鼠标抬起'); // 其次执行
};
// 如果鼠标不是在当前元素上up的,那么就不会触发click事件
box.onclick = function () {
console.log('鼠标点击');
};
// 当鼠标进入元素范围后,值执行一次,不会冒泡
box.onmouseenter = function () {
console.log('onmouseenter');
};
//离开元素范围后,只执行一次,不会冒泡
box.onmouseleave = function () {
console.log('onmouseleave');
};
// 在元素或者子元素上面的时候就会触发,会冒泡
box.onmouseover = function (e) {
console.log('onmouseover');
}
// 离开子元素或者自身的时候都会触发,会冒泡
box.onmouseout = function (e) {
console.log('onmouseout');
}
}
})();
</script>
</body>
</html>鼠标事件对象的坐标位置
案例: 39-鼠标事件中的位置全解密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标事件中的位置全揭秘</title>
</head>
<body>
<!--
客户区坐标(视口内的坐标):
clientX: 视口内横坐标, 从视口最左边开始计算
clientY:视口内的纵坐标
页面坐标:
没有滚动的时候,clientX和pageX相同.IE8不支持pageX
pageX就是鼠标点击位置相对于整个文档页面的水平坐标.
pageY就是鼠标点击位置相对于整个文档(包括不可视区域)的纵坐标
屏幕坐标:
鼠标点击的时候,通过screenX 和 screenY来对应鼠标在屏幕的坐标.
offsetX和offsetY 是相对于事件源对象的内边距内测的距离.
-->
</body>
</html>案例:
案例: 40-图片跟着鼠标案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片跟着鼠标移动案例</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
img {
position: absolute;
}
</style>
</head>
<body>
<img src="../img/a.png" alt="" width="50" height="50" id="imgB">
<script>
(function () {
window.onload = function () {
// 给整个文档添加一个onmousemove事件
document.onmousemove = function (e) { // e:MouseEvent,鼠标的事件对象
e = e || window.event;
//获取鼠标移动的位置所在整个页面的坐标.
// var pageX = e.pageX; //ie9 + chrome + ff
var pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
var pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
// 给固定定位的图片设置left和top值
var imgB = document.getElementById('imgB');
imgB.style.left = (pageX-25) + 'px';
imgB.style.top = (pageY-25) + 'px';
}
};
})();
</script>
</body>
</html>
鼠标事件对象的鼠标按钮信息
鼠标的兼容性处理
案例:
案例: 41-自定义右键菜单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义邮右键菜单案例</title>
<style>
html,
body,
h1,
ul,
li {
padding: 0;
margin: 0;
}
ul {
list-style: none;
width: 200px;
}
.menu {
border: 1px solid saddlebrown;
padding: absolute;
background-color: #eee;
display: none;
}
.menu .menu-item {
border: 1px solid mediumaquamarine;
cursor: pointer;
padding: 5px;
}
.menu .menu-item:hover {
background-color: mediumaquamarine;
}
</style>
</head>
<body>
<h1 id="hTitle">右键查看信息</h1>
<ul class="menu" id="menuList">
<li class="menu-item">1</li>
<li class="menu-item">2</li>
<li class="menu-item">3</li>
<li class="menu-item">4</li>
<li class="menu-item">5</li>
</ul>
<script>
(function () {
window.onload = function () {
//给h1 标签添加一个右键点击事件.
var hTitle = document.getElementById('hTitle');
var menuList = document.getElementById('menuList');
// 给标题添加鼠标按下事件
hTitle.onmousedown = function (e) {
e = e || window.event;
// e.button // 获得你点击时哪个鼠标按键
if (e.button == 2 || e.button == 6) {
console.log('右键被点击了~');
// 弹出我们自定义的右键菜单
menuList.style.display = "block";
//控制弹出来的菜单的位置为鼠标的位置.
//首先获取鼠标指针的位置.
var pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
var pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
menuList.style.left = pageX + 'px';
menuList.style.top = pageY + 'px';
}
};
// 点击文档,关闭右键弹出来的菜单
document.onclick = function(e){
menuList.style.display = "none";
}
//在整个文档中屏蔽浏览器默认的右键菜单
document.oncontextmenu = function (e) {
// 阻止默认行为就可以阻止浏览器弹出右键菜单
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
return false;
}
};
})();
</script>
</body>
</html>
鼠标事件对象的键盘信息
案例: 42-多选或单选段落案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多选或单选段落案例</title>
<style>
.pBox p {
cursor: pointer;
}
</style>
</head>
<body>
<div class="pBox" id="pBox">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
<script>
(function () {
window.onload = function () {
var pBox = document.getElementById('pBox');
// 拿到所有的p标签都绑定点击事件
// 获取所有P标签,pList是一个伪数组
var pList = pBox.getElementsByTagName('p');
for (var i = 0; i < pList.length; i++) {
pList[i].onclick = pClickHandler;
}
};
// 段落标签点击的事件处理程序
function pClickHandler(e) {
e = e || window.event;
// 判断是否按下了键盘的ctrl键
if (e.ctrlKey) {
// 多选
this.style.backgroundColor = 'silver';
} else {
var pBox = document.getElementById('pBox');
// 拿到所有的p标签都绑定点击事件
// 获取所有P标签,pList是一个伪数组
var pList = pBox.getElementsByTagName('p');
// 单选
// 首先让所有的标签都变为白色
for (var i = 0; i < pList.length; i ++) {
pList[i].style.backgroundColor = "#fff";
}
this.style.backgroundColor = 'silver';
}
}
})();
</script>
</body>
</html>
mousewheel（滚轮事件）
键盘和文本事件
案例: 43-键盘事件
<!DOCTYPE html>
<html lang="en">
<!-- onkeydown onkeypress onkeyup -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/documentReady.js"></script>
<title>键盘事件</title>
</head>
<body>
<input type="text" name="" id="txt">
<script>
(function () {
document.myReady(function () {
// 可以进行绑定事件
var txt = document.getElementById('txt');
// 键盘上的键只要被按下就会触发keydown事件.
// keydown 可以应用于所有的dom对象, 比如p标签,div标签
// 可以监听到功能键的按下事件比如: ctrl shift alt 方向键 f1 esc
// 如果一致按着键不放开,那么会一直触发
txt.onkeydown = function (e) {
e = e || window.event;
console.log("keydown -> keyCode:" + e.keyCode + "keydown -> charCode:" + e.charCode);
}
// 可以一直触发事件,智能监听,可打印的字符键a,退格键就不行
txt.onkeypress = function (e) {
e = e || window.event;
console.log("keypress -> keyCode:" + e.keyCode + "keypress -> charCode:" + e.charCode);
}
txt.onkeyup = function (e) {
e = e || window.event;
console.log("keyup -> keyCode:" + e.keyCode + "keyup -> charCode:" + e.charCode);
}
});
})();
</script>
</body>
</html>案例: 44-文本框获得焦点案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本框获得焦点案例</title>
<script src="../js/documentReady.js"></script>
</head>
<body>
<div class="wrap">
<div id="box">
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="text" id="txt3">
</div>
<input type="button" value="提交" id="btn">
</div>
<script>
(function () {
document.myReady(function () {
// 页面加载完成后执行的.
// 首先获取所有的input标签,绑定keyup事件
var box = document.getElementById('box');
var inputList = box.getElementsByTagName('input');
for (var i = 0; i < inputList.length; i++) {
(function (j) {
inputList[j].onkeyup = function (e) {
// 检测文本框的输入的文本是否达到了3个长度,到了就让下一个文本框获得焦点
if (this.value.length >= 3) {
// 让下一个文本获得焦点
if (j <= 1) {
inputList[j + 1].focus();
} else {
document.getElementById('btn').focus();
}
}
};
})(i);
}
});
})();
</script>
</body>
</html>
案例: 45-文本框change事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>change事件</title>
<script src="../js/documentReady.js"></script>
</head>
<body>
用户名: <input type="text" id="txtName">
<input type="button" value="提交">
<script>
(function () {
document.myReady(function () {
var txtName = document.getElementById('txtName');
txtName.onchange = function () {
// 判断文本框的长度伪6-8, 不管了. 如果不是则提醒用户,并让当前文本框继续获得焦点
if (this.value.length > 8 || this.value.length < 6) {
alert('用户名必须是6-8个字符!!!!!!!!');
}
}; // end for onchange
}); // end for myReady
})();
</script>
</body>
</html>
高级事件
案例: 46-事件高级封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件高级封装</title>
<script src="../js/documentReady.js"></script>
<script src="../js/EventUtil.js"></script>
</head>
<body>
<input type="button" value="点击" id="btn">
<script>
(function () {
document.myReady(function () {
// 拿到按钮
var btn = document.getElementById('btn');
EventUtil.addEvent(btn, 'click', function (e) {
console.log(e);
console.log(this == btn);
});
});
})();
</script>
</body>
</html>案例: 47- 事件委托案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件委托案例</title>
<script src="../js/EventUtil.js"></script>
<script src="../js/documentReady.js"></script>
</head>
<body>
<ul class="list" 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>标签&11</li>
<li>标签&22</li>
<li>标签&33</li>
<li>标签&44</li>
<li>标签&55</li>
<li>标签&66</li>
<li>标签&77</li>
<li>标签&88</li>
<li>标签&99</li>
<li>标签&00</li>
<li>标签&000</li>
</ul>
<script>
// list中的li标签个数是不确定的,可能是动态添加,也可能动态减少
// li的标签非常多,可能达到100个!!!
(function () {
document.myReady(function () {
var ulList = document.getElementById('list');
var liList = ulList.getElementsByTagName('li');
// 问题:
// 1.动态添加的li标签,是没有绑定上事件处理程序
for (var i = 0; i < liList.length; i ++) {
EventUtil.addEvent(liList[i], 'click', function(e) {
alert(this.innerHTML);
});
}
// 2.li标签非常多时候,产生很多绑定事件的信息,浪费大量的内存和cpu计算.
// 解决上面的问题
// 1.事件是有冒泡的
// 2.弹出事件源对象的内容. e.target || e.srcElement
// 3.getElementsByTagName 方法返回的伪数组 是一个动态的, 会自动更新
// 解决思路: 子元素的事件,委托父容器来进行注册和处理
EventUtil.addEvent(ulList, 'click', function (e) {
// 子元素被点击的时候,也会冒泡到这里来
var target = EventUtil.getTarget(e);
// 如果是点击了父容器自己. 那就什么都不干.
if (target == ulList) {
return;
}
// 如果点击的是子元素
alert(target.innerHTML);
});
}); // ready
})();
</script>
</body>
</html>源代码下载地址: https://github.com/godlikecheng/JavaScript_complete
上一篇: JS - 事件对象 - 03
下一篇: JS - Node节点 - 05