如何通过onclick添加多个事件？

Question

那天面试官问我一个问题，如何用onclick给一个元素添加多个事件。

前提是这个元素已经有一个其它人绑定的事件，在无法修改那个绑定代码的情况下现在你需要再绑定一个，如何做？

element.onclick = function(){
  alert(1);
}

这个是未知的，只知道已经绑定了一个事件，现在需要添加一个绑定：

element.onclick = function(){
  alert(2); 
}

请赐教。

Answer 1

面试官估计是想考你给onclick重新包裹一个函数后上下文的切换与参数的传递

function addClickEvent(el,fn){
    if(el.onclick){
        var _bak = el.onclick;
        el.onclick = function(e){
            _bak.call(this,e)
            fn.call(this,e)
        }
    }else{
        el.onclick = fn
    }
}

Answer 2

突发奇想 不知可不可以？ 但是一般还是不用DOM0级事件模型吧

var _onclick = element.onclick;
element.onclick = function () {
    _onclick();
    alert(2);
}

这样的方式绑定的事件多了感觉调用栈会溢出

Answer 3

elem.onclick = function (fn) {
    var bak = elem.onclick;
    return function (e) {
        bak && bak.call(this, e);
        fn.call(this, e);
    };
}(new_callback)

Answer 4

用addEventListener吧

Answer 5

http://blog.csdn.net/u0142900... ;
【JQuery】一个DOM元素，多次绑定同一事件的解决方案 推荐你一个博客地址;
不知道能不能解决你的问题;

Answer 6

if(element.addEventListener){

element.addEventListener("onclick",myFunction1);//主流的浏览器
element.addEventListener("onclick",myFunction2);
}

else(element.attachEvent){

element.attachEvent("onclick",myFunction1);  //IE8及更早
element.attacheEvent("onclick",myFunction2);

}

Answer 7

<div id="box"></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    box.onclick = function () {
        console.log(111);
    };
    var $box = $("#box");
    $box.on("click.goudan" , function () {
        console.log(222222);
    });
    $box.on("click.dachui" , function () {
        console.log(33333);
    });
</script>

Answer 8

思路：
前置条件：元素E, 已有的事件：this.A();
需求：给元素E在不修改A事件的前提下，增加一个事件B();
实现：
function B() {

// Do something here

}
this.A() {

// Do something..
this.B();

}

Answer 9

事件绑定 addEventListener attachEvent 需要考虑兼容性