GVKun编程网logo

jQuery等同于JavaScript的addEventListener方法

12

针对jQuery等同于JavaScript的addEventListener方法这个问题，本篇文章进行了详细的解答，同时本文还将给你拓展addEventListener的用法示例介绍_javascri

针对jQuery等同于JavaScript的addEventListener方法这个问题，本篇文章进行了详细的解答，同时本文还将给你拓展addEventListener 的用法示例介绍_javascript技巧、document.addEventListener使用介绍_javascript技巧、DOMContentLoaded 上的 window.addEventListener 无法正常工作 - JavaScript、Javascript .addEventListener 不起作用等相关知识，希望可以帮助到你。

本文目录一览：

jQuery等同于JavaScript的addEventListener方法

jQuery等同于JavaScript的addEventListener方法

我试图找到与此JavaScript方法调用等效的jQuery：

document.addEventListener(''click'', select_element, true);

我已经达到：

$(document).click(select_element);

但这并不能达到与JavaScript方法的最后一个参数相同的结果-一个布尔值，指示是否应在捕获或冒泡阶段执行事件处理程序根据我对理解被排除在外。

如何使用jQuery指定该参数或以其他方式实现相同的功能？

答案1

小编典典

并非所有浏览器都支持事件捕获（例如，InternetExplorer版本低于9）不支持事件捕获，但是所有浏览器都支持事件冒泡，这就是为什么它是将处理程序绑定到所有跨浏览器抽象（包括jQuery）中的事件的阶段。

与您在jQuery中寻找的内容最接近的是使用bind()（on()在jQuery1.7+中已被jQuery取代）或特定于事件的jQuery方法（在这种情况下，无论如何都在内部click()调用bind()）。全部使用引发事件的冒泡阶段。

addEventListener 的用法示例介绍_javascript技巧

addEventListener 的用法示例介绍_javascript技巧

(要注意的是div必须放到js前面才行)

一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如：

复制代码 代码如下:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

那么将只有method3生效。

如果是Mozilla系列，用addEventListener可以让多个事件按顺序都实现，比如：
复制代码 代码如下:

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

如果是ie系列，用attachEvent可以让多个事件按顺序都实现，比如：
复制代码 代码如下:

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

=======================================================

Mozilla中：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

DOM2 的进化:
DOM 0 Event DOM 2 Event
onblur() blur
onfocus() focus
onchange() change
onmouseover() mouseover
onmouseout() mouseout
onmousemove() mousemove
onmousedown() mousedown
onmouseup() mouseup
onclick() click
ondblclick() dblclick
onkeydown() keydown
onkeyup() keyup
onkeypress() keypress
onsubmit() submit
onload() load
onunload() unload


新的DOM2 用法可以addEventListener()这个函数来观察到:
复制代码 代码如下:

addEventListener(event,function,capture/bubble);

参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:
复制代码 代码如下:

window.attachEvent(”submit”,myFunction());

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.

如何判断是否支持哪种监听呢？如：
复制代码 代码如下:

if (typeof window.addEventListener != “undefined”) {
window.addEventListener(”load”,rollover,false);
} else {
window.attachEvent(”onload”,rollover)
}

上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

document.addEventListener使用介绍_javascript技巧

document.addEventListener使用介绍_javascript技巧

document.addEventListener("事件名称", 函数, false);

复制代码 代码如下:

function 某函数(event){
// 方法执行
}

addEventListener里最后一个参数决定该事件的响应顺序；

如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick　

如果为false事件的顺序为 标签的onclick事件 ---- document.onclick ---- addEventListener

理解为其他代码的调用入口

DOMContentLoaded 上的 window.addEventListener 无法正常工作 - JavaScript

DOMContentLoaded 上的 window.addEventListener 无法正常工作 - JavaScript

如何解决DOMContentLoaded 上的 window.addEventListener 无法正常工作 - JavaScript？

这是我的第一个 JavaScript 片段。我遇到了以下问题。 我正在尝试使用 Django Rest Framework 数据加载序列化，然后呈现问题列表和分页栏。我也有 likeQuestion、PaginationListener 和 SortingListener 函数。

在下面的代码片段中，我在 fetch 函数中执行了 likeQuestion、PaginationListener 和 SortingListener 函数。它有效，但由于它是递归的，因此每次点击都会导致多个 http 请求加倍（实际上只有 SortingListener 函数会这样，PaginationListener - 令人惊讶的是没有）。

我还尝试在 fetch 函数之外执行所有三个函数。它不起作用：当我尝试获取元素时，html 集合的长度为零。我用 window.addEventListener(''DOMContentLoaded'',(e) => {}) 试过了。还是不行。

在 fetch 函数之外，它仅适用于 setTimeout。但在这种情况下，PaginationListener 仅适用于第一次点击。而且超时似乎不是一个很好的决定。

我应该如何更改我的代码以使其顺利运行？

const url = document.getElementById(''question-list'').dataset.url
getQuestionList(url)


// Ask.index page loading
function getQuestionList(url) {
    const questionList = document.getElementById(''question-list'')
    fetch(url).then(response => response.json()).then(json => {

        // Questions List loading
        questionList.innerHTML = ''''
        for(const question of json.results){
            date = new Date(question.date)
            const el = document.createElement(''div'')
            el.classList.add(''row'',''justify-content-center'',''my-3'')
            el.innerHTML = ''<div>Question HTML</div>''
            const likeButton = el.querySelector(''.like-btn'')
            if(question.like){
                likeButton.classList.add(''active'')
            }
            questionList.appendChild(el)
        }

        // Pagination Links loading
        const pagination = document.getElementById(''pagination'')
        pagination.innerHTML = ''''
        if (json.links.first){
            pagination.innerHTML += ''<li><ahref="'' + json.links.first + ''">Первая</a></li>''
        } else {
            pagination.innerHTML += ''<lihttps://www.jb51.cc/tag/dis/" target="_blank">disabled"><ahref="#" disabled>Первая</a></li>''
        }
        if (json.links.second_prevIoUs){
            pagination.innerHTML += ''<li><ahref="'' + json.links.second_prevIoUs + ''">'' + (json.current - 2) + ''</a></li>''
        }
        if (json.links.prevIoUs){
            pagination.innerHTML += ''<li><ahref="'' + json.links.prevIoUs + ''">'' + (json.current - 1) + ''</a></li>''
        }
        pagination.innerHTML += ''<li><span>'' + json.current + ''</span></li>''
        if (json.links.next){
            pagination.innerHTML += ''<li><ahref="'' + json.links.next + ''">'' + (json.current + 1) + ''</a></li>''
        }
        if (json.links.second_next){
            pagination.innerHTML += ''<li><ahref="'' + json.links.second_next + ''">'' + (json.current + 2) + ''</a></li>''
        }
        if (json.links.last){
            pagination.innerHTML += ''<li><ahref="'' + json.links.last + ''">Последняя</a></li>''
        } else {
            pagination.innerHTML += ''<lihttps://www.jb51.cc/tag/dis/" target="_blank">disabled"><ahref="#" disabled>Последняя</a></li>''
        }

        likeQuestion()
        PaginationListener()
        SortingListener()
    })
}


function likeQuestion() {
    const button = document.getElementsByClassName(''like-btn'')
    Array.from(button).forEach(element => {
        element.addEventListener(''click'',() => {
            const url = element.dataset.url
            const request = new XMLHttpRequest()
            request.responseType = ''json''
            request.open(''GET'',url)
            request.setRequestHeader(''X-Requested-With'',''XMLHttpRequest'')
            request.send()
            request.onload = function () {
                if (this.status >= 200 && this.status < 400) {
                    if (this.response.auth) {
                        window.location = this.response.auth
                    } else {
                        element.querySelector(''.like_count'').textContent = this.response.like_count
                        if (this.response.add) {
                            element.classList.add(''active'')
                        } else {
                            element.classList.remove(''active'')
                        }
                    }
                } else {
                    console.log(''Did not get anything'')
                }
            }
            request.onerror = function () {
                console.log(''Connection error'');
            }
        })
    })
}

function PaginationListener() {
    const pagesLinks = document.getElementsByClassName(''page-link'')
    Array.from(pagesLinks).forEach(element => {
        element.addEventListener(''click'',(event) => {
            const url = element.getAttribute(''href'')
            if (url) {
                getQuestionList(url)
                window.scrollTo({top: 0,behavior: ''smooth''})
            }
            event.preventDefault()
        },false)
    })
}


function SortingListener(){
    const questionList = document.getElementById(''question-list'')
    const sortingField = document.getElementById(''id_order_by'')
    sortingField.addEventListener(''change'',(event)=>{
        const url = questionList.dataset.url + ''?order_by='' + event.target.value
        getQuestionList(url)
    })
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

Javascript .addEventListener 不起作用

Javascript .addEventListener 不起作用

你可以像这样调用函数

long

工作正常

int

在事件中正确分配的函数调用

为什么？

窗口加载时触发的函数不是事件调用。并且侦听器没有为事件正确分配功能

   canvas.addEventListener('pointerup',function(e) {
      listenerPointerUp(params,e)
    });

    const listenerPointerUp = (params,evt) =>{
        //code
    }

canvas.onpointerup = listenerPointerUp(params)

解决方案

let params = "clicked"
document.querySelector('#demo').addEventListener('click',listenerPointerUp(params));

function listenerPointerUp(e) {
  console.log(e)
}
<button id="demo">click</button>

今天关于jQuery等同于JavaScript的addEventListener方法的介绍到此结束，谢谢您的阅读，有关addEventListener 的用法示例介绍_javascript技巧、document.addEventListener使用介绍_javascript技巧、DOMContentLoaded 上的 window.addEventListener 无法正常工作 - JavaScript、Javascript .addEventListener 不起作用等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇onclick进入全屏（onclick弹出提示框）

下一篇创建一个自定义的Jackson注释（jackson自定义注解）

相关文章