阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 事件基础

      事件基础

      事件是什么:就是一件事,包括硬件的一些行为;

      • click
      • mouseover
      • mouseout
      • keydown
      • keyup

      什么是绑定:事件监听;

      具体某一个事件和事件整体的区别:一件事,和一套事件系统

      什么是事件对象:实现事件系统,事件的机制,浏览器自己有一套机制;类似人的神经系统,这个内置第机制就是事件对象;

      事件演示:

      var oDiv=document.getElementById("div1");
      
      oDiv.onmousemove=function(event){
          //直接把一个方法赋值给一个事件属性.这个方法运行的时候,浏览器会自动的给这个方法传一个对象;这个对象就是事件对象;
          event=event||window.event;//IE下的事件对象,是一个全局的event;这种的是兼容写法;
          event.clientX;//鼠标的X轴坐标;
          event.clientY;//鼠标的Y轴坐标;
          //时间有即时行;
          event.type;//事件类型;只和当时发生的类型有关;只能同时处理一个事件;
          this.innerHTML="X:"+event.clientX+" Y:"+event.clientY;
      };
      document.documentElement.onkeydown= function (event) {
          event=event||window.event;
          oDiv.innerHTML=event.keyCode;
      }
      
      
      //pageX;pageY;鼠标距离文档(当前页面的)最上角的距离;不支持IE678;
      //clientX;clientY;指的是浏览器;
      //onmouseover和onmouseenter区别;over会传播,enter是不传播的;
      //onmouseout和onmouselive区别;
      

      取消冒泡的方法;

           //阻止事件传播/冒泡的方法;
      
      this.appendChild(ele);
      ele.onmouseover=function(event){
          event=event||window.event;
          if(event.stopPropagation){
              event.stopPropagation();//标准留言器中禁止冒泡;
              // preventDefault中文意思是阻止默认行为;
          }else{
              e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
          }
      }
      

      onmouseenter的优势;

      // onmouseover和onmouseenter很像,但是可以避免;onmouseover的一些问题;
      
      // 如果是从父元素到子元素,不会触发onmouseover;
      // 如果是从子元素到父元素,也不会触发onmouseover;
      

      事件的冒泡和捕获

       function fn(){
      
          console.log(this.nodeName)
      }
      eles=document.documentElement.getElementsByTagName("*");
      for(var i=0;i<eles.length;i++){
          //eles[i].addEventListener("click",fn,false);//SPAN、LI、UL、DIV、BODY
          eles[i].addEventListener("click",fn,true);//BODY、DIV、UL、LI、SPAN
      }
      

      冒泡和捕获是事件的两个阶段,我们可以在不同阶段来绑定(监听)处理方法; 如果用false是冒泡,如果是true是捕获; 一般都是用false来处理的

      事件委托:

      document.documentElement.onclick=function(event){
      
          event=event||window.event;
          //事件源委托给documentElement
          target=event.target||event.srcElement;//事件源
          console.log(target.nodeName)
      }
      

      下面是具体应用

      document.documentElement.onclick=function(event){
      
          event=event||window.event;
          //事件源委托给documentElement
          target=event.target||event.srcElement;//事件源
          console.log(target.nodeName)
      };
      //下面是动态创建的
      var p=document.createElement("p");
      document.body.appendChild(p);
      p.innerHTML="222312312312";
      /*事件委托也可以实现动态绑定*/
      /*所有的事件,都可以用事件委托来实现;时间委托是一个高级技巧*/
      目录
      本文目录
      目录