javascript 事件-3 （事件委托和模拟事件）

最新推荐文章于 2026-06-22 19:44:33 发布

原创最新推荐文章于 2026-06-22 19:44:33 发布 · 156 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #json #ViewUI

javascript 专栏收录该内容

11 篇文章

订阅专栏

事件委托

//这就是事件委托
$(document).on('click',function(event){

   var id = event.target.id;
   switch(id){
     case 'btn1':
     //do something 
     break;
     case 'btn2':
     // do another
     break;

    }
})
//适合事件委托的事件有
//click , mousedown , mouseup , keydown, keyup , keypress

移除事件

为了浏览器内存得到优化一般需要移除事件处理程序

//可以用这种方式 来移除
document.onclick =null;

模拟事件

事件类型包括

UIEvents, MouseEvents, MutationEvents, HTMLEvents,

模拟鼠标事件

var event = document.createEvenet("MouseEvents");


//MouseEvent的构造参数
event.initMouseEvent("click".....);

var btn = document.getElementById("id");

//触发事件
btn.dispatchEvent(event);

模拟键盘事件

var event = document.createEvent("KeyboardEvent");

event.initKeyboardEvent('keydown',true,true,document.defaultView,"a",0,"Shift",0);

var text  = document.getElementById("text");
text.dispatchEvent(event);

自定义DOM事件

var event = document.createEvent("CustomEvent");

event.initCustomEvent(type,bubbles, cancelable,detail);


element.dispathEvent(event);

IE中模拟事件

var event = document.createEventObject();

event.screenX = 100; 
evnet.screenY = 110;
...
...
//触发事件
element.fireEvent(event);

12-29 收获

//跳出当前循环
//使用break 关键字
var len = arr.length ; 
for (var i = 0 ; i < len ; i ++){
     var json = arr[i];
     for(var key in  json){
              if(json[key] == 'abc'){

                  break ; 
                }
     }

}