[北京|结业弟子]JS-程荣强|2018年07月02日的日报-技能树.IT修真院

发表于： 2018-07-02 22:01:19

1 305

今天完成的事情：看了看事件代理,找复盘队友

明天计划的事情：看看小程序中的picker组件如何使用angular去写,

遇到的问题：

收获：

重新看了下事件代理相关的内容,主要是在小程序当中的使用了

于是自己写了点demo来加深对事件代理的用法

个人对事件代理的理解通俗的概括就是让父级元素去接收子元素的事件,因为冒泡会冒到父元素上

这样点击子元素也就触发父元素的事件,当然也能阻止这个冒泡的过程

在这里主要采用event对象,事件发生时会生成一个event对象,这个对象包含事件源target,从事件源上去判断可以达到一些不同功能的实现

事件代理的原理就是冒泡,而其最大的作用就是优化性能,以及实现传统的事件绑定无法对动态添加的元素而动态的添加事件。

var btn1 =document.getElementById("btn1");
var dsn =document.getElementsByClassName("dsn");
btn1.onclick =function() {
dsn[0].className = "dsb"
}
var ull =document.getElementById("ull");
var aLi = document.getElementsByTagName("li");

window.onload = function() {

var btn1 =document.getElementById("btn1");
var dsn =document.getElementsByClassName("dsn");
btn1.onclick =function() {
dsn[0].className = "dsb"
}
var ull =document.getElementById("ull");
var aLi = document.getElementsByTagName("li");
window.onload = function() {
//事件代理
//小程序中使用的思路 

var box = document.getElementById("box");
box.onclick =function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
console.log(ev)
switch (target.dataset.index) {
case "0" :
alert("添加")
break;
case "1" :
alert("删除")
break;
case "2" :
alert("移动")
break;
case "3" :
alert("选择")
break;
}
}

// // 新增节点
var ul2 = document.getElementById("ul2")
ul2.onmouseover= function(ev) {
var ev = ev||window.event;
var target = ev.target||srcElement;
console.log(ev)
if(target.nodeName.toLowerCase()=='li') {
target.style.background = "red";
}
}
ul2.onmouseout= function(ev) {
var ev = ev||window.event;
var target = ev.target||srcElement;
console.log(ev)
if(target.nodeName.toLowerCase()=='li') {
target.style.background = "#fff";
}
}
var add1 =document.getElementById("add1")
add1.onclick = function() {
var newLi = document.createElement('li')
ul2.appendChild(newLi)
}
var add2 =document.getElementById("add2")
add2.onclick = function() {
console.log(this)
click()
}


}

关于this对象指向的问题

var add2 =document.getElementById("add2")
add2.onclick = function() {
console.log(this)
}

这个this指向的是add2这个对象

function click() {
console.log(this)
}

这个this指向的是window对象

简单的来说

这地方的区别在于函数时怎么调用的

以对象方法调用则指向父级对象,否则指向全局对象

还有我们使用构造函数时,this指向新生成的对象

事件监听器

语法

W3C规范

语法：

element.addEventListener(event, function, useCapture)

event : （必需）事件名，支持所有 DOM事件。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

注：IE8以下不支持。

IE标准

语法：

element.attachEvent(event, function)

event：（必需）事件类型。需加“on“，例如：onclick。

function：（必需）指定要事件触发时执行的函数。

其实事件监听器所要实现的功能和事件绑定是一致的,只是它更灵活也更繁琐一点

它最大的用途我觉得在于可以绑定多个事件,传统的事件绑定只会执行最后一个绑定的事件,相当于事件被覆盖了

而事件监听器的作用在于可以同时监听多个事件的发生

既然可以监听事件,当然也有删除事件的功能

element.removeEventListener(event, function, useCapture)

有增有减的情况下,我们可以封装事件监听

function addEventHandler(target,type,fn){
	    if(target.addEventListener){
        target.addEventListener(type,fn);
   }else{
        target.attachEvent("on"+type,fn);
   }
}

//移除监听事件
function removeEventHandler(target,type,fn){
	   if(target.removeEventListener){
        target.removeEventListener(type,fn);
   }else{
        target.detachEvent("on"+type,fn);
   }
}