jQuery mobile：为什么 .bind() 有效但 addEventListener 无效？答案

【问题标题】：jQuery mobile: Why does .bind() work but not addEventListener?jQuery mobile：为什么 .bind() 有效但 addEventListener 无效？
【发布时间】：2012-08-03 23:26:58
【问题描述】：

使用 jQuery mobile，我试图在一个简单的复选框上注册一个单击事件处理程序，如下所示：

<input type="checkbox" name="cb" id="cb" />
<label for="cb">I am a checkbox</label>

使用 jQuery 添加点击事件处理程序有效：

$("#cb").bind("click", function(){...});

不调用使用传统 DOM 方法添加的事件处理程序：

document.getElementById("cb").addEventListener("click", function(){...});

大问题是为什么？有什么想法吗？

附言我对“pageinit”和“pagebeforeshow”的事件处理程序有类似的问题，只能在通过“bind”添加时接收。这些事件不是作为 DOM 事件触发的吗？

[编辑]

这是一个完整的测试用例 (link to jsfiddle)：

<!DOCTYPE html> 
<html> 
    <head>
    <meta charset="utf-8">
    <title>My Page</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#cb").bind("click", function(){alert("Clicked by jquery")});
            document.getElementById("cb").addEventListener("click", function(){alert("Clicked by DOM")});
        });
    </script>
</head> 
<body> 

<div data-role="page">
    <input type="checkbox" name="cb" id="cb" />
    <label for="cb">I am a checkbox</label>
</div>

</body>
</html>

[编辑 2]

回答我自己的问题：使用 jquery 移动 css 文件时似乎没有点击，可能是因为它在复选框上显示了标签。不使用 CSS，一切都按预期工作。

[编辑 3]

回答我自己的第二个问题，为什么我无法通过 addEventListener 捕获“pageinit”和其他自定义事件：它是 jQuery bug。

【问题讨论】：

标签： jquery dom jquery-mobile jquery-events

【解决方案1】：

据我所知 addEventListener 需要三个参数，而不仅仅是 2 个，例如：

/**
* in DHTML
* @param {String} type
* @param {Function} listener
* @param {Boolean} [useCapture]
*/
window.addEventListener = function(type,listener,useCapture) {};

或者

/**
* in DOMEvents
* @param {String} type
* @param {EventListener|Function} listener
* @param {Boolean} [useCapture]
*/
EventTarget.prototype.addEventListener = function(type,listener,useCapture) {};

【讨论】：

useCapture 在很长一段时间内已经是可选的（请参阅MDN），所以不可能。不过谢谢！