如何在 jquery 中访问附加的事件处理程序？

Question

我在 HTML 中有一个简单的按钮，如下所示：

<input type='button' id='btnPrint' value='Print' onclick="changeStylesheet();" />

此按钮已包含一个 onclick 事件处理程序。我在这里想要实现的是能够为相同的按钮编写 onclick 事件处理程序。我想添加第二种方法来跟踪按钮被点击的次数。

一些方法：

第一：根据内联事件注册在 HTML 中附加另一个函数调用。

<input type='button' id='btnPrint' value='Print' onclick='changeStylesheet();trackThis();>' />

这是最简单的方法，但在我的情况下不可行。

第二：抓取onclick事件，检查是否未定义。然后，使用 JavaScript 原生语法用匿名函数重构事件处理程序。

var elem = document.getElementById('btnPrint');
var existingHandler = **elem.onclick ? elem.onclick : function () {};**
elem.onclick = function () {
     trackThis();
     existingHandler();
};

第三：虽然上述方法有效，但我很想了解如何使用 jQuery 语法来学习上述 #2 方法的方法。

 var elem = $('#btnPrint');
    var existingHandler = **elem.click ? elem.click : function () {};**
    elem.click(function () {
        trackThis();
        existingHandler()
    });

我的#3 解决方案正在发生的事情是我得到了 Uncaught TypeError: Object [object Window] has no method 'trigger' 错误。

任何提示将不胜感激。

Answer 1

如果要在 jQuery 中附加两个处理程序，则只需设置两个单击处理程序。在内部，jQuery 实现了一种“观察者模式”，这样它就可以聚合处理程序，并按照添加的顺序依次执行它们。

$('#btnPrint').on('click', firstHandler);
$('#btnPrint').on('click', secondHandler);

这些语句不必是连续的，甚至不必在同一范围内。

如果 HTML 中已经指定了处理程序，则同样的原则也适用。 jQuery 将简单地执行原始处理程序之后的任何附加处理程序。

HTML：

<input type='button' id='btnPrint' value='Print' onclick=".....;" />

jQuery:

$('#btnPrint').on('click', secondHandler);

见fiddle

编辑 ...

还可以更改顺序，以便原始处理程序在 jQuery 中附加的处理程序之后执行：

var $btnPrint = $('#btnPrint');
var originalHandler = $btnPrint.get(0).onclick;
$btnPrint.get(0).onclick = null;

$btnPrint.on('click', secondHandler);
$btnPrint.on('click', originalHandler);

见fiddle

Answer 2

如果我理解你的问题，

这应该可行，

$('#btnPrint').off("click", "**" ).on('click',function(){
     trackThis();
     existingHandler(); 
})

即首先是 off 现有的事件处理程序，然后是 on 您的自定义事件处理程序。

如果这对您没有帮助，这可能是您想要的，

How to check if an event handler exist using jQuery or JS?

编辑

如果你想覆盖内联onclick，你可以使用这种肮脏的方法。

jQuery 代码：

$(function(){ 
        var mydiv = $('#mydiv');
        var inlineClick = mydiv.attr('onclick');

        mydiv.removeAttr('onclick').click(function(){
            // your code 
            alert('mycode');

            eval(inlineClick);

            // or first do, eval(inlineClick);
            //then your code later

        })
    });     
    function inlinefun(){
        alert('I am inline function'); 
    }

标记：

<div id='mydiv' onclick='inlinefun();'>Mydiv</div> 

没有“邪恶”评估

（可能并非在所有情况下都有效，只是给了你一个方向）

$(function(){ 
        var mydiv = $('#mydiv');

            // Dirty way to get function name and its args by a string.
    var inlineClick = mydiv.attr('onclick').split('(');
    var funName = inlineClick[0];
            var args = inlineClick[1].replace(')','');


    mydiv.removeAttr('onclick').click(function(){
        // your code 
        alert('mycode');  

        // The default inline function
        window[funName](args);

        // you can change the order as you want

    })
});     
function inlinefun(msg){
            // I know I am passing string, so removing the quotes, you need a generalised approach here
    alert(msg.replace('"','')); 
}

标记：

<div id='mydiv' onclick='inlinefun("I am inline function");'>Mydiv</div>