Maison > Article > interface Web > Partage d'exemples de javascript imitant le déclencheur de jquery pour déclencher des événements de souris
Partage d'exemples de javascript imitant le déclencheur de jquery pour déclencher des événements de souris
- 小云云original
- 2018-03-15 16:26:253402parcourir
Pendant le projet, il sera utilisé que l'utilisateur déclenche un événement. Il faut déclencher l'événement correspondant sur un autre élément puis exécuter le code correspondant. Cela peut être réalisé via un déclencheur en jquery
API de déclenchement
J'y ai pensé aujourd'hui, s'il n'y a pas de jq, comment peut-il être implémenté en utilisant js ? J'ai récemment lu pour la deuxième fois le livre "Javascript Advanced Programming" et j'ai acquis de nouvelles connaissances.
Si l'événement click est déclenché, la première impression est définitivement de directement element.click();. Le déclenchement de dbclick, mouseleave, focus, mouseenter et d'autres événements peut-il également être directement element.mouseleave() ?
Je l'ai donc exécuté et j'ai constaté qu'une erreur avait été signalée ! C'est vrai, il ne s'agit pas simplement d'ajouter element.eventType() pour que l'événement correspondant puisse être déclenché directement.
J'ai donc naturellement pensé aux méthodes createEvent initEvent dispatchEvent.
// 创建一个事件对象，就好像你绑定事件回调函数里获得的那个事件对象一样var myEvent = document.createEvent('Event')
// 初始化这个事件对象，为它提高需要的“特性”myEvent.initEvent('myEventName', true, true)
// 按照常见的方式绑定对该事件的监听，这里的 element 可以是任何一个元素，你懂的element.addEventListener('myEventName', function(evt) {
// 这里，evt 就是你创建的事件对象了，不过它会更丰富一些——这些是浏览器为你做的})// 然后这样触发它element.dispatchEvent(myEvent)Téléchargez le code directement : (je l'ai essayé et il n'est pas compatible avec
<!DOCTYPE html><html lang="zh-cmn-Hans"><head>
<meta charset="utf-8" />
<title>原生javascript防jquery的trigger触发鼠标事件</title>
<meta name="author" content="" />
<style>
.p{height:40px;width:100px;background:#ccc;}
</style></head><body>
<h2>我是H2</h2>
<p class="p">点击p</p></body></html><script>
var h2 = document.querySelector("h2"); var p = document.querySelector(".p");
h2.onclick = function(event){
var ev = event || window.event;
console.log(ev.type);
}
h2.ondbclick = function(event){
var ev = event || window.event;
console.log(ev.type);
}
h2.onmouseenter = function(event){
var ev = event || window.event;
console.log(ev.type);
}
h2.onmouseleave = function(event){
var ev = event || window.event;
console.log(ev.type);
}
h2.onfocus = function(event){
var ev = event || window.event;
console.log(ev.type);
}
h2.onblur = function(event){
var ev = event || window.event;
console.log(ev.type);
} //触发事件方法
function trigger(elem, event){
var myEvent = document.createEvent('Event') // 初始化这个事件对象，为它提高需要的“特性”
myEvent.initEvent(event, true, true); //执行事件
elem.dispatchEvent(myEvent);
}
p.onclick = function(){
trigger(h2, "click"); //触发click事件
trigger(h2, "dbclick"); //触发dbclick事件
trigger(h2, "mouseenter"); //触发mouseenter事件
trigger(h2, "mouseleave"); //触发mouseleave事件
trigger(h2, "blur"); //触发blur事件
trigger(h2, "focus"); //触发focus事件
}</script>Le résultat est le suivant suit :
(Je l'ai essayé et il n'est pas compatible avec
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!