当前位置: 首页 > Web前端 > CSS

JavaScript疑难杂症系列-Event

时间:2023-03-31 00:36:28 CSS

Event这块知识比较老套,但是对于我来说,需要整理很多,感悟很多,温故知新。每次看这篇,都有不同的收获。(这里就不长篇大论了,只挑重点,具体的朋友自己去了解)什么是动作,或者说事件被编程时系统会发生什么。系统通过它告诉程序员,如果程序员愿意,Programmer-以某种方式回应它。添加事件方法元素属性varbtn=document.querySelector('button');btn.onclick=function(){varrndCol='rgb('+random(255)+','+random(255)+','+random(255)+')';document.body.style.backgroundColor=rndCol;}或varbtn=document.querySelector('button');functionbgChange(){varrndCol='rgb('+random(255)+','+random(255)+','+随机(255)+')';document.body.style.backgroundColor=rndCol;}btn.onclick=bgChange内联事件按我functionbgChange(){varrndCol='rgb('+random(255)+','+随机(255)+','+随机(255)+')';document.body.style.backgroundColor=rndCol;}或Pressme注册事件监听器addEventListener()和removeEventListener();btn.addEventListener('click',function(){varrndCol='rgb('+random(255)+','+random(255)+','+random(255)+')';document.body.style.backgroundColor=rndCol;});或者btn.removeEventListener('click',bgChange);元素属性的优缺点:1.兼容性好2.行为分离3.容易操作主体对象,因为function是用as如果出现on***属性,可以直接用this来引用对象中的对象问题。缺失:1.为同一个监听器注册多个处理器,后面的会覆盖前面的btn.onclick=function(){alert('a')};btn.onclick=function(){alert('b')};内联事件优秀:1.兼容性好,最早的事件处理方式2.方便快捷缺点:1.代码杂乱2.难管理,效率低下,一个按钮看着还行,一百个按钮怎么办?必须在文件中添加100个属性3.文档很难解析注册事件侦听器优点:1.它允许为事件添加多个单独的处理程序这对于DHTML库或Mozilla扩展尤其有用,即使是其他库/扩展需要很好工作2.它使您可以更好地控制侦听器被激活时的阶段(捕获与冒泡)3.它适用于任何DOM元素,而不仅仅是HTML元素4.缺少行为分离:兼容性(但有很多互联网上的成熟黑客);事件对象详情请参考事件详情-https://developer.mozilla.org当DOM上的事件被触发时,事件处理函数中会产生一个事件对象事件,这个对象包含了所有相关的信息到事件。包括导致事件的元素、事件类型以及与特定事件相关的其他信息。varbtn=document.getElementById("myBtn");btn.onclick=function(event){alert(event.type);//“点击”}btn.addEventListener(“点击”,function(event){alert(event.type);//“点击”},false);event.currentTarget和event.target事件对象的target属性始终是刚刚发生的事件对元素的引用例如,您可能有一组16个方块,它们在被单击时消失。使用e.target,您始终可以准确选择当前正在操作的对象(正方形)并执行操作使其消失,而不必以更困难的方式选择它。vardivs=document.querySelectorAll('div');for(vari=0;i

  • item1
  • item2
  • item3
  • item4
  • item5
  • item6
  • 我的自定义事件。

    ");});$("btn").trigger("myClick");传递数据触发器(tpye[,datea]);第一个参数是要触发的事件类型,第二个单数是要传递给事件处理函数的附加数据,以数组形式传递。通常,可以给回调函数传递一个参数来区分事件是代码触发的还是用户触发的$("#btn").bind("clickCustomize",function(event,message1,message2){//获取数据$("#test").append("p"+message1+message2+"

    ");});$("#btn").trigger("clickCustomize",["我的自定义","事件"]);//传递两个数据$("#btn").trigger("clickCustomize",["MyCustom","Event"]);//传递两个数据(2)。triggerHandler();(防止默认事件)triggerHandler("lickCustomize");DOM自定义事件的优缺点:(1)、优点:1、自定义事件的触发时机完全由我们自己控制,这意味着JavaScript的一种解耦。我们可以通过自定义事件的机制灵活控制多个关联但逻辑复杂的操作。2、由于绑定也可以解除绑定,如果不需要,直接去掉绑定事件(2)。缺点1.兼容性差,得自己hack(jq除外)