JavaScript进阶-4

1、使用模板字符串可以动态添加标签到HTML页面

//生成标签
var lis = todos.map(ele =>`<li id=${ele.id} onclick="changeStatus(event)">${ele.content}</li>`

//添加标签到父标签下
    document.getElementById('todoList').innerHTML = lis.join('\n');

2、使用createElement()和appendChild()动态添加标签到HTML页面

var span = document.createElement('span');
span.innerHTML = '×';
 li.appendChild(span);

3、添加回车事件

document.onkeyup = function (e) {
    var code = e.charCode || e.keyCode;
    if (code == 13) {
        mycode;
    }
}

4、JS事件代理
事件代理又叫事件委托，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

• 原理：
  事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

event.target.nodeName  　　 //获取事件触发元素标签name
 
event.target.id　　　　　　　//获取事件触发元素id
 
event.target.className　　  //获取事件触发元素classname
 
event.target.innerHTML　　  //获取事件触发元素的内容

5、在JavaScript中使用.setAttribute（‘name’，‘value’）来给标签添加属性。注意避免标签的属性名与JS对象属性名相同所带来的bug
6、网页跳转

//给原页面绑定跳转函数
function isToMovieSearchPage(searchContent) {
    if (!searchContent) {
        return
    }
    let searchUrl = 'search-page.html?search=' + encodeURI(searchContent); //使用encodeURI()来编码汉字字符
    window.location.href = searchUrl;
}

//从跳转页的URL中获取传递的参数
function getSearchContentFromUrl() {
    const url = window.location.href;
    let searchContent = url.split('search=')[1];
    return decodeURI(searchContent); //使用decodeURI()来解码为汉字字符
}