JS事件类型学习

一、 跨浏览器兼容事件(IE8及其以下浏览器)

  

//addHandler: function (element, type, handler)  element:控件， type :事件类型 handler:回调函数
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false)
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler)
        } else {
            element['on' + type] = null
        }
    },
    removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false)
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler)
        } else {
            element['on' + type] = null
        }
    },
    preventDefault: function (ev) {
        if (ev.preventDefault) {
            ev.preventDefault()
        } else {
            ev.returnValue = false
        }
    },
    stopPropagation: function (ev) {
        if (ev.stopPropagation) {
            ev.stopPropagation()
        } else {
            ev.cancelBuble = false
        }
    },
    getTarget: function (ev) {
        return ev.target || ev.srcElement
    }
}

// 调用
var child = document.getElementById('child')
var parent = document.getElementById('parent')
EventUtil.addHandler(child, 'click', function (ev) {

        var target = EventUtil.getTarget(ev)
        alert('child')
        EventUtil.stopPropagation(ev) // 阻止冒泡

        EventUtil.preventDefault(ev) // 阻止默认行为

    }
)
EventUtil.addHandler(parent, 'click', function (ev) {
        alert('parent')
    }
)
EventUtil.removeHandler(child, 'click', function () {
})

 二、其他事件

//addHandler: function (element, type, handler) element:控件， type :事件类型 handler:回调函数

//窗口大小发生变化时触发
EventUtil.addHandler(parent, 'resize', function (ev) {
        alert('resize')
    }
);
//页面产生滚动时触发
EventUtil.addHandler(parent, 'scroll', function (ev) {
        alert('scroll')
    }
);
//焦点事件 列如input
EventUtil.addHandler(input, 'blur', function (ev) {
        alert('元素失去焦点时')
    }
);
EventUtil.addHandler(input, 'focus', function (ev) {
        alert('元素获取焦点时')
    }
);
EventUtil.addHandler(input, 'focusin', function (ev) {
        alert('元素获取焦点时, ')// 老版本浏览器
    }
);
EventUtil.addHandler(input, 'focusout', function (ev) {
        alert('元素失去焦点时, ')// 老版本浏览器
    }
);
EventUtil.addHandler(bt, 'dblclick', function (ev) {
        alert('双击事件, ')
    }
);
// 鼠标按下
EventUtil.addHandler(bt, 'mousedown', function (ev) {
    alert('鼠标按下时 ')
    console.log(ev.button)
    // ev.button == 0 点击鼠标左键
    // ev.button == 1 点击鼠标滚轴
    // ev.button == 2 点击鼠标右键
    }
);
// 鼠标松开 mousedown ~mouseup 相当于执行了一个click 事件
EventUtil.addHandler(bt, 'mouseup', function (ev) {
        alert('鼠标松开 ')
    }
);
// 鼠标在区域移动时
EventUtil.addHandler(bt, 'mousemove', function (ev) {
        alert('鼠标移动到区域时 ')
    }
);
// 鼠标离开区域时
EventUtil.addHandler(bt, 'mouseout', function (ev) {
        alert('鼠标离开区域时 ')
    }
);
// 鼠标进入区域时
EventUtil.addHandler(bt, 'mouseover', function (ev) {
        alert('鼠标进入区域时 ')
    }
);
// 鼠标进入绑定区域时
EventUtil.addHandler(bt, 'mouseenter', function (ev) {
        alert('mouseenter ')
    }
);

// 鼠标离开绑定区域时
// mouseenter mouseleave与mousemove mouseout的区别在于后者包含其子元素区域，前者只对绑定区域有效对子元素所占空间无效
EventUtil.addHandler(bt, 'mouseleave', function (ev) {
        alert('mouseleave ')
    }
);
//  配合按下键盘
EventUtil.addHandler(bt, 'click', function (ev) {
        if (ev.shiftKey) {
            console.log('按下shift')
            // ctrlkey , altkey ..........
        }
    }
);
 按下按键时
EventUtil.addHandler(txt, 'keydown', function (ev) {
        console.log(ev.keyCode)
    }
);
//  抬起按键时
EventUtil.addHandler(txt, 'keyup', function (ev) {
        console.log(ev.keyCode)
    }
);
// ASCLL码， 字符键触发
EventUtil.addHandler(txt, 'keypress', function (ev) {
        console.log(ev.charCode)
    }
);
//document 结构中发生任意变化触发事件
EventUtil.addHandler(document, 'DOMSubtreeModified', function (ev) {
        console.log('do somethings')
    }
);
//document 结构中发生任意变化之前会触发事件
EventUtil.addHandler(document, 'DOMNodeRemovedFromDocument', function (ev) {
        console.log('do somethings')
    }
);
//document 结构中添加任意元素触发
EventUtil.addHandler(document, 'DOMNodeInserted', function (ev) {
        console.log('do somethings')
    }
);
//document 结构中添加任意元素之前触发
EventUtil.addHandler(document, 'DOMNodeInsertedIntoDocument', function (ev) {
        console.log('do somethings')
    }
);
//在DOM树之后就会触发，不理会图像，JS，css文件或其他资源是否下载
// DOMContentLoaded 快于load事件
EventUtil.addHandler(document, 'DOMContentLoaded', function (ev) {
        console.log('DOMContentLoaded快于load 事件')
    }
);
// readystatechange 支持IE ,firfox opera 提供文档或者元素加载过程，
// 但难预料与load事件一起使用的时候
// 1 document.readyState == uninitialized 尚未初始化
// 2.loading 对象正在加载数据
//3.interactive 可以操作对象，但还未完全加载
//4.对象已经加载完毕
EventUtil.addHandler(document, 'readystatechange', function (ev) {
        console.log('do somethings')
    }
);
//hashchange事件， 给window添加， URL #号后面值的变化
EventUtil.addHandler(document, 'hashchange', function (ev) {
        console.log(event.oldURL + ':' + event.newURL)
    }
);

三、 移动端手指操作事件

// 手指触摸屏幕时触发
EventUtil.addHandler(bt, 'touchstart', function (ev) {
        console.log('do something')
        console.log(ev.touches) // 记录手指触摸点的数组
        console.log(ev.changedTouches) // 记录手指移动触摸点信息
        console.log(ev.targetTouches) // 记录在绑定元素事件元素上面触摸点的信息
    }
);
// 手指触摸屏幕上滑动时触发
EventUtil.addHandler(bt, 'touchmove', function (ev) {
        console.log('do something')
    }
);
// 手指触摸屏幕上移开时触发
EventUtil.addHandler(bt, 'touchend', function (ev) {
        console.log('do something')
    }
);
// 系统停止跟踪触摸时候触发
EventUtil.addHandler(bt, 'touchcancel', function (ev) {
        console.log('do something')
    }
);