JS事件处理程序小结

JavaScript与HTML之间的交互是通过事件实现的。

 

• HTML事件处理程序

第一种：

<input type=”button” value=”Click Me” onclick=”alert(‘Clicked’)” />

第二种：

<input type=”button” value=”Click Me” onclick=”showMessage()” />

<script type=”text/javascript”>

    function showMessage() {

    alert(‘good work!’);

}

</script>

解决时差问题：

<input type=”button” value=”Click Me” onclick=”try{showMessage()}catch(ex){}” />

• DOM0级事件处理程序

简单、跨浏览器

首先获取要操作对象的引用，然后指定事件处理程序

这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

var btn = document.getElementById(‘myBtn’);

btn.onclick = function() {

    //...

}

如果事件中有this对象，该this引用当前元素

将事件处理程序属性设置为null可以解除事件处理程序  btn.onclick = null

• DOM2级事件处理程序

“DOM2级事件”：

addEventListener(eventType, handler, boolean)

removeEventListener(eventType, handler, boolean)

参数：事件类型、事件处理函数、true/false

注意：布尔值参数true表示在捕获阶段调用事件处理程序；false在冒泡阶段调用事件处理程序；

与DOM0级方法一样，这里添加的事件处理程序也是依附在元素的作用域中运行

var btn = document.getElementById('btn');

//addEventListener IE9+已经支持

btn.addEventListener('click', function() {

    console.log(this.id);       //btn

}, false);

移除事件处理程序

通过addEventListener添加的匿名事件处理函数将无法移除

• IE事件处理程序

attachEvent(‘on’+eventType, handler)

detachEvent(‘on’+eventType, handler)

attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域，它的事件处理程序在全局作用域中运行。也就是说this对象指向window对象

var btn = document.getElementById('btn');

    btn.attachEvent('onclick', function() {

        console.log(this==window);      //true

    });

其次与DOM方法不同的是在为同一个元素添加多个事件时，事件执行顺序与其添加的顺序相反

• 跨浏览器的事件处理程序

//js事件处理工具对象
var EventUtil = {
    /**
     * 添加事件处理函数
     * @param {DOM Object} target
     * @param {String} eventType
     * @param {Function} handler
     */
    addHandler: function(element, eventType, handler) {
        //IE9、FireFox、chrome等
if (element.addEventListener) {
            element.addEventListener(eventType, handler, false);
        } else if (element.attachEvent) {        //IE7/8/9
            element.attachEvent('on'+eventType, handler);
        } else {
            element['on'+eventType] = handler;        //DOM0级事件
        }
    },
    removeHandler: function(element, eventType, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(eventType, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent('on'+eventType, handler);
        } else {
            element['on'+eventType] = null;            //DOM0级事件
        }
    }
};
var btn = document.getElementById('btn');
    function handler() {
        alert(this.id);
    }
    EventUtil.addHandler(btn, 'click', handler);
    //......
    EventUtil.removeHandler(btn, 'click', handler);

关于this的一个注意：

function Dog() {
    this.dog_name = 'HaHa';
}
Dog.prototype.get_name = function() {
    //return this.dog_name;
    alert(this.dog_name);
}
function show_dog() {
    var dog = new Dog();
    /* 区分：
     * dog.get_name()    单独运行
     * 把dog.get_name做为事件处理器的区别
     */            
    //document.getElementById('btn').onclick = dog.get_name;        //undefined
    document.getElementById('btn').onclick = bind(dog, dog.get_name);    //HaHa
}
//返回函数 把callback在object环境中执行        
function bind(object, callback) {
    return function() {
        callback.apply(object, arguments);
    }
}
show_dog();