专业做财务公司网站,济南市住房和城乡建设局官网,注册网站查询官网,中国建设银行网站查询密码是什么意思事件流
1. 含义
描述从页面中接收事件的顺序
2. 分类
IE提出的 事件冒泡流 Event BubblingNetscape提出的 事件捕获流 Event Capturing
3. 阶段 事件捕获阶段 处于目标阶段 事件冒泡阶段 事件捕获先于事件冒泡执行
dom
dom0#xff1a;定义句柄方式#xff0c;兼…事件流
1. 含义
描述从页面中接收事件的顺序
2. 分类
IE提出的 事件冒泡流 Event BubblingNetscape提出的 事件捕获流 Event Capturing
3. 阶段 事件捕获阶段 处于目标阶段 事件冒泡阶段 事件捕获先于事件冒泡执行
dom
dom0定义句柄方式兼容性最好dom1没有事件相关定义dom2addEventListener / removeEventListener W3C规范
事件对象e / window.event
1. W3C标准
e事件触发后的详细信息传到事件处理函数的参数里是由MouseEvent构造函数构造的 2. IE
作为window的属性window.event不再传到事件处理函数的参数里
事件源对象
在事件对象里可获取到srcElement和target事件源对象火狐只有targetIE只有srcElementchrome都有【兼容】 oDiv.onclick function (e) {var e e || window.event,tar e.target || e.srcElement
}事件委托/事件代理
并不直接给子元素绑定事件而给父元素绑定免去了给子元素循环绑定事件的不便因为子元素被点击后会冒泡给父级判断下事件源tar.tagName.toLowerCase() xxx 则执行相应… 获取下标
循环比较获得下标
oList.onclick function (e) {var e e || window.event,tar e.target || e.srcElement;for (var i 0; i len; i) {item oLi[i];if (tar item) {console.log(i);}}
}数组方法查找下标【企业级写法】注意todoList案例不能这样判断添加项和现有项是否重复因为li是引用值
oList.onclick function (e) {var e e || window.event,tar e.target || e.srcElementvar index Array.prototype.indexOf.call(oLi, tar);console.log(index);
}自定义属性
bodyul classtestli data-index01/lili data-index12/lili data-index23/lili data-index34/lili data-index45/lili data-index56/li/ulscriptvar oUl document.getElementsByClassName(test)[0]oUl.onclick function (e) {var e e || window.evar tar e.target || e.srcElementconsole.log(e)console.log(tar)console.log(Number(tar.getAttribute(data-index)))}/script
/body
