Question

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

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

使用jquery添加click事件处理程序：

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

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

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

大问题是为什么？任何想法？

P.S。我对“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 mobile css文件时似乎没有点击，可能是因为它在复选框上显示了标签。不使用CSS，一切都按预期工作。

[编辑3]

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

Answer 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) {};

jquery mobile：为什么.bind（）工作但不是addEventListener？

1 个答案: