js_操作dom（委托和冒泡事件）

js操作html

• js操作html

• js操作dom
• div绑定js函数

• js的委托事件
• js的冒泡事件

• 阻止冒泡

• 方法一
• 方法二
• 方法三

js操作html

js操作dom

js创建div样式，添加节点删除节点等等

var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');
el1.appendChild(el2)
el1.removeChild(el2)

div绑定js函数

onclick绑定事件

<div id='childID' onclick="childfunc()">子组件</div>

js的委托事件

将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件）
这样可以只绑定一次，即可应用到多个元素上
事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
event中的target表示的触发事件的对象
使用它对触发事件的元素进行判断
js

function onloadEvent() {
			document.getElementById("eventTrust").addEventListener('click', function(e) {

					alert("点击的内容是：" + e.target.innerHTML);
				})

			}
		window.onload=onloadEvent()

div

function onloadEvent() {
			document.getElementById("eventTrust").addEventListener('click', function(e) {

					alert("点击的内容是：" + e.target.innerHTML);
				})

			}
		window.οnlοad=onloadEvent()

js的冒泡事件

指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发

div

<div class="right">
				<p>js的冒泡事件</p>
				<div id='parentID' onclick="parentfunc()">
					<div id='childID' onclick="childfunc()">子组件</div>
				</div>
			</div>

事件绑定

<script>
	        function parentfunc() {
	            console.log('父级事件触发了！')
	        }
	        function childfunc(){
	            console.log('子级事件触发了！')
	        }
	    </script>

子组件的点击不仅会触发自身绑定的事件也会触发父级事件的点击事件

阻止冒泡

方法一

event.stopPropagation()
注意：但不会阻击dom的默认行为（若添加跳转链接则会触发当前dom跳转）

function childfunc() {
			console.log('子级事件触发了！')
			event.stopPropagation()
		}

方法二

return false;
注意：事件处理过程中，阻止了事件冒泡，也阻止了默认行为（若添加跳转链接也不会触发当前dom跳转）

function childfunc() {
			console.log('子级事件触发了！')
			return false
		}

方法三

event.preventDefault();
注意：事件处理过程中，不会阻止事件冒泡，会阻止了默认行为（若添加跳转链接也不会触发当前dom跳转）

function childfunc() {
			console.log('子级事件触发了！')
			event.preventDefault()
		}