WebAPI基础（四）

WebAPI基础（四）知识点

事件

事件源
事件类型
事件处理函数

当 < > 被 < > 时，效果是 < >

事件绑定方式

事件绑定、事件监听，事件注册，事件添加都是同一个意思

快速绑定

事件源.on事件类型 = 事件处理函数

事件监听函数

事件源.addEventListener('事件类型', 事件处理函数);

1. IE的事件函数

事件源.attachEvent('on事件类型', 事件处理函数);

事件类型

解绑事件，移除事件

解绑也有三种。

快速解绑

事件源.on事件类型 = null

事件监听函数

事件源.removeEventListener('事件类型', 事件处理函数);

IE的事件函数

事件源.detachEvent('on事件类型', 事件处理函数);

列表渲染

WebAPI基础（四）

浏览器查看元素

WebAPI基础（四）

案例源码

<!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>