什么用javascript让一个对象同时监听鼠标单击和鼠标双击事件

JavaScript014

什么用javascript让一个对象同时监听鼠标单击和鼠标双击事件,第1张

<input name="test" id="test" type="button" onmouseup="c()" value="单双击测试"/>

注意不是onclick,是onmouseup

var count = 0

var timer

function c(){

count ++

timer = window.setTimeout(function(){

if(count==1) alert("单击")

else alert("双击")

window.clearTimeout(timer)

count=0

},300)

}

该接口用来观察节点变化,MutationObserver是一个构造器,接收一个回调函数callback用来处理节点变化时所做的操作。 var observe = new MutationObserver(mutationCallback)     var observe = new MutationObserver(mutationCallback)      observe.observe(dom, config)// 后面介绍config的配置    var observe = new MutationObserver(mutationCallback)    observe.disconnect()     var observe = new MutationObserver(mutationCallback)     var record = observe.takeRecords() let config = {     attributes: true, //目标节点的属性变化     childList: true, //目标节点的子节点的新增和删除     characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化     subtree: true, //目标节点所有后代节点的attributes、childList、characterData变化 }  <div id="h">123123</div>     <script>             window.onload=function(){                 // Firefox和Chrome早期版本中带有前缀                 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver                 // 选择目标节点                 var target = document.querySelector('#h')                  // 创建观察者对象                 var observer = new MutationObserver(function(mutations) {                       mutations.forEach(function(mutation) {                          console.log(mutation)                      })                  })                  // 配置观察选项:                 var config = { attributes: true, childList: true, characterData: true }                  // 传入目标节点和观察选项                 observer.observe(target, config)                  // 随后,你还可以停止观察                 // observer.disconnect()                 document.getElementById('h').onclick=function(){                 // this.style.width="50px"                 this.innerHTML = "888888"                 }             }     </script> 原文链接:https://blog.csdn.net/weixin_42420703/article/details/98334813

语法

element.addEventListener(event, function, useCapture)

第一个参数是事件的类型(比如 "click" 或 "mousedown")。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。

注意:请勿对事件使用 "on" 前缀;请使用 "click" 代替 "onclick"。

addEventListener可以对一个dom添加多个监听器,并且会顺序执行。

开发中,会遇到多个js文件都使用window.onload,然而只有最后一个绑定的生效,如下:

window.onload = func1()

window.onload = func2()

这时可以用addEventListener来解决:

window.addEventListener('load', func1)

window.addEventListener('load', func2)