Почему события click javascipt не работают

---

Я создаю простой шаблонный движок,но сталкиваюсь с проблемой, что не все мои события хотят привязать, я привязываю событие onclick ко всем элементам с атрибутом "em", но если вижу скрипку js, то событие person click работает, но ни одно из событий дочерних элементов не работает, например события friends не работают. весь код просто тестируется очень грязно.; (извините за плохой английский
JSFIDDLE
https://jsfiddle.net/fjekLyv9/9/

Что я уже пробовал:

HTML

<div id="main">

    </div>

   
    <script id='personTemplate' type="emersion/template">

        <header class="w3-container w3-light-grey">
            
            <h3>{name}</h3>
        </header>
        <div class="w3-container">
            <hr>
            <div>
                Profile
                <p>Balance : {balance}</p>
                <p>Registered : {registered}</p>
                <p>Location : {latitude},{longitude}</p>
            </div>
            <hr>
            <div>
                About
                <p>Age : {age}</p>
                <p>Eye Color : {eyeColor}</p>
                <p>About me  : {about}</p>
                <hr>
                <div>
                    Friends
                    <div>
                        [forEach(friends) model friendTemplate]
                    </div>
                </div>
            </div>

    </script>
    <script id='friendTemplate' type="emersion/template">
        <h3>{name}</h3>
    </script>
    <script type="text/javascript">
        
    </script></div>

ЯЗЫК JAVASCRIPT

function init(object, element, templateId) {
  handler = function () {
    alert("click");
  }
    var template = document.getElementById(templateId);
    var templateText = template.innerHTML;

    //add click Event

    var translatedElement = translateTemplate(object, templateText)



    var events = translatedElement.querySelectorAll('[em]')
    for (var i = 0; i < events.length; i++) {
      console.log(events[i]);
      events[i].removeAttribute('em')
      events[i].onclick = handler;
      events[i].style.color = 'red';
    }
    element.appendChild(translatedElement)

}

function translateTemplate(object, templateText) {


    var rxp = /{([^}]+)}/g
    var curMatch;
    var curItem = templateText;
    //find functions
    while (curMatch = rxp.exec(templateText)) {
        if (curMatch[1] == ":model") {
            curItem = curItem.replace(curMatch[0], object.toString())
        } else {
            curItem = curItem.replace(curMatch[0], object[curMatch[1]])
        }


    };
    rxp = /\[([^\]]+)\]/g

    while (curMatch = rxp.exec(curItem)) {
        var func = praseFunction(curMatch[0], curMatch[1])

        var curObject  = object;;
        if (func.objectName != ":model") {

            curObject = object[func.objectName];
        }

        if (func.command == 'forEach') {
            var tempElement = document.createElement("div")
            curObject.forEach(function(item, index) {

                init(item, tempElement, func.template);

            });


            curItem = curItem.replace(func.text, tempElement.innerHTML);
        }
    }

    return domify(curItem);
}


function domify(str) {
    var el = document.createElement('div');
    el.innerHTML = str;
    return el;
}

function praseFunction(text, functionText) {
    var func = {
        text: "",
        functionText: "",
        command: "",
        objectName: "",
        name: "",
        template: ""
    };
    func.text = text;
    func.functionText = functionText;
    func.command = func.functionText.substring(0, (func.functionText.indexOf("(")));
    func.objectName = func.functionText.substring(func.functionText.indexOf("(") + 1, func.functionText.indexOf(")"));
    var tempString = func.functionText.substring(func.functionText.indexOf(" ") + 1);
    func.name = tempString.substring(0, tempString.indexOf(" "));
    func.template = tempString.substring(tempString.indexOf(" ") + 1, tempString.length);
    return func;
}

function has(object, key) {
    return object ? hasOwnProperty.call(object, key) : false;
}

var personData = {
    "_id": "5800744a885b5b29afe8d30f",
    "index": 0,
    "guid": "56a7cf9d-67f8-4072-9bec-c7a3db8cf998",
    "isActive": false,
    "balance": "$1,575.60",
    "picture": "http://placehold.it/120x120",
    "age": 20,
    "eyeColor": "brown",
    "name": "Booker Anthony",
    "gender": "male",
    "company": "QUINTITY",
    "email": "bookeranthony@quintity.com",
    "phone": "+1 (963) 593-3024",
    "address": "982 Commercial Street, Tedrow, Florida, 1252",
    "about": "Quis commodo exercitation qui et non elit qui magna non. Minim enim anim fugiat fugiat velit sunt amet cillum. Mollit et ad reprehenderit magna ea sit mollit veniam enim qui irure quis in labore.\r\n",
    "registered": "2016-02-27T08:13:20 -02:00",
    "latitude": -71.704333,
    "longitude": 177.511677,
    "tags": [
        "nisi",
        "commodo",
        "magna",
        "veniam",
        "esse",
        "voluptate",
        "ea"
    ],
    "friends": [{
        "id": 0,
        "name": "Frankie Burks",
        "items": ["item1", "item2", "item3"]
    }, {
        "id": 1,
        "name": "Sherri Matthews",
        "items": ["item4", "item5", "item6"]
    }, {
        "id": 2,
        "name": "Elise Ross",
        "items": ["item7", "item8", "item9"]
    }],
    "greeting": "Hello, Booker Anthony! You have 3 unread messages.",
    "favoriteFruit": "banana"
};

var treeData = [{
    "id": "58070d831248360caa61a5f7",
    "node": "UTARIAN",
    "children": [{
        "id": 0,
        "node": "BIOTICA",

    }]}]
var mainElement = document.getElementById('main')
        init(personData, mainElement, 'personTemplate');

---