如何在 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();
};

第三：虽然上述方法有效，但我很好奇学习上述#2方法但使用jQuery语法的方法。

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

我的#3解决方案正在发生的事情是我得到了未捕获的类型错误：对象 [对象窗口] 没有方法"触发器"错误。

任何提示将不胜感激。

Answer 1

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

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

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

如果已经在 HTML 中指定了处理程序，则同样的原则也适用。 jQuery 将只执行原始处理程序之后的任何其他处理程序。

.HTML：

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

j查询：

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

见小提琴

编辑。。。

也可以尊重顺序，以便原始处理程序在 jQuery 中附加的处理程序之后执行：

var $btnPrint = $('#btnPrint');
var originalHandler = $btnPrint.get(0).onclick;
$btnPrint.get(0).onclick = null;
$btnPrint.on('click', secondHandler);
$btnPrint.on('click', originalHandler);

见小提琴

Answer 2

如果我理解你的问题没错，

这应该有效，

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

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

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

如何使用jQuery或JS检查事件处理程序是否存在？

编辑

如果要覆盖内联onclick，可以使用这种脏方法。

j查询代码：

$(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>