06月03, 2018

前端学习笔记(08) - 关于DOM事件

DOM0 级事件处理程序

如下写法:

var btn = document.getElementById("myBtn");
btn.onclick = function(){ alert("Clicked"); };

btn.onclick = null; //删除事件处理程序

DOM2 级事件

“DOM2 级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:要处 理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true,表示在捕获 阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。

要在按钮上为 click 事件添加事件处理程序,可以使用下列代码:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function()
{ alert(this.id); }, false);

注意: 通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除;移 除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿 名函数将无法移除

IE事件处理程序

IE 实现了与 DOM 中类似的两个方法:attachEvent()和 detachEvent()。这两个方法接受相同 的两个参数:事件处理程序名称与事件处理程序函数。

要使用 attachEvent()为按钮添加一个事件处理程序,可以使用以下代码。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function()
{ alert("Clicked"); });

注意,attachEvent()的第一个参数是"onclick",而非 DOM 的 addEventListener()方法中 的 click"。

可以使用 preventDefault()来取消其默认行为。

stopPropagation()方法用于立即停止事件在 DOM 层次中的传播,即取消进一步的事件 捕获或冒泡。

跨浏览器的事件对象

虽然 DOM 和 IE 中的 event 对象不同,但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。 IE 中 event 对象的全部信息和方法 DOM 对象中都有,只不过实现方式不一样。不过,这种对应关系 让实现两种事件模型之间的映射非常容易。可以对前面介绍的 EventUtil 对象加以增强,添加如下方法以求同存异。

var EventUtil = {

    addHandler: function(element, type, handler)
    { //省略的代码 },

    removeHandler: function(element, type, handler)
    { //省略的代码 },

    getEvent: function(event)
    { 
        return event ? event : window.event; 
    },

    getTarget: function(event)
    { 
        return event.target || event.srcElement; 
    },

    preventDefault: function(event)
    { 
        if (event.preventDefault){
            event.preventDefault();  
        } else { 
            event.returnValue = false; 
        } 
    },

    stopPropagation: function(event)
    {
        if (event.stopPropagation){
            event.stopPropagation(); 
        } else {
            event.cancelBubble = true;
        }
    },

    getWheelDelta: function(event){
        if (event.wheelDelta){ 
            return (client.engine.opera 
            && client.engine.opera < 9.5 
            ? -event.wheelDelta : event.wheelDelta);
        } 
        else 
        {
            return -event.detail * 40;
        }
    }

};

本文链接:http://www.laijianlou.top/post/front-08.html

-- EOF --

Comments