资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/事件代理及常用的 HTML 事件

事件代理及常用的 HTML 事件

xavier / 1417人阅读

摘要：之前总结了事件捕获和冒泡以及阻止事件传播，今天写一下事件代理方面的总结事件之捕获冒泡阻止事件传播事件代理监听列表中多项时，实现点击控制台打印对应文本，如下苹果香蕉葡萄首先想到的对每一个进行监听或者使用和的区别是属性，是方法。

之前总结了事件捕获和冒泡以及阻止事件传播，今天写一下事件代理方面的总结
DOM 事件之捕获、冒泡：
阻止事件传播：

事件代理

监听列表中多项 li 时，实现点击 li 控制台打印对应文本，如下：

  
    
    
  • 苹果
    • 
    
  • 香蕉
    • 
    
  • 葡萄
    •

首先想到的对每一个 li 进行监听

let ct = document.querySelector(".ct"）
for(let i = 0; i < ct.children.length; i++){
  ct.children[i].onclick = function(e){
    console.log(e.target.textContent)
  }  
}

或者

let ct = document.querySelector(".ct"）
for(let i = 0; i < ct.children.length; i++){
  ct.children[i].addEventListener("click",function(e){
    console.log(e.target.textContent)    
  })
}

使用onclick和addEventListener的区别：onclick是属性，addEventListener是方法。

简单来说，如果使用onclick，如果此元素需要同时添加多个onclick事件，那么之前的onclick会被覆盖，而使用addEventListener添加的事件相当于调用它，并传递相应的参数。

如果此时 li 是动态生成的，每一个li 都要给它添加监听器，监听器多了会特别占内存，从而影响性能，这里最好的方式是使用事件代理。

举个简单的例子：大学宿舍同学，买的快递都到了，这时有两种方法，一种是每个人都去取自己的快递，另一种方法是大家找一个同学，让他统一去取快递，然后在发给每一个同学。

这里取快递就是一个事件，第一种方法就是相当于给每个元素添加事件，第二种方法统一去取快递的同学就是代理元素。

使用事件代理来实现它，监听的元素应该是这些元素的父元素，当我点击父元素内的元素时，父元素都会得到响应，并分发相应的事件。e.target就是点击的元素。

let ct = document.querySelector(".ct")
ct.addEventListener("click", function(e) {
  console.log(e.target.textContent)
})

用事件代理操作一些比较复杂的事情，比如下面代码，当我点击开头添加，则在

  • 苹果
    • 前添加input内的内容，如果我点结尾添加
  • 葡萄
    • 后添加input内的内容。

      
      
    
    • 苹果
      • 
    
    • 香蕉
      • 
    
    • 葡萄
      •

    这里事件代理元素是content，如按照上面的方法，给每个子元素分发事件，那么当我点击input时，也会触发click事件，这就偏离了我们的需求。所以这里需要做一个判断，只有点开头添加或者结尾添加才能添加到相应的位置，点其他地方一律不操作。

    在这里需要注意e.currentTarget和e.target的区别：
    e.currentTarget：添加事件的元素
    e.target：执行事件的元素
    大部分事件中这两者没什么区别，但在click事件中，如果使用事件代理，这两个指向的就不是同一个元素。

      let ct = document.querySelector(".ct")
  let addContent = document.querySelector(".ipt-add-content")
  let content = document.querySelector(".content")

  content.addEventListener("click", function(e) {
    let li = document.createElement("li")
    li.textContent = addContent.value
    if(e.target.textContent === "开头添加"){    //只有点"开头添加"才执行
      ct.insertBefore(li,ct.firstChild)
    }else if(e.target.textContent === "结尾添加"){//只有点"结尾添加"才执行
      ct.appendChild(li)
     }
  })
    常用的 HTML 事件 鼠标事件

    mousedown：鼠标按下触发，其中button属性监测鼠标按下哪个键：0是鼠标左键，1鼠标中间的滚轮，2鼠标右键。
    mouseup：鼠标松开触发，其中button属性监测鼠标按下哪个键：0是鼠标左键，1鼠标中间的滚轮，2鼠标右键。
    mousemove：鼠标移动触发
    click：点击事件
    dblclick：双击事件
    mousewheel：鼠标滚动事件，wheelDelta可以判定鼠标滚动方向，180 向上滚动，-180 向下滚动
    mouseover：鼠标进入触发，会冒泡，如果监听的是父元素，鼠标移入到父元素内的子元素也会触发
    mouseout：鼠标离开触发，会冒泡，如果监听的是父元素，鼠标从父元素内的子元素移出也会触发
    movseenter:鼠标进入触发，不会冒泡
    mouseleave:鼠标离开触发，不会冒泡
    注：

    clientX,clientY客户端坐标位置，当事件发生时，鼠标的位置

    pageX,pageY页面坐标位置，发生事件的页面坐标

    screenX,screenY事件发生时相对屏幕的坐标

    修改键：shift、ctrl、alt、win对应的修改键状态shiftKey、ctrlKey、altKey、metaKey，他们是布尔值，按下为true，松开为false。

    触摸事件

    touchstart：手指点击触发，点击坐标在touches[0]里面，因为手机支持多点触控
    touchend：手指离开触发，同上
    touchmove：手指移动触发，同上

    键盘事件：

    keydown：键盘上按下任意键触发，按住不放会重复触发，文本框变化之前触发
    keyup：键盘上释放任意键触发
    keypress：键盘上按下任意字符键触发，按住不放会重复触发，文本框变化之前触发
    注：

    textInput和keypress类似，书上说textInput只能在可编辑区域触发，只能按下有效字键才能触发(enter键无法触发，ctrl+v可以触发)，keypress按下任何影响文本显示的键都会触发(enter键可以触发，ctrl+v无法触发)，但我操作下来，发现这两者并没有什么区别。

    location属性4表示设备键盘

    页面相关事件：

    load：加载完成时触发
    move：浏览器窗口被移动时触发
    resize：浏览器的窗口大小被改变时触发
    scroll：滚动条位置发生变化时触发

    表单相关事件

    blur：元素失去焦点时触发
    change：元素失去焦点且元素内容发生改变时触发
    focus：元素获得焦点时触发
    reset：表单中reset属性被激活时触发
    submit：表单被提交时触发
    input：在input元素内容修改后立即被触发

    编辑事件

    beforecopy：当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
    beforecut：当页面中的一部分或者全部的内容将被移离当前页面（剪贴）并移动到浏览者的系统剪贴板时触发此事件
    beforeeditfocus：当前元素将要进入编辑状态
    beforepaste：内容将要从浏览者的系统剪贴板传送（粘贴）到页面中时触发此事件
    beforeupdate：当浏览者粘贴系统剪贴板中的内容时通知目标对象
    contextmenu：当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
    copy：当页面当前的被选择内容被复制后触发此事件
    cut：当页面当前的被选择内容被剪切时触发此事件
    losecapture：当元素失去鼠标移动所形成的选择焦点时触发此事件
    paste：当内容被粘贴时触发此事件
    select：当文本内容被选择时的事件
    selectstart：当文本内容选择将开始发生时触发的事件

    拖动事件

    drag：当某个对象被拖动时触发此事件 （活动事件）
    dragdrop：一个外部对象被鼠标拖进当前窗口时触发
    dragend：当鼠标拖动结束时触发此事件
    dragenter：当对象被鼠标拖动的对象进入其容器范围内时触发此事件
    dragleave：当对象被鼠标拖动的对象离开其容器范围内时触发此事件
    dragover：当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    dragstart：当某对象将被拖动时触发此事件
    drop：在一个拖动过程中，释放鼠标键时触发此事件

    GPU云服务器 云服务器 html的点击事件 html的鼠标事件 javascript常用事件 吧html的点击事件

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/96845.html

    相关文章

    • 前端面试（知识点）整理（一）

      摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题：假设高度已知，请写出三栏布局 ，其中左栏、右栏宽度各为300px，中间自适应。 解决方案一：使用浮动布局` Document ...

      zhichangterry 评论0 收藏0

    • 前端面试（知识点）整理（一）

      摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题：假设高度已知，请写出三栏布局 ，其中左栏、右栏宽度各为300px，中间自适应。 解决方案一：使用浮动布局` Document ...

      Songlcy 评论0 收藏0

    • 前端面试（知识点）整理（一）

      摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题：假设高度已知，请写出三栏布局 ，其中左栏、右栏宽度各为300px，中间自适应。 解决方案一：使用浮动布局` Document ...

      ThreeWords 评论0 收藏0

    • 异步、DOM、事件、页面加载和优化面试题及知识点简单总结

      摘要：异步编程，不同于同步编程的请求响应模式，其是一种事件驱动编程，请求调用函数或方法后，无需立即等待响应，可以继续执行其他任务，而之前任务响应返回后可以通过状态通知和回调来通知调用者。 异步与单线程知识点： 什么是异步(对比同步) 同步：一行一行按顺序依次执行代码，当前代码任务耗时执行会阻塞后续代码的执行。这是一种典型的请求-响应模型，当请求调用一个函数或方法后，需等待其响应返回，然后执...

      jasperyang 评论0 收藏0

    • 百度网盘文件夹框选功能

      摘要：案例说明使用原生完成桌面操作级应用，对于原生的掌握情况而言，是一个较为全面的综合型案例。本次课从事件相关的功能入手，给大家带来详细的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例说明：使用原生 JS 完成桌面操作级应用，对于原生 JS 的掌握情况而言，是一个较为全面的综合型案例。本次课从事件（event）相关的功能入手，给大家...

      jkyin 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    xavier

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <