关于JavaScript与HTML的交互事件(5)


document.getElementsByTagName('a').onclick = function (e) {
            e.preventDefault();
        }


stopPaopagation()方法可以停止事件在DOM层次的传播,即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生

复制代码 代码如下:


var handler = function (e) {
            alert(e.type);
            e.stopPropagation();
        }
        addEvent(document.body, 'click', function () { alert('Clicked body')});
        var btnClick = document.getElementById('btnClick');
        addEvent(btnClick, 'click', handler);


若是注释掉e.stopPropagation(); 在点击button的时候,由于事件冒泡,body的click事件也会触发,但是调用这句后,事件会停止传播。

IE中的事件对象访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时,event对象作为window对象的一个属性存在

复制代码 代码如下:


var handler = function () {
            var e = window.event;
            alert(e.type);
        }
        var btnClick = document.getElementById('btnClick');
        btnClick.onclick = handler;


我们通过window.event取得了event对象,并检测到了其类型,可是如果事件处理程序是通过attachEvent添加的,那么就会有一个event对象被传入事件处理程序中

复制代码 代码如下:


var handler = function (e) {
            alert(e.type);
        }
        var btnClick = document.getElementById('btnClick');
        attachEvent(btnClick, handler);



当然这时候也可以通过window对象访问event,方便起见,我们一般会传入event对象,IE中所有的事件都包含以下属性方法

属性/方法

 

类型

 

读/写

 

说明

 
cancelBulle   Boolean   读/写   默认为false,设置为true后可以取消事件冒泡  
returnValue   Boolean   读/写   默认为true,设为false可以取消事件默认行为  
srcElement   Element   只读   事件的目标元素  
type   String   只读   被触发的事件类型  
跨浏览器的事件对象虽然DOM和IE的event对象不同,但基于它们的相似性,我们还是可以写出跨浏览器的事件对象方案

复制代码 代码如下:


function getEvent(e) {
            return e || window.event;
        }

function getTarget(e) {
            return e.target || e.scrElement;
        }

function preventDefault(e) {
            if (e.preventDefault)
                e.preventDefault();
            else
                e.returnValue = false;
        }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgsgj.html