问答详情
源自:4-2 综合实战题

为什么要使用这样的方法?

这是老师的代码

//事件绑定方法
function bind(el, eventType, callback){
    if(typeof el.addEventListener === 'function'){
        //标准事件绑定方法
        el.addEventListener(eventType, callback, false);
    }else if(typeof el.attechEvent === 'function'){
        //IE事件绑定方法
        el.attachEvent('on' + eventType, callback);
    }
}
//鼠标悬停的处理函数
function mouseoverHandler(e){
    var target = e.target || e.srcElement;
    var outer = document.getElementById('subject');
    var list = outer.getElementsByTagName('li');
    //清空所有LI元素的class
    for(var i = 0; i < list.length; i++){
        list[i].className = '';
    }
    //根据事件的冒泡原理,找到需要变更class 的LI元素
    while(target.tagName != 'LI' || target.tagName == 'BODY'){
        target = target.parentNode;
    }
    target.className = 'big';
}

我的代码:

 for(var i =0; i < list.length; i++){
        list[i].onmouseenter=function(){
        	for(var i=0;i<list.length;i++){
        		list[i].className="";
        	}
        	this.className="big";
		}
}

疑问:为什么老师要使用事件监听的方法?

onmouseenter不是在这里更方便吗?

而且兼容各大浏览器包括IE5.5,并且不会发生冒泡事件。

谢谢回答!

提问者:飞天意大利面神兽 2016-09-28 13:50

个回答

  • 慕莱坞1975833
    2016-09-28 17:00:58
    已采纳

    addEventListener绑定的事件可以有多个,比如addEventListener(eventType, callback1, false);

    addEventListener(eventType, callback2, false);

    callback1,callback2都能执行,

    如果直接绑定事件,比如onmouseenter,一开始时,该事件你只要执行callback1,后来业务拓展,需要在加个callback2方法,如果是直接绑定事件,后面的会覆盖前面的,看一下代码

    list[i].onmouseenter=callback1();

    list[i].onmouseenter=callback2();

    是不是相当于onmouseenter这个事件被重新改写了,所以两者的差别在于是否易于扩展业务需求。

    当然在这个课程中并没有突出哪种更合适,所以还是要看具体的项目需求,按需选择,望采纳,谢谢