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>