事件委托,事件冒泡,禁止冒泡和默认事件

原创 2018年04月16日 11:17:14
<ul>
    <li>1</li>
    <li>11</li>
    <li>111</li>
    <li>1111</li>
    <li>11111</li>
    <li>11111</li>
    <li>111111</li>
    <li>1111111</li>
    <li>11111111</li>
    <li>111111111</li>
</ul>
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e){//绑定点击事件
	var event = e || window.event;//做event兼容
	var target = event.target || event.srcElement;//做事件源兼容
	console.log(target.innerText);
}

原理:事件冒泡,捕获,先捕获后冒泡

事件冒泡:自下往上的触发事件//文档结构上 addEventListener("事件类型",处理函数,false)

事件捕获:自上往下的触发事件//文档结构上(ie不支持)addEventListener("事件类型",处理函数,true)


绑定事件的函数:

节点.addEventListener("事件类型",处理函数,false/true)//它可以绑定多个函数,绑定同一函数执行一次

节点.attachEvent("on+事件类型",处理函数)//仅限IE,它可以绑定多个函数,一样的也行并执行多次

解除事件:(如果绑定匿名函数则无法通过第一二中方法解除)

节点.事件.removeEventListener("事件类型",处理函数,false/true)

节点.detachEvent("on+事件类型",处理函数)

节点.类型 = null/false


取消冒泡:

event.stopPropagation()

event.cancelBubble = true,ie独有


阻止默认事件:(a标签的跳转和右击菜单)

reture false;

event.preventDefault();

evevt.return.Value = false;兼容ie

UGUI图形用户操作界面详解与实战

Unity引擎就为我们提供了一套使用起来十分方便简洁,功能又极其强大的系统,对于用户来说,通过图形操作界面与计算机进行沟通,而开发者,就创建这样的环境给用户进行体验。
  • 2018年01月23日 20:24

事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为

要了解事件委托,首先要了解事件流的概念和事件执行流程: DOM同时支持两种事件模型:捕获型事件和冒泡型事件 ,并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获) ...
  • qq_22855325
  • qq_22855325
  • 2017-05-19 17:46:43
  • 1530

面试题-冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

很好的博文http://younglab.blog.51cto.com/416652/274132!
  • zd10101501
  • zd10101501
  • 2014-04-17 21:38:18
  • 1597

javascript事件详解和事件冒泡, 捕获介绍, 事件委托经典例子

事件 ele.onxxx = function(event) { } 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序 基本等同于写在HTML行间 obj.addEventListener...
  • c_kite
  • c_kite
  • 2016-12-07 20:21:31
  • 1771

DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。

Dom默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式
  • u013194113
  • u013194113
  • 2016-07-25 20:39:46
  • 4575

关于JS事件冒泡与JS事件代理(事件委托)

事件作为DOM操作重要的一环,需要大家好好理解和运用,今天特意看了一下事件冒泡和事件代理的相关资料,感触颇深,也深感自己的无知不知道多浪费了多少内存,废话不多说进入正题: 1.事件冒泡:   ...
  • SuperCoooooder
  • SuperCoooooder
  • 2016-08-12 16:26:41
  • 3791

浅谈事件委托(事件代理)和事件冒泡

事件冒泡:子级元素的某个事件被触发,它的上级元素的该事件也被递归触发。 事件委托:使用了事件冒泡的原理,从触发某事件的元素开始,递归地向上级元素传播事件。 事件委托的优点: 1) 对于要大量处理的...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-09 10:52:19
  • 1622

如何阻止事件冒泡和默认事件

一、冒泡事件 我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程,就是冒泡事件。那么如何有效的阻止冒泡事件的发生?其实在非IE浏览器中提供了一个事件对象 ...
  • u011641865
  • u011641865
  • 2016-04-26 08:52:25
  • 6283

JavaScript事件冒泡,事件捕获,事件处理,事件委托

早期的事件,是作为分担服务器运算负载的一种手段,实文档或者浏览器窗口中发生的一些特定的交互瞬间,如点击按钮,拖放文件等。我们可以使用侦听器来预定事件,当事件发布时候就可作出相应的响应,这种模式称为观察...
  • zhangwx6
  • zhangwx6
  • 2017-03-16 19:22:33
  • 1064

冒泡事件流的应用——事件委托

一、什么是事件委托原理:利用冒泡的原理,把事件加到父级上,触发执行效果。二、为什么使用事件委托一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件...
  • u013035060
  • u013035060
  • 2017-03-10 18:02:12
  • 476
收藏助手
不良信息举报
您举报文章:事件委托,事件冒泡,禁止冒泡和默认事件
举报原因:
原因补充:

(最多只允许输入30个字)