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

001-DOM事件

时间:2023-04-03 00:38:01 HTML

决定继续写博客,记录下工作和学习中遇到的问题,每天晚上总结学习和遇到的问题。1.DOM事件1.HTML事件处理程序2.DOMlevel0事件(给事件处理程序属性赋一个function函数)element.onclick(function(){})3.DOMlevel2事件(element.addEventListener(type,fn,false),(false加入冒泡阶段),element.attachEvent(type,fn,false))2.封装一个兼容各种浏览器的对象varEventUtil={addEvent:function(element,type,fn){if(element.addEventListener){element.addEventListener(type,fn,false);}elseif(element.attachEvent){element.attachEvent('on'+type,fn);//兼容IE}else{element['on'+type]=fn;//DOM级别0}},removeEvent:function(element,type,fn){if(element.removeEventListener){element.removeEventListener(type,fn,false);}elseif(element.detachEvent){元素。detachEvent('on'+type,fn);}else{element['on'+type]=null;}}}3。小例子HTML结构

JS代码我们现在给这个按钮添加事件//whatever写一个函数,假设触发了这个按钮的点击事件,这个函数就会被调用functionshowMsg(event){alert(event.target.nodeName);//将显示绑定到此事件的标签的名称event.stopPropagation();//防止冒泡event.preventDefault();//防止默认行为}//获取这个按钮varbtn0=document.getElementById('btn0');//调用上面写的封装函数绑定事件EventUtil。addEvent(btn0,'点击',showMsg);4.总结主要是复习DOM事件,然后做两个小练习1.封装事件处理2.Event事件对象