Web API学习笔记(四)

1.事件
addEventListener

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <!-- <script src="user1.js"></script>
  <script src="user2.js"></script> -->

  <script>
    var btn = document.getElementById('btn');

    // 注册事件的第一种方式
    // 无法给同一个对象的同一个事件注册多个事件处理函数
    btn.onclick = function () {

    }

    btn.onclick = function () {

    }

    // 浏览器兼容性问题  IE9以后才支持
    btn.addEventListener('click', function () {
      alert('hello world');
    })

    btn.addEventListener('click', function () {
      alert('hello itheima');
    })

    // 注册事件的第三种方式  attachEvent
    // 浏览器兼容性问题  IE的老版本特有的方法  IE6-10支持
    
  </script>
</body>
</html>

attachEvent

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <script>
    var btn = document.getElementById('btn');

    // 第一个参数,事件的名称前要加 on
    btn.attachEvent('onclick', function () {
      alert('hello world');
    });

    btn.attachEvent('onclick', function () {
      alert('hello itheima');
    });
  </script>
</body>
</html>

处理兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <script>
    var btn = document.getElementById('btn');

    addEventListener(btn, 'click', function () {
      alert('hello world');
    });

    addEventListener(btn, 'click', function () {
      alert('hello itheima');
    });


    // 处理注册事件的兼容性问题
    // eventName, 不带on,  click  mouseover  mouseout
    function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
      }
    }
  </script>
</body>
</html>

移除事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <script>
    var btn = document.getElementById('btn');
    // btn.onclick = function () {
    //   alert('hello world');
    //   // 移除事件
    //   btn.onclick = null;
    // }
    // 
    // 如果想要移除事件,注册事件的时候不能使用匿名函数
    // btn.addEventListener('click', function () {
    //   alert('hello world'); 
    //   // 移除事件
    //   btn.removeEventListener('click', )
    // });
    // 
    // function btnClick () {
    //   alert('hello world');
    //   // 移除事件
    //   btn.removeEventListener('click', btnClick);
    // }
    // btn.addEventListener('click', btnClick);
    // 
    // chrome 中不支持attachEvent。 IE9-10
    function btnClick() {
      alert('hello world');
      // 移除事件
      btn.detachEvent('onclick', btnClick);
    }
    btn.attachEvent('onclick', btnClick);
  </script>
</body>
</html>

处理移除事件兼容性问题

/ 处理注册事件的兼容性问题
// eventName, 不带on,  click  mouseover  mouseout
function addEventListener(element, eventName, fn) {
  // 判断当前浏览器是否支持addEventListener 方法
  if (element.addEventListener) {
    element.addEventListener(eventName, fn);  // 第三个参数 默认是false
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, fn);
  } else {
    // 相当于 element.onclick = fn;
    element['on' + eventName] = fn;
  }
}

// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
  } else {
    element['on' + eventName] = null;
  }
}

addEventListener 的第三个参数的作用
addEventListener 的第三个参数为false的时候 : 事件冒泡
addEventListener 的第三个参数为true的时候 : 事件捕获
attachEvent只有两个参数, 只有事件冒泡
box.attachEvent(‘onclick’, function () {
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="box2">
      <div id="box3">
      </div>
    </div>
  </div>
  <script>
    // addEventListener 的第三个参数的作用
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');

    var array = [box1, box2, box3];

    // addEventListener 的第三个参数为false的时候 : 事件冒泡
    // addEventListener 的第三个参数为true的时候 :  事件捕获
    
    // 事件的三个阶段:
    // 第一个阶段: 捕获阶段
    // 第二个阶段: 执行当前点击的元素
    // 第三个阶段: 冒泡阶段
    // for (var i = 0; i < array.length; i++) {
    //   array[i].addEventListener('click', function () {
    //     console.log(this.id);
    //   }, true);
    // }

    // document.body.addEventListener('click', function () {
    //   console.log('body');
    // }, true);


    // box.onclick  只有事件冒泡
    // box.attachEvent
    // attachEvent只有两个参数, 只有事件冒泡
    // box.attachEvent('onclick', function () {
    // });
    

    for (var i = 0; i < array.length; i++) {
      var box = array[i];
      box.onclick = function () {
        console.log(this.id);
      }
    }
    document.body.onclick = function () {
      console.log('body');
    }

    document.onclick = function () {
      console.log('document');
    }
  </script> 
</body>
</html>

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul id="ul">
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
  </ul>
  <script>
    // 事件委托: 原理事件冒泡
    var ul = document.getElementById('ul');
    ul.onclick = function (e) {
      // e 事件参数(事件对象): 当事件发生的时候,可以获取一些和事件相关的数据
      // 获取到当前点击的li
      // e.target 是真正触发事件的对象
      // console.log(e.target);
      // 让当前点击的li高亮显示
      e.target.style.backgroundColor = 'red';
    }
  </script>
</body>
</html>

事件对象
e就是事件对象
在老版本的IE中获取事件对象的方式 window.event
处理事件对象的浏览器兼容性
e = e || window.event;

e.currentTarget 事件处理函数所属的对象this

e.target 获取真正触发事件的对象 浏览器兼容问题
在老版本的IE中 srcElement
处理兼容性问题
var target = e.target || e.srcElement;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <div id="box1">
    <div id="box2">
      <div id="box3">
      </div>
    </div>
  </div>
  <script>
    // 通过事件对象,可以获取到事件发生的时候和事件相关的一些数据
    
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3'); 
    var array = [box1, box2, box3];
    for (var i = 0; i < array.length; i++) {
      var box = array[i];
      box.onclick = function (e) {
        e = e || window.event;
        // 事件的阶段
        console.log(e.eventPhase);
        // e.target 获取真正触发事件的对象
        var target = e.target || e.srcElement;
        console.log(target);
        // e.curentTarget   和this一样 获取事件处理函数所属的对象
        console.log(e.currentTarget);
        console.log(this);
      }
    }

     
    
    // var btn = document.getElementById('btn');
    // btn.onclick = function (e) {
    //   // DOM标准中,是给事件处理函数一个参数
    //   // e就是事件对象
    //   // 在老版本的IE中获取事件对象的方式  window.event
    //   // 
    //   // 处理事件对象的浏览器兼容性
    //   e = e || window.event;

    //   // 事件的阶段:1  捕获阶段   2  目标阶段  3 冒泡阶段    了解
    //   // console.log(e.eventPhase);
      
    //   // e.target  获取真正触发事件的对象  浏览器兼容问题
    //   // 在老版本的IE中  srcElement
    //   // 处理兼容性问题
    //   var target = e.target || e.srcElement;
    //   console.log(e.target);

    //   // 
    //   // e.currentTarget  事件处理函数所属的对象this
    //   console.log(e.currentTarget);
    // }
  </script>
</body>
</html>

e.type点击类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      margin: 100px;
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box">
  </div> 
  <script>
    var box = document.getElementById('box');
    // box.onclick = function (e) {
    //   e = e || window.event;
    //   // 获取事件名称
    //   console.log(e.type);
    // }
    
    box.onclick = fn;
    box.onmouseover = fn;
    box.onmouseout = fn;

    function fn(e) {
      e = e || window.event;
      switch (e.type) {
        case 'click': 
          console.log('点击box');
          break;
        case 'mouseover': 
          console.log('鼠标经过box');
          break;
        case 'mouseout': 
          console.log('鼠标离开box');
          break;
      }
    }

  </script>
</body>
</html>

事件获取坐标

获取的鼠标在浏览器的可视区域的坐标
e.clientX
e.clientY

鼠标在当前页面的位置
e.pageX
e.pageY

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      height: 1000px;
    }
    #box {
      margin: 100px;
      margin-top: 500px;
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box">
  </div> 
  <script>
    var box = document.getElementById('box');
    box.onclick = function (e) {
      e = e || window.event;

      // 获取的鼠标在浏览器的可视区域的坐标
      // console.log(e.clientX);
      // console.log(e.clientY);

      // 鼠标在当前页面的位置
      console.log(e.pageX);
      console.log(e.pageY);

    }

  </script>
</body>
</html>

图片跟着鼠标走案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      height: 1000px;
    }
    #ts {
      position: absolute;
    }
  </style>
</head>
<body>
  <img src="images/tianshi.gif" id="ts" alt="">
  <script>
    var ts = document.getElementById('ts');
    document.onmousemove = function (e) { 
      e = e || window.event;
      // ts.style.left = e.clientX - 10 + 'px';
      // ts.style.top = e.clientY - 10 + 'px';

      ts.style.left = e.pageX - 10 + 'px';
      ts.style.top = e.pageY - 10 + 'px';
    }
  </script>
</body>
</html>

获取页面滚动出去的距离
获取页面滚动距离的浏览器兼容性问题

输出页面滚动出去的距离
document.body.scrollLeft
document.body.scrollTop

documentElement 文档的根元素 html标签
document.documentElement

有些浏览器 是使用这两个属性来获取的
document.documentElement.scrollLeft
document.documentElement.scrollTop

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      height: 1000px;
    }
  </style>
</head>
<body>
  <script>
    // e.clientX/e.clientY   鼠标在可视区域中的位置
    // 
    // e.pageX/e.pageY       鼠标在页面中的位置 有兼容性问题  从IE9以后才支持
    
    // pageY = clientY + 页面滚动出去的距离

    document.onclick = function () {
      // // 输出页面滚动出去的距离
      // console.log(document.body.scrollLeft);
      // console.log(document.body.scrollTop);

      // // documentElement  文档的根元素  html标签
      // // console.log(document.documentElement);
      // // 有些浏览器 是使用这两个属性来获取的
      // console.log(document.documentElement.scrollLeft);
      // console.log(document.documentElement.scrollTop);

    }

    // 获取页面滚动距离的浏览器兼容性问题
    // 获取页面滚动出去的距离
    function getScroll() {
      var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      return {
        scrollLeft: scrollLeft,
        scrollTop: scrollTop
      }
    }

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      height: 1000px;
    }
  </style>
</head>
<body>
  <script src="common.js"></script>
  <script>
    // e.clientX/e.clientY   鼠标在可视区域中的位置
    // 
    // e.pageX/e.pageY       鼠标在页面中的位置 有兼容性问题  从IE9以后才支持
    
    // pageY = clientY + 页面滚动出去的距离

    document.onclick = function (e) {
      e = e || window.event;
      console.log(getPage(e).pageX);
      console.log(getPage(e).pageY);

    }

    // 获取鼠标在页面的位置,处理浏览器兼容性
    function getPage(e) {
      var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
      var pageY = e.pageY || e.clientY + getScroll().scrollTop;
      return {
        pageX: pageX,
        pageY: pageY
      }
    }



  </script>
</body>
</html>

获取盒子在页面上的位置
this.offsetLeft
this.offsetTop

获取鼠标在盒子中的位置案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    #box {
      width: 300px;
      height: 300px;
      border: 1px solid red;
      margin: 100px 10px 10px 100px;
    }
  </style>
</head>
<body>
  <div id="box">
    
  </div>
  <script src="common.js"></script>
  <script>
    var box = document.getElementById('box');
    box.onclick = function (e) {
      // 获取盒子在页面上的位置
      // console.log(this.offsetLeft);
      // console.log(this.offsetTop);

      e = e || window.event;
      // 获取鼠标在盒子中的位置 = 鼠标的坐标 - 盒子的坐标
      // var x = e.pageX
      var x = getPage(e).pageX - this.offsetLeft;
      var y = getPage(e).pageY - this.offsetTop;
      console.log(x);
      console.log(y);

    }
  </script>
</body>
</html>

取消默认行为的执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <a id="link" href="http://www.baidu.com">baidu</a>
  <script>
    var link = document.getElementById('link');
    link.onclick = function (e) {
      alert('hello');

      // 取消默认行为执行
      // return false;   
      
      // DOM标准方法
      // e.preventDefault();

      // IE的老版本,非标准方式
      // e.returnValue = false;
    }
  </script>
</body>
</html>

阻止冒泡
取消冒泡 非标准的方式 老版本的IE支持
e.cancelBubble = true;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="box2">
      <div id="box3">
      </div>
    </div>
  </div>
  <script>
    // 事件冒泡
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');

    var array = [box1, box2, box3];

    for (var i = 0; i < array.length; i++) {
      var box = array[i];
      box.onclick = function (e) {
        console.log(this.id);

        // Propagation 传播
        // 停止事件传播  取消冒泡
        // 标准的DOM方法
        // e.stopPropagation();
        
        // 取消冒泡  非标准的方式 老版本的IE支持
        e.cancelBubble = true;
      }
    }
   

  </script> 
</body>
</html>

键盘事件
keydown 键盘按下的时候
keyup 键盘弹起的时候

keydown 和 keyup的区别
keydown的时候我们所按的键还没有落入文本框
keyup键盘弹起的时候按的键已经落入文本框

e.keyCode 键盘码
按下后退键 8,删除一个字符
e.keyCode == 8

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    
  </script>
</head>
<body>
  <input id="txt" type="text">
  <script>
    // 键盘事件
    // keydown 键盘按下的时候
    // keyup   键盘弹起的时候
    // keydown 和 keyup的区别  keydown的时候我们所按的键还没有落入文本框
    // keyup键盘弹起的时候按的键已经落入文本框
    var txt = document.getElementById('txt');
    txt.onkeydown = function (e) {
      // 判断当前用户按下的键是否是数字
      e = e || window.event;

      // 如果e.keyCode 的值在 48-57 是数字
      // e.keyCode  键盘码
      // console.log(e.keyCode);
      // 按下后退键  8,删除一个字符 
      if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8) {
        // 非数字
        // 取消默认行为
        e.preventDefault();
        // return false;
      }


    }
  </script>
</body>
</html>
本课程详细讲解了以下内容:     1.jsp环境搭建及入门、虚拟路径和虚拟主机、JSP执行流程     2.使用Eclipse快速开发JSP、编码问题、JSP页面元素以及request对象、使用request对象实现注册示例     3.请求方式的编码问题、response、请求转发和重定向、cookie、session执行机制、session共享问题      4.session与cookie问题及application、cookie补充说明及四种范围对象作用域      5.JDBC原理及使用Statement访问数据库、使用JDBC切换数据库以及PreparedStatement的使用、Statement与PreparedStatement的区别      6.JDBC调用存储过程和存储函数、JDBC处理大文本CLOB及二进制BLOB类型数据      7.JSP访问数据库、JavaBean(封装数据和封装业务逻辑)      8.MVC模式与Servlet执行流程、Servlet25与Servlet30的使用、ServletAPI详解与源码分析      9.MVC案例、三层架构详解、乱码问题以及三层代码流程解析、完善Service和Dao、完善View、优化用户体验、优化三层(加入接口和DBUtil)     1 0.Web调试及bug修复、分页SQL(Oracle、MySQL、SQLSERVER)      11.分页业务逻辑层和数据访问层Service、Dao、分页表示层Jsp、Servlet      12.文件上传及注意问题、控制文件上传类型和大小、下载、各浏览器下载乱码问题      13.EL表达式语法、点操作符和中括号操作符、EL运算、隐式对象、JSTL基础及set、out、remove      14.过滤器、过滤器通配符、过滤器链、监听器      15.session绑定解绑、钝化活化      16.以及Ajax的各种应用      17. Idea环境下的Java Web开发
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页