事件

事件

***1*元素创建的三种方式
* 1. document.write(“内容和标签”) 页面上所存在的内容会被覆盖
* 2.对象.innerHTML = “内容和标签” 对象中的内容被覆盖
* 3.document.createELement(“标签的名字”) 创建完之后追加到父级元素
* 对象.appendChild(要添加的标签对象) 添加到父元素的末尾
*** 2
为元素绑定事件
// 对象.addEventlistener(“事件的类型”, 事件的处理函数, false) ie8不支持
// 参数1 : 事件的类型—>事件的名字, 没有on
// 参数2: 事件的处理函数 —>匿名函数/ 命名函数
// 参数3: 布尔值 . 目前写false . 默认值就是false,可写可不写
// 对象.attachEvent(“有on的事件类型”, 事件的处理函数) ie8特有的方式, 其他浏览器 不支持
3
兼容性
function addEvent(element, type, fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type, fn, false);
}else if(element.attachEvent){
element.attachEvent(“on”+type, fn)
}else{
element[“on”+type] = fn;
}
}
function removeEvent(element, type, fnName) {
if(element.removeEventListener){
element.removeEventListener(type, fnName, false)
}else if(element.detachEvent){
element.detachEvent(“on”+type, fnName)
}else{
element[“on”+type] = null;
}

}
**4**
事件阶段
* 三个事件阶段:
* 1 事件捕获阶段  : 从外向内触发
* 2.事件目标阶段:  最开始选择的那个
* 3.事件冒泡阶段:  从里向外触发
* */
//同时给三个div注册点击事件
var arr = [my$("dv3"), my$("dv2"), my$("dv1")];
arr.forEach(function (ele, i) {
    //给每一个绑定点击事件
    ele.addEventListener("click", function (e) {
        console.log(e)
        //e.eventPhase  判断是什么事件阶段
        console.log(this.id+"===="+e.eventPhase)
    }, true)
    //  为false 是冒泡事件,  为true是捕获事件
})