Implementation Method of js Dynamic Adding and Removing Events to Elements
- 2021-07-04 17:54:48
- OfStack
Recent project to js dynamic to the element binding event, just before the use of these, by the way to learn 1, so google 1 under the event, wrote the following two events 1 add event, 1 is to remove the event
/addEventListener(),removeEventListener() Actions for specifying and deleting event handlers
// Scope : The event handler runs within the scope of the element to which it belongs
//addEventListener(event,function,capture/bubble);removeEventListener(event,function,capture/bubble)
// Parameter event As shown in the above table , function Is the function to execute , capture And bubble They are W3C Two time patterns are formulated ,
// Simply put capture Is from document Read from the beginning to the end 1 Row , Re-execute event , And bubble Find the specified location before executing the event .
//capture/bubble Parameters of are Boolean values , True Representation with capture, False Is bubble
function addEvent() {
var obj = document.getElementById("txtIataCity");
if (window.addEventListener) {
// Event codes for other browsers : Mozilla, Netscape, Firefox
// The order of events added is the order of execution // Pay attention to using addEventListener Adding tape on Events, don't add on
obj.addEventListener('focus', function(){test('aa')} , false);
}
else {
//IE Event code of Add to the original event add Method
obj.attachEvent('onfocus', function(){test('aa')});
}
}
function removeEvnent() {
var obj = document.getElementById("txtIataCity");
if (window.removeEventListener) {
obj.removeEventListener('focus', function(){test('aa')}, false);
}
else {
obj.detachEvent('onfocus', function(){test('aa')});
}
}
When the page is loaded, the above method is called to bind the event to input, and the test is added successfully, but the removal is always unsuccessful. So I looked for reference materials online
// Pass addEventListener() Events can be added only through the removeEventListener() To remove . It's done like this There are also below 1 Sentence: // When removed addEventListener() The added anonymous function cannot be removed The problem has been found function(){test('aa')}// Invalid , Because the incoming addEventListener() And removeEventListener() The method is not the same as 1 Methods then set the test('aa') Put forward Write as function test(msg){ alert(msg)} Rewrite as function addEvent() { var obj = document.getElementById("txtIataCity");
if (window.addEventListener) {
// Event codes for other browsers : Mozilla, Netscape, Firefox
// The order of events added is the order of execution // Pay attention to using addEventListener Adding tape on Events, don't add on
obj.addEventListener('focus', test('msg')} , false);
}
else {
//IE Event code of Add to the original event add Method
obj.attachEvent('onfocus', test('msg')});
}
}
function removeEvnent() {
var obj = document.getElementById("txtIataCity");
if (window.removeEventListener) {
obj.removeEventListener('focus',test('msg')}, false);
}
else {
obj.detachEvent('onfocus',test('msg'));
}
}
So the ie hint is executed: Type mismatch seems to not support functions with parameters, so the function is encapsulated as a parameterless form and passed in again
Execute, add successfully, remove or fail. After searching for half a day on the Internet, almost all of them were written in this way. I don't know why I can't remove it.
Later, I saw that jquery was originally quoted in the page, so bind and unbind events of jquery were successfully used once.
Alas, solve this problem when the project is finished.