JavaScript学习笔记——基础篇（６）--事件委托

最新推荐文章于 2022-12-08 16:43:19 发布

纳尼亚awsl

最新推荐文章于 2022-12-08 16:43:19 发布

阅读量264

点赞数

分类专栏： JS学习笔记文章标签： javascript js css html

本文链接：https://blog.csdn.net/heal_l/article/details/118337652

版权

JS学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript中的事件，包括事件三要素、鼠标事件、键盘事件、浏览器事件、表单事件以及事件的绑定和解绑方式。特别讨论了事件委托的概念和实现步骤，并展示了如何阻止浏览器默认行为。

摘要由CSDN通过智能技术生成

键盘事件（不是所有元素都可以触发键盘事件　window、ｄｏｃｍｅｎｔ、输入框）

事件委托：

事件

事件三要素：

事件源　　　　　　引发后续事件的元素节点
事件类型　　　　　比如：点击事件、鼠标移入事件等
事件处理函数　　　对该事件发生后的一系列操作

事件类型：

鼠标事件

ｃｌｉｃｋ　　　　　　　左键单击事件　（包括　一次按下　一次抬起）
ｄｂｃｌｉｃｋ　　　　　左键双击
ｃｏｎｔｅｘｔｍｅｎｕ　右击点击事件
ｍｏｕｓｅｄｏｗｎ　　　鼠标按下（包括是左键、右键、滚轮按下）
ｍｏｕｓｅｕｐ　　　　　鼠标抬起
ｍｏｕｓｅｍｏｖｅ　　　鼠标移动
ｍｏｕｓｅｅｎｔｅｒ　　鼠标移入
ｍｏｕｓｅｌｅａｖｅ　　鼠标移出
ｍｏｕｓｅｏｖｅｒ　　　鼠标移入
ｍｏｕｓｅｏｕｔ　　　　鼠标移出

键盘事件（不是所有元素都可以触发键盘事件　window、ｄｏｃｍｅｎｔ、输入框）

ｋｅｙｄｏｗｎ　　键盘按下事件
ｋｅｙｕｐ　　　　键盘抬起事件

浏览器事件

ｌｏａｄ　　　　　页面加载完毕
ｓｃｒｏｌｌ　　　页面滚动
ｒｅｓｉｚｅ　　　窗口尺寸变化
ｏｆｆｌｉｎｅ　　网络断开
ｏｎｌｉｎｅ　　　网络恢复

表单事件

ｆｏｃｕｓ　　　　获取焦点　　属于ｉｎｐｕｔ
ｂｌｕｒ　　　　　失去焦点　　属于ｉｎｐｕｔ
ｓｕｂｍｉｔ　　　提交事件　　属于ｆｏｒｍ表单
ｒｅｓｅｔ　　　　重复事件　　属于ｆｏｒｍ表单

绑定事件的方式：

直接绑定
ａｄｄＥｖｅｎｔＬｉｓｅｎｅｒ（＂事件类型＂，事件函数）　　可以添加多个事件函数

解绑事件：

ｄｏｍ　０级　　　将ｎｕｌｌ重新赋值给元素
ｄｏｍ　２级　　　ｒｅｍｏｖｅＥｖｅｎｔＬｉｓｅｎｅｒ（＂事件类型＂，事件函数）　　通过移出事件监听解绑函数是事件函数不能是匿名函数，否则无法执行该匿名函数地址

事件对象：（存储了一些事件发生时的信息）

arguments 保存了函数执行时传入的参数，与形参无关，和实参相关
事件函数在触发时会自动传入一个参数，这个参数就是事件对象(在IE低版本浏览器5-7中，事件处理函数不需要接受形参，而是用window.event)
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function(event){
//在低版本IE下，event时undifind ,转换为布尔值就是false.
      event = event || window.event;   //解决低版本浏览器兼容
      console.log(event);
    }
  </script>
鼠标事件对象

button 属性：表示我们按下的是哪个键（0 左键 1 滚轮 2右键）
获取鼠标位置：

        pageX pageY          参考点：页面左上角（表示实际在页面中的位置）

clientX clientY                参考点：视口左上角（表示在可视窗口中的位置）

        screenX   screenY        参考点：屏幕左上角

案例：元素拖拽
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style>
      div{
        width: 100px;
        height: 100px;
        background-color: #8B0000;
        position: absolute;
      }
    </style>
	</head>
	<body>
    <div id="box"></div>
	</body>
  <script>
//方法一
    var box = document.getElementById("box");
    box.onmousedown = function(){
       document.onmousemove = function(){
         box.style.left = event.pageX - box.offsetWidth/2 +"px";
         box.style.top = event.pageY - box.offsetHeight/2 +"px";
       }
    }
    box.onmouseup = function(){
       document.onmousemove = "";
    }

//方法二
// var box = document.getElementById("box");
    // var flage =false;
    // box.onmousedown = function(){
    //   flage = true;
    // }
    // box.onmouseup = function(){
    //   flage = false;
    // }
    // document.onmousemove = function(){
    //   if(flage){
    //     box.style.left = event.pageX - box.offsetWidth/2 +"px";
    //     box.style.top = event.pageY - box.offsetHeight/2 +"px";
    //   }
    // }

  </script>
</html>
键盘事件对象：主要判断我们按下的是哪个键

key属性：按下的是哪个键
keycode：按下的是哪个键 ,返回对应的编码
组合键：

事件委托：

步骤：

找到拥有共同事件类型，以及事件处理函数的元素节点
再找共同父节点
将事件绑定给父节点
在事件处理函数中：利用targrt判断是否是委托元素
符合条件则执行操作

案例：新增表格

  <script>
    var table = document.getElementsByTagName("table")[0];
    var insbtn = document.getElementById("insbtn");
    var delbtn = document.getElementsByClassName("delbtn");
    var changebtn = document.getElementById("changebtn");
    var tbody = document.querySelector("tbody");
    
    //插入点击事件
    insbtn.onclick = function(){
      var bookname = document.getElementById("bookname");  //获取新增书名
      var bookprice = document.getElementById("bookprice");//获取新增价格
      
      if(bookname.value != "" && bookprice.value != ""){
        var t1 =table.insertRow(table.length); // 插第一入行
         t1.insertCell(0).innerHTML ="《"+ bookname.value +"》" ;    //插入第一行第一例
         t1.insertCell(1).innerHTML ="￥"+ bookprice.value ; //插入第一行第二例
         t1.insertCell(2).innerHTML = "<button class = 'delbtn'>删除</button>" ;
        bookname.value = "";
        bookprice.value = "";
        var trs = document.getElementsByTagName("tr");
        changecolor();
      }
      else{
        alert("请输入新增内容");
      }
     
    }

    tbody.onclick = function(){
      if(event.target.nodeName == "BUTTON"){
        event.target.parentNode.parentNode.remove() ;
      }
      console.log(event.target);
      if(event.target.nodeName == "TD"){
        
        event.target.parentElement.style.backgroundColor ="#CCCCCC"
      }
    }
    
    
    // deletetr();
    
    // //删除行
    // function deletetr(){
    //   for(var i=0;i<delbtn.length;i++){
    //     delbtn[i].onclick = function(){
    //         this.parentNode.parentNode.remove() ;
    //     }
    //   }
    // }
     
    // changebtn.onclick = function(){
    //    table.rows[1].cells[0].setAttribute("contenteditable",true);
    // }
    
    // var trs = document.getElementsByTagName("tr");
    // changecolor();
    // function changecolor(){
    //   for(var i =1;i<trs.length;i++){
    //     if(i %2 == 0){
    //       trs[i].style.backgroundColor ="#D3D3D3";
    //       // trs[i].setAttribute("backgroundColor","#D3D3D3");
    //     }
    //   }
    // }
   
    
  </script>