JavaScript事件详解

Stella981
• 阅读 566

1.事件传播机制:事件冒泡,事件捕获。

2.注册事件处理程序方式:

设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,onmouseover,用法如下

1 <div id="div1" onClick="console.log('div1');"><div>
  1. html里面不区分大小写,所以事件处理程序属性名字  onClick 大小写可以混写

  2. 若给同一元素写多个onclick事件处理属性,只执行第一个onclick里面的代码

  3. 在事件冒泡中注册事件处理程序

设置JavaScript对象属性为事件处理程序,用法如下

1 div1.onclick = function(){2  console.log('div1');3 };
  1. 因为JavaScript是严格区分大小写的,所以,这种形式下属性名只能按规定小写;

  2. 若给同一元素对象写多个onclick事件处理属性,后面写的会覆盖前面的

  3. 在事件冒泡过程中注册事件处理程序

addEventListener()

addEventListener()接受三个参数:

1 div1.addEventListener('click',function(){2     console.log('div1-bubble');3 },false);

不会覆盖

第一个参数是要注册处理程序的事件类型,其值是字符串,但并不包括前缀“on”

第二个参数是指当指定类型的事件发生时应该调用的函数;

第三个参数是布尔值,默认值为false=在事件冒泡过程中注册事件处理程序。

true=就是在事件捕获过程中注册事件处理程序。

IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。

3.事件委托     在元素还未添加到页面之前就为它绑定事件,这里也是经常遇到的问题!用于新增的dom节点,其他方法无效

1 $(document.body).on('click','#lucky-draw',function(){ })  

普通绑定---$(".delete").click(function(){}); 相当于在所有类为delete上面分别注册click事件。内存占用大,绑定时间也长,并且不适用于动态添加的元素!

**.on绑定----**只在document上注册了一个click事件,内存占用约2.2M,绑定时间约为1ms。故这种方式绑定比较好!

4.事件冒泡

说到事件,不得不说的就是防止事件冒泡

1) 对比 event.preventDefault() 和 event.stopPropagation()

event.stopPropagation() 方法    在事件传播链中阻止事件冒泡, event.preventDefault() 只是在事件发生时阻断浏览器的默认响应,但事件仍然会向上传递。

例如:

 1 // 这个例子中, 一个 id 是 'foo' 的 div 包含了一个 id 是 'bar' 的 button 2  3 $("#foo").click(function(){ 4  5 / div 'foo' 上的鼠标点击 6  7 }); 8  9 $("#bar").click(function(e){10 11 // button 'bar' 上的鼠标点击12 13 e.stopPropagation();14 15 });

由于按钮的点击处理内部调用了 stopPropagation() 方法,这个事件永远不会传递到 div ,所以 div 的点击事件处理不会被触发。它能够有效阻止父元素捕获子元素的事件。

相反,如果你把刚才调用的 stopPropagation() 替换成 preventDefault(),只有浏览器的默认响应会被阻止,但是 div 的点击事件处里仍然会被触发。

2) 返回 false

(a)在 jQuery 事件处理中返回 false 相当于 jQuery 的 event 对象连续调用了 preventDefault() 和 stopPropagation() 方法。

(b) 在超链接标签的原生 Javascript onclick 事件处理中返回 false 会阻止浏览器默认的地址导航,并且阻止了DOM事件的冒泡传递。

(c) 在非超链接标签(例如: div,button等)的原生 Javascript onclick 事件处理中返回 false 不会起任何作用。

事件大概就总结到这里,有不正确的劳烦各位大神指点一下。

原文出处:http://www.cnblogs.com/beidan/p/5265301.html

本文分享自微信公众号 - 前端Q(luckyWinty)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
Dax Dax
3年前
jQuery 的事件绑定和事件委托(事件代理)
简单以jQuery的on()方法为例说明:API:1.on(events,selector,data,handler) 如果on()方法的selector参数为空,事件处理程序就被称为直接绑定。每当在被绑定元素上(如下例中被绑定的document元素,译者注)发生事件时,无论这个事件发生在这个元素上还是从内层元素经冒泡而
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
可莉 可莉
3年前
06. react 初次见面
    React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)    例如,传统的HTML:<buttononclick"activateLas
Stella981 Stella981
3年前
ABP EventBus(事件总线)
事件总线就是订阅/发布模式的一种实现  事件总线就是为了降低耦合1.比如在winform中 到处都是事件 !(https://oscimg.oschina.net/oscnet/ed3426bf15550c4b0623956eb95e826780d.png)触发事件的对象 sender事件的数据  e事件的处理逻辑 方法
Stella981 Stella981
3年前
Redis线程模型
Redis是单线程模型,它内部采用了文件事件处理器filtereventhandler,而这个处理器是单线程的。文件事件处理器包含:多个socket、IO多路复用程序、事件分派器、事件处理器(连接应答处理器、事件请求处理器、事件回复处理器)。流程:IO多路复用程序会
Stella981 Stella981
3年前
Android的消息循环与Handler机制理解
一、概念1、事件驱动型什么是事件驱动?就是有事了才去处理,没事就躺着不动。假如把用户点击按钮,滑动页面等这些都看作事件,事件产生后程序就执行相应的处理方法,就是属于事件驱动型。2、消息循环把需要处理的事件表示成一个消息,并且把这个消息放入一个队列。消息循环就是一循环,for或者while都一样。从消息队列里面取出未处理的消息,然后调用该消息的
Stella981 Stella981
3年前
Noark入门之异步事件
引入异步事件主要是为了各模块的解耦,每当完成一个动作时,向系统发布一个事件,由关心的模块自己监听处理,可选择同步处理,异步处理,延迟处理。何时发布事件,当其他模块关心此动作时<br比如获得道具时,任务系统模块要判定完成进度,BI模块需要上报等等都可以监听此事件,已达模块解耦0x00事件源一个实现xyz.noark.core.event
Stella981 Stella981
3年前
JavaScript 基础(四)
HTMLDOMEvent(事件)HTML4.0的新特性之一是有能力使HTML事件触发浏览器中的动作(action),比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表,这些属性可插入HTML标签来定义事件动作。onclick//当用户点
Stella981 Stella981
3年前
JavaScript事件属性event.target和currentTarget 属性的区别。
event.target获取的是触发事件的标签元素event.currentTarget获取到的是发起事件的标签元素一、事件属性:event.targettarget事件委托的定义:本来该自己干的事,但是自己不干,交给别人来干例子1!(https://oscimg.oschina.n
Stella981 Stella981
3年前
JavaScript——页面相关事件
页面事件是在页面加载或改变浏览器的大小、位置,以及对页面中的滚动条进行操作时,所触发的事件处理程序。加载与卸载事件加载事件(onload)是在网页加载完毕后触发相应的事件处理程序,它可以在网页加载完成后对网页中的表格样式、字体、背景颜色等进行设置。卸载事件(unload)是在卸载网页时触发相应的事件处理程序,卸载网页是指关闭当前页或