第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > js事件流(事件捕获——目标阶段——事件冒泡)

js事件流(事件捕获——目标阶段——事件冒泡)

时间:2019-06-20 07:14:22

相关推荐

js事件流(事件捕获——目标阶段——事件冒泡)

1. 事件捕获,事件冒泡

事件:事件是指文档和浏览器窗口发生特定交互的瞬间。

事件流: 事件流指页面中接受事件的顺序,微软为事件冒泡,网景为事件捕获。

事件捕获:由上而下,根元素最早接受事件,目标元素最后接受事件。

事件冒泡:由下而上,目标元素最早接受事件,逐级向上,最后根元素接受事件。

2. DOM事件流

DOM事件流规定,事件流由三个部分构成 事件捕获——目标阶段——事件冒泡,首先事件捕获为截获事件提供机会,然后实际目标接受事件,事件冒泡阶段对事件做出响应。事件在目标阶段是无法获取事件的。

3. 事件处理程序

DOM事件定义了两种方法,addEventListener和removeEventListener他们都包含三个参数(1.处理事件的的方式click…2.事件处理函数(如果是删除函数必须是命名函数3.bool值为true为事件捕获阶段调用,默认为false事件冒泡阶段调用)

4. 事件委托

利用事件冒泡原理,将子级触发的事件绑定在父级身上。

<ul id='list'><li>1</li><li>2</li><li>3</li></ul>// event.target 代表目标元素,target事件源对象const ul = document.querySelector('#list')ul.addEventListener('click',function(e){const event = e || window.eventconst target = event.targetif(target.nodeName.toLowerCase() === 'li'){console.log(target.nodeName)}},false)

事件委托优点:

1. 减少多次绑定,提高程序性能

2. 动态添加的子元素也能自动获取事件

5. js阻止事件冒泡和默认事件

w3c:e.stopPropagation

ie:window.event.cancelBubble = true

默认事件:是指目标元素的默认行为比如a标签会跳转链接 form会提交表单

w3c:e.preventDefault()

ie:window.event.returnValue = false

另外js中的return false也可以阻止默认行为jq中的return false既可以阻止默认行为也可以阻止冒泡

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。