事件代理及常用的 HTML 事件

2018-08-11 admin

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

事件代理

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

  <ul class="ct">
    <li>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
  </ul>

首先想到的对每一个 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)    
  })
}

使用onclickaddEventListener的区别: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)
})

用事件代理操作一些比较复杂的事情,比如下面代码,当我点击开头添加,则在<li>苹果</li>前添加input内的内容,如果我点结尾添加<li>葡萄</li>后添加input内的内容。

  <ul class="ct">
    <li>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
  </ul>
  <div class="content">
    <input class="ipt-add-content" placeholder="添加内容" />
    <button id="btn-add-start">开头添加</button>
    <button id="btn-add-end">结尾添加</button>
  </div>

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

在这里需要注意e.currentTargete.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:鼠标离开触发,不会冒泡 注:

  1. clientX,clientY客户端坐标位置,当事件发生时,鼠标的位置
  2. pageX,pageY页面坐标位置,发生事件的页面坐标
  3. screenX,screenY事件发生时相对屏幕的坐标
  4. 修改键:shiftctrlaltwin对应的修改键状态shiftKeyctrlKeyaltKeymetaKey,他们是布尔值,按下为true,松开为false

触摸事件

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

键盘事件:

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

  1. textInputkeypress类似,书上说textInput只能在可编辑区域触发,只能按下有效字键才能触发(enter键无法触发,ctrl+v可以触发),keypress按下任何影响文本显示的键都会触发(enter键可以触发,ctrl+v无法触发),但我操作下来,发现这两者并没有什么区别。
  2. 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:在一个拖动过程中,释放鼠标键时触发此事件

原文链接:https://segmentfault.com/a/1190000015969195

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37727.html

文章标题:事件代理及常用的 HTML 事件

相关文章
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
从 Node.js 分裂出 Io.js 事件看开源软件谁做主
Node.js 作为服务器编程语言的后起之秀,常用来构建和运行 Web 应用,近日却爆出其社区出现分裂。由于对官方运营商 Joyent 公司在 Node.js 管理上的长期不满,多位核心开发者另立门户,创建了分支 Io.js。从 GitHu...
2015-11-12
HTML5手机游戏大爆发
HTML5技术的应用从未像今天如此火爆,从手游领域蔓延至整个移动互联网,从创业公司掘金到巨头深度介入。HTML5正推动移动互联网发展新趋势的诞生,引领未来投资的风向标,围绕HTML5创业的黄金时代即将到来。 追根溯源,HTML5手游之所以备...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
html5 参考手册chm
下载地址:html5参考手册chm 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
搜狐发力html5让用户更爽,自媒体人更嗨
曾经有资深互联网分析师说过”2015年,新闻综合类 APP 如果还没有大量的个性化阅读功能,将被淘汰出局。”枣哥非常同意此观点,移动互联网时代已经席卷全球,移动互联网代表的就是个性张扬的时代,在互联网圈说道个性张扬首先想到的是搜狐老板张朝阳...
2015-11-12
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
回到顶部