事件对象

事件对象:

　　当事件的响应函数而被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,当事件对象中封装了当前事件相关的一切信息,比如鼠标的坐标,键盘哪个键按下等

clientX\clientY 用于获取鼠标在当前可见窗口的坐标
pageX\pageY 可以获取鼠标对于当前页面的坐标,IE8不支持

事件冒泡

　　指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会触发

　　取消冒泡: cancelBubble设置为true

事件委派

　　指将事件统一绑定给元素的共同祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件

事件委派是利用了冒泡,听过委派可以减少事件的绑定次数,提高程序性能

 var btn = document.getElementById("btn")
 var ul = document.getElementById("ul")

      btn.onclick = function() {
        var li = document.createElement("li");
        li.innerHTML = '<a href="javascrit:;" class="link">新链接</a>';
        ul.appendChild(li);
      }
      /*
      *事件委派
      */
      ul.onclick = function () {
        var event = event || window.event;
        //li的绑定
        if(event.target.className == "link"){
          alert("我是ul给li的委派事件");
        }
        return false;
      }

<button id="btn">添加新链接</button>
  <ul id="ul">
    <li><a href="javascrit:;" class="link">超链接</a></li>
    <li><a href="javascrit:;" class="link">超链接</a></li>
    <li><a href="javascrit:;" class="link">超链接</a></li>
  </ul>

事件绑定:

addEventListener()

通过这个方法也可以为元素绑定响应函数

参数

事件的字符串,不要on
回调函数,当事件触发时该函数会被调用
是否在捕获阶段触发事件,需要一个布尔值,一般传false

使用这个方法可以同时为一个元素的相同事件绑定多个响应函数,按照事件绑定响应的函数顺序执行

不支持IE8以下浏览器

 /*  
      addEventListener()
        -通过这个方法也可以为元素绑定响应函数
        -参数
          1. 事件的字符串,不要on
          2. 回调函数,当事件触发时该函数会被调用
          3. 是否在捕获阶段触发事件,需要一个布尔值,一般传false
        使用这个方法可以同时为一个元素的相同事件绑定多个响应函数,按照事件绑定响应的函数顺序执行
        addEventListener()中的this是绑定事件的对象
      */
      var btn2 = document.getElementById("btn2")
      btn2.addEventListener("click", function() {
        alert("btn2绑定的第一个事件");
      }, false);

      btn2.addEventListener("click", function() {
        alert("btn2绑定的第二个事件");
      }, false);
      /* 
      attachEvent()
        -在IE8中可以使用attachEvent()来绑定事件
        -参数:
            1. 事件的字符串,要on
            2. 回调函数
        使用这个方法可以同时为一个元素的相同事件绑定多个响应函数,按照事件绑定响应的函数倒序执行
        attachEvent()中的this是Window
       */
      //  btn2.attachEvent("onclick", function() {
      //   alert("btn2绑定的第三个事件");
      //  });


       /* 

       事件绑定
        1. obj 要绑定事件的对象
        2. eventStr 事件的字符串(不要on)
        3. callback  回调函数
        */
        function bind(obj, eventStr, callback) {
          // 大部分浏览器
          if(obj.addEventListener) {
            obj.addEventListener(eventStr, callback, false);
          }else {
            /* this是谁由调用方式决定
              callback.call(obj)
               */
              //  IE8及以下
              obj.attachEvent("on"+eventStr, function() {
                callback.call(obj)
              })
          }
        }

        bind(btn2, "click", function() {
          alert("btn2绑定的第四个事件");
        })

事件的传播

关于事件的传播网景公司和微软公司有不同的理解

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段

捕获阶段
1. 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
目标阶段
1. 事件捕获到目标元素，捕获结束开始, 在目标元素上触发事件
冒泡阶段
1. 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
注：IE8及以下的浏览器中没有捕获阶段

拖拽事件

开始拖拽, 当鼠标在被拖拽元素上按下 onmousedown
拖拽, 当鼠标移动时, 被拖拽元素一起移动 onmousemove
结束拖拽, 当鼠标松开时, 被拖拽元素被固定在当前位置 onmouseup

#box3 {
      background-color: yellowgreen;
      /* 要拖得元素position要设置为绝对定位 */
      position: absolute;
      /* 光标为拖得效果 */
      cursor: move;
    }


var box3 = document.getElementById("box3");// 开始拖拽
      /*  也就是整个文档通用，应该使用document对象而不是drag对象
        (否则，采用drag对象时物体只能往右方或下方移动) 
     */ 
      box3.onmousedown = function (event) {
        event = event || window.event;//兼容IE浏览器

        var diffX = event.clientX - box3.offsetLeft;
        var diffY = event.clientY - box3.offsetTop;
        /* 
        setCapture函数的作用就是将后续的mouse事件都发送给这个对象，
        releaseCapture就是将鼠标事件还回去，
        由 document、window、object之类的自行来处理。
        这样就保证了在拖动的过程中，不会由于经过了其它的元素而受到干扰

        只有IE支持,在firework使用不会报错,但是在Chrome调用会报错
        所以要判断
         */
        if(typeof box3.setCapture !== 'undefined'){
          box3.setCapture(); 
        }


        document.onmousemove = function (event) {
          // event = event || window.event;//兼容IE浏览器

          var left = event.clientX - diffX;
          var top = event.clientY - diffY;

          box3.style.left = left + "px"
          box3.style.top = top + "px"
        };

        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          // 兼容低版本IE
          if(typeof box3.releaseCapture != 'undefined'){
          box3.releaseCapture(); 
        }
        }
      }

滚轮事件

onmousewheel 滚轮滚动事件
滚动方向
1. ```
event.wheelDelta
```
  1. 向上正值
  2. 向下负值
2. ```
event.detail
```
  1. 向上负值
  2. 向下正值

 /* 滚轮滚动 */
      box4.onmousewheel = function(event) {
        event = event || window.event;
       /*  
         判断滚动方向
          event.wheelDelta
          向上 正值
          向下 负值

          火狐中:event.detail
          向上 负值
          向下 正值

       */
      //  向上滚
        if(event.wheelDelta > 0 || event.detail < 0) {
          box4.style.height = box4.clientHeight - 10 + "px"
        } else {
          box4.style.height = box4.clientHeight + 10 + "px"
        }
        //阻止默认行为
        event.preventDefault();
      }

键盘事件:

keydown()事件
1. 在键盘上按下某个键时触发。
2. 如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
keyup事件
1. 释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。
keypress事件
1. 按下某个键盘键并释放时触发
2. 如果按住某个键，会不断触发该事件。
3. 该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。

 /* 
    按键事件
        keyCode   通过可以keyCode获取按键编码
          数字(0-9):  编码48-57 
        altKey    
        ctrlKey   
        shiftKey   判断alt Ctrl shift 按键是否被按下
     */
     var noNumbIn =  document.getElementsByClassName("noNumb")[0];

     document.onkeydown = function(event) {
      console.log(event.keyCode)
      // 数字不能输入
       if(event.keyCode >= 48 && event.keyCode <= 57){
        //  阻止默认输入行为
         return false;
       }
      
     }

posted @ 2020-09-19 19:43 CHUNYIN 阅读(339) 评论(0) 收藏举报

刷新页面返回顶部

CHUNYIN