ES5 Event Bubble-Agent

Event

subject

Write a generic event listener function
Describe event bubbling process
For an infinite drop-down page loading images, how to bind events to each image

Knowledge Points

General Event Binding

Event Bubbling

Agent (i.e. principal, but also the application of event bubbles)

//General Event Binding
var btn = document.getElementById('btn1')
btn.addEventListener('click',function(event){
	console.log('clicked')
})

function bindEvent(elem,type,fn){
	elem.addEventListener(type,fn)
}
var a = document.getElementById('link1')
bindEvent(a,'click',function(e){
	e.preventDefault()//Prevent default behavior
	alert('clicked')
})

Compatibility of IE Low Version

The lower version of IE uses attachEvent to bind events, which is different from the W3C standard (no addEventListener is used)
IE low version usage has been very small, many websites have not supported it.
It is suggested that the compatibility of IE low version should be understood without further study.
If you encounter a tough interview for the lower version of IE, give up decisively
Android Compatibility

<body>
	<div id="div1">
		<p id="p1">activation</p>//Event bubbles when clicking p1
		//Event bubbles up the DOM tree
		//First div1, then body
		//Events on the DOM tree will always be triggered
		//In this case, bubbles need to be prevented.
		<p id="p2">cancel</p>
		<p id="p3">cancel</p>
	</div>
	<div id="div2">
		<p id="p4">cancel</p>
		<p id="p5">cancel</p>
		<p id="p6">cancel</p>
	</div>
</body>

function bindEvent(elem,type,fn){
	elem.addEventListener(type,fn)
}
//Event Bubbling
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1,'click',function(e){
	e.stopPropatation()//Used to prevent bubbles
	alert('activation')
})
bindEvent(body,'click',function(e){
	alert('cancel')//This is using event bubbles.
})

agent

Application of Event Bubble

<! - How to add events to all a tags and click on the content of pop-up a tag - >
<div id="div1">
	<a href="#">a1</a>
	<a href="#">a2</a>
	<a href="#">a3</a>
	<a href="#">a4</a>
	<! - More a tags will be added at any time - >.
</div>

//agent
var div1 = document.getElementById('div1')
div1.addEventListener('click',function(e){
	var target = e.target
	//target tells you where the event was triggered
	//e.target is an object a here
	if(target.nodeName === 'A'){
		alert(target.innerHTML)
	}
})

Perfecting functions for general binding events

//Whether to use proxy or not
function bindEvent(elem,type,selector,fn){
	if(fn = null){
		fn = selector
		selector = null
	}
	elem.addEventListener(type,function(e){
		var target
		if(selector){
			//It's an event broker.
			target = e.target
			if(target.matches(selector)){
			fn.call(target, e)
			//call is used to change this pointing
			//If direct fn(e)this is Windows?
		}else{
			//Not event proxy
			fn(e)
		}
	})
}
//Using proxies
var div1 = ducoment.getElementById('div1')
bindEvent(div1,'click','a',function(e){
	alert(this.innnerHTML)
})
//Do not use proxy
var a = document.getElementById('a1')
bindEvent(a,'click',function(){
	alert(a.innerHTML)
})

Programmer Group

ES5 Event Bubble-Agent

Event

subject

Knowledge Points

General Event Binding

Event Bubbling

Agent (i.e. principal, but also the application of event bubbles)

Compatibility of IE Low Version

agent

The Benefits of Agency

Answer

Writing a Universal Event Monitor Function

Describe the process of event bubbling

For an infinite drop-down page loading images, how to bind events to each image

Summary of key points

General Event Binding

Event Bubbling

agent

Hot Keywords