jQuery函数的纯JS版本

Plain JS version for the jQuery function

本文关键字：JS 版本 函数 jQuery      更新时间：2023-09-26

我有以下jQuery代码（我已经更改了div和函数的名称，不会有太大区别）

$(function(){
    $('#div1').bind('touchend',function(){
        function1();
        function2();
    });
});
$(function(){
    $('#div2').bind('touchend',function(){
        function1();
        function3();
    });
});

这是它的普通JS版本，不起作用。 

document.getElementById('div1').addEventListener('touchend',function(){
    function1();
    function2();
},false);
document.getElementById('div2').addEventListener('touchend',function(){
    function1();
    function3();
},false);

如果有人能先解释一下jQuery版本的含义是什么，然后指出我在普通js版本中犯了什么错误，我将不胜感激！

[如果你想知道我为什么要这样做，我需要从我正在构建的 phonegap 应用程序中删除 jQuery，以便页面加载速度更快：-）]

您的代码应该可以在任何支持触摸事件的浏览器/DOM 中工作。我在这里唯一能弄清楚的是，您错过了要调用DOMContentLoaded事件，因此尝试获取/查询尚未准备好的元素。

所以你应该把你的代码包装成 

document.addEventListener('DOMContentLoaded', function () {
}, false);

当您调用 $(function() {}); 时，jQuery 会自动为您执行此操作。如果你将一个函数传递到$()它是$(document).ready(fnc)<</p>

div class="answers"的快捷方式>

代码完全按照您的操作，只是将处理程序分开，我认为您遇到的唯一麻烦是缺乏使用

document.addEventListener('DOMContentLoaded', function () {

这意味着dom还没有准备好，getElementById找不到任何东西。

好吧，我在这里阅读了其他几篇文章，而这篇文章几乎做到了。

document.addEventListener('DOMContentLoaded', function () {
                      var div1 = document.getElementById('div1');
                      var div2 = document.getElementById('div2');
                      // event handler
                      var handler = function (event) {
                        function1();
                        function2();
                      };
                      var handler2 = function(event) {
                        function1();
                        function3();
                      };
                      // Bind the events
                      div1.addEventListener('touchend', handler, false);
                      div2.addEventListener('touchend',handler2,false);
                      }, false);

但是，如果有人可以向我解释什么是流程以及代码如何工作，那么我的一天就完成了：-）

相关文章：