WebAPI基础（四）
WebAPI基础（四）知识点
事件
- 事件源
- 事件类型
- 事件处理函数
当 < > 被 < > 时，效果是 < >
事件绑定方式
事件绑定、事件监听，事件注册，事件添加 都是同一个意思
- 快速绑定
事件源.on事件类型 = 事件处理函数
- 事件监听函数
事件源.addEventListener('事件类型', 事件处理函数);
-
- IE的事件函数
事件源.attachEvent('on事件类型', 事件处理函数);
事件类型
解绑事件，移除事件
解绑也有三种。
- 快速解绑
事件源.on事件类型 = null
- 事件监听函数
事件源.removeEventListener('事件类型', 事件处理函数);
- IE的事件函数
事件源.detachEvent('on事件类型', 事件处理函数);
列表渲染
浏览器查看元素
案例源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url("images/bg.gif");
font: 12px "simsun";
}
.content {
width: 960px;
height: 627px;
margin: 0 auto;
background: url("images/content_bg.jpg");
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.tip {
width: 227px;
position: absolute;
top: 100px;
left: 200px;
}
.tip-h {
padding-top: 50px;
background: url("images/tip1_h.gif") no-repeat;
cursor: default;
}
.text {
float: left;
padding-left: 10px;
}
.close {
float: right;
margin-right: 10px;
}
.tip-m {
min-height: 40px;
padding: 0 10px;
padding-top: 10px;
background: url("images/tip1_c.gif");
}
.tip-f {
height: 53px;
background: url("images/tip1_f.gif");
padding-top: 20px;
}
.icon {
float: left;
padding-left: 10px;
}
.name {
float: right;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="content" id="content">
<!-- 这里是开始 -->
<div class="tip">
<div class="tip-h clearfix" title="双击关闭纸条">
<div class="text">第[49568]条 2016-02-17 22:51:52</div>
<div class="close" title="关闭纸条">x</div>
</div>
<div class="tip-m">努力学习，高薪就业</div>
<div class="tip-f clearfix">
<div class="icon">
<img alt="" src="images/bpic_1.gif"/>
</div>
<div class="name">水货</div>
</div>
</div>
<!-- 这里是结束 -->
</div>
</body>
</html>
<script>
var msgArr = [
{
"id": 1,
"name": "mahu",
"content": "今天你拿苹果支付了么",
"time": "2016-02-17 00:00:00"
},
{"id": 2, "name": "haha", "content": "今天天气不错，风和日丽的", "time": "2016-02-18 12:40:00"},
{"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
{"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
{"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
{
"id": 6,
"name": "哎呦哥哥.",
"content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。",
"time": "2016-02-22 01:30:00"
},
{
"id": 7,
"name": "没猴哥，不春晚",
"content": "班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……",
"time": "2016-02-22 01:30:00"
},
{"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，", "time": "2016-02-22 01:30:00"},
{"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看！！？答：朋友圈。。。", "time": "2016-02-22 02:30:00"}
];
/*
* 功能：
* 1 动态渲染纸条列表
* 2 所有纸条的位置是随机的
* 3 单击纸条，当前纸条显示在最前
* 4 双击纸条，关闭当前字条 ondblclick
* 5 点击叉叉，关闭当前字条
**/
var content = document.querySelector('#content');
/* msgArr 是数据 ，htmlArr 放节点的 */
/* 1. 创建数组 */
var htmlArr = [];
/* 2. 遍历数据，拼接节点，并添加到数组中 */
for (var i = 0; i < msgArr.length; i++) {
var obj = msgArr[i];
/* 往空数组添加数据 */
htmlArr.push('<div class="tip">\n' +
' <div class="tip-h clearfix" title="双击关闭纸条">\n' +
' <div class="text">第[' + obj.id + ']条 ' + obj.time + '</div>\n' +
' <div class="close" title="关闭纸条">x</div>\n' +
' </div>\n' +
' <div class="tip-m">' + obj.content + '</div>\n' +
' <div class="tip-f clearfix">\n' +
' <div class="icon">\n' +
' <img alt="" src="images/bpic_1.gif"/>\n' +
' </div>\n' +
' <div class="name">' + obj.name + '</div>\n' +
' </div>\n' +
' </div>');
}
/* 3. 数组变字符串，并添加到 content 中 */
content.innerHTML = htmlArr.join('');
/* 2 查找所有纸条元素*/
var tips = document.querySelectorAll('.tip');
/* 3.1 准备 num 变量，管理层级 */
var num = 0;
/* 2.1 遍历所有纸条元素 */
for (var i = 0; i < tips.length; i++) {
/* 2 所有纸条的位置是随机的 */
/* 2.1 生成两个随机数 */
var x = Math.floor(Math.random() * 1100);
var y = Math.floor(Math.random() * 440);
// console.log(x, y);
/* 2.2 把随机数赋值给每个元素 style 的 left 和 top */
tips[i].style.left = x + 'px';
tips[i].style.top = y + 'px';
/* 3 单击纸条，当前纸条显示在最前 */
tips[i].onclick = function () {
/* 每次点击 num 加一，在赋值给 zIndex 就能让当前的层级在最前 */
this.style.zIndex = ++num;
};
/* 4 双击纸条，关闭当前字条 ondblclick */
tips[i].ondblclick = function () {
/* 当前纸条隐藏 */
this.style.display = 'none';
}
}
/* 5 点击叉叉，关闭当前字条 */
var closes = document.querySelectorAll('.tip .close');
/* 循环遍历所有叉叉按钮 */
for (var i = 0; i < closes.length; i++) {
/* 给所有叉叉按钮添加单击事件 */
closes[i].onclick = function () {
/* 从当前 找 父级 的 父级 才是 tip 纸条，设置隐藏 */
this.parentNode.parentNode.style.display = 'none';
}
}
</script>
事件
事件 3 要素
- 事件源
- 事件类型
- 事件处理函数
三种事件绑定方式
- 用<赋值>的方式
事件源.on事件类型 = 事件处理函数
优点：简单，快速，兼容性最好
缺点：由于是赋值的方式绑定的事件，所以会出现覆盖问题。
- 调用添加事件监听<函数>
事件源.addEventListener(事件类型,事件处理函数);
优点：不会出现事件覆盖问题。
缺点：写法复杂一些，IE8不兼容。（ window 7 电脑系统自带的浏览器是 IE8 ）
- 调用附加事件<函数>
事件源.attachEvent(on事件类型,事件处理函数);
优点：IE8及以下的浏览器绑定事件。
缺点：所有主流浏览器都不支持。
事件兼容写法
思路分析：
addEventListener 支持主流浏览器及 IE9 以上浏览器，
attachEvent 支持 IE8及以下的浏览器。
两种事件绑定方式不兼容，所以要通过分支语句检测浏览器到底支持哪个方法(函数)，
如果支持 addEventListener 就通过 addEventListener 绑定，不支持就用 attachEvent 绑定(IE低版本浏览器)。
注意：函数，对象，数组，非空字符串，非0数字，隐式转换后都为 true
隐式转换为假的 6 种情况：'' 0 NaN false undefined null
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="btn" type="button" value="按钮">
</body>
</html>
<script>
/* 封装事件绑定兼容函数，开放三个参数：事件源，事件类型，事件处理函数 */
function myEvent(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn);
} else {
element.attachEvent('on' + type, fn);
}
}
var btn = document.getElementById('btn');
/* 调用传入三个参数：事件源，事件类型，事件处理函数 */
myEvent(btn, 'click', function () {
alert('兼容写法1');
});
/* 再调用 */
myEvent(btn, 'click', function () {
alert('兼容写法2');
});
</script>
三种事件解绑方式
- 用<赋值>的方式
事件源.on事件类型 = null
- 调用移除事件监听<函数>
事件源.removeEventListener(事件类型,事件处理函数名称);
- 调用分离事件<函数>
事件源.detachEvent(on事件类型,事件处理函数名称);
事件对象
JS所有的事件都有事件对象，如果要获取事件对象，获取事件对象需要两个基本步骤
- 在事件处理函数传入 参数，常用参数名称 event / ev / e
- 在事件处理函数内部即可使用。
事件对象属性
|
事件对象属性 |
描述 |
备注 |
|
keyCode |
返回按键编码 |
回车键编码是 13 |
|
ctrlKey / altKey / shiftKey |
按下 ctrl / alt / shift 键的时候返回 true |
可用于键盘组合键判断 |
|
clientX / clientY |
返回鼠标在<窗口>的坐标值 |
可配合固定定位，基于窗口定位 |
|
pageX / pageY |
返回鼠标在<页面>的坐标值 |
可配合绝对定位，基于页面定位 |
|
target |
||
|
cancelBubble |
||
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发布微博</title>
</head>
<body>
<input id="btn" type="button" value="发布微博">
<input id="txt" type="text">
<ul id="list">
<li>本来有的微博内容</li>
</ul>
</body>
</html>
<script>
/*
/!* 查找元素 *!/
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var list = document.getElementById('list');
/!* 当 < 发布按钮 > 被 < 点击 > 时，效果是 < 1.获取文本框的内容，2. 添加到列表中 > *!/
btn.onclick = function () {
/!* 2. 调用 发布新闻的函数 release *!/
release();
};
/!* 1. 把新闻发布功能抽离出来，起个函数名称叫 release *!/
function release() {
/!* 1.获取文本框的内容，.trim()去除首尾空格 *!/
var str = txt.value.trim();
// console.log(str);
/!* 4. 在获取到字符串后，就要进行 是否为 空的判断，如果空，给出提示，并且不能发布微博 *!/
if (str === '') {
alert('不允许发布空微博...');
/!* return 跳出函数，break 是跳出循环 *!/
return;
}
/!* 2. 创建新的 li 节点 *!/
var tag = document.createElement('li');
/!* 2.1 把文本框的字符串添加到 li 中 *!/
tag.innerText = str;
// console.log(tag);
/!* 3. 把节点添加到对应的父级元素中 *!/
list.appendChild(tag);
/!* 用户体验，发布后清空输入框，重新赋值为 '' *!/
txt.value = '';
}
txt.onkeyup = function (ev) {
/!* 如果获取到当前的按键编码是 13，说明是回车键 *!/
if (ev.keyCode === 13) {
alert('你按下了回车键，发布新闻...');
/!* 3. 回车键发布也新闻 *!/
release();
}
}
*/
</script>