事件对象

事件对象: 

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

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

事件冒泡

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

  取消冒泡: cancelBubble设置为true

事件委派

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

  1. 事件委派是利用了冒泡,听过委派可以减少事件的绑定次数,提高程序性能
  2.  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()

 通过这个方法也可以为元素绑定响应函数
        参数
  1. 事件的字符串,不要on
  2. 回调函数,当事件触发时该函数会被调用
  3. 是否在捕获阶段触发事件,需要一个布尔值,一般传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. 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
  2. 目标阶段
    1. 事件捕获到目标元素,捕获结束开始, 在目标元素上触发事件
  3. 冒泡阶段
    1. 事件从目标元素向他的祖先元素传递依次触发祖先元素上的事件

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

 

 拖拽事件

  1. 开始拖拽,  当鼠标在被拖拽元素上按下  onmousedown
  2. 拖拽,  当鼠标移动时, 被拖拽元素一起移动  onmousemove
  3. 结束拖拽,  当鼠标松开时, 被拖拽元素被固定在当前位置 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(); } } }

滚轮事件

  1. onmousewheel 滚轮滚动事件 
  2. 滚动方向
    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();
      }

键盘事件:

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