JS基础——事件操作总结
2018-06-24 02:18:51来源:未知 阅读 ()
通用事件绑定
function bindEvent(elem,type,fn) { elem.addEventListener(type,fn); } let a =document.getElementById('a'); bindEvent(a,'click',function(e){ e.preventDefault() //阻止浏览器默认行为,防止调转 alert(‘clicked’); })
事件冒泡
<body> <div> <p id ="p1">激活</p> <p id ="p2">取消</p> <p id ="p3">取消</p> </div> <div> <p id ="p4">取消</p> <p id ="p5">取消</p> </div> </body>
let body =document.body let p1 =document.getElementById('p1'); bindEvent(p1,'click',function(e){ e.stopPropagation(); //阻止事件冒泡 alert('激活') }) bindEvent(body,'click',function(e){ alert('取消') })
事件代理
<body> <div id="div1"> <p id ="p1">激活</p> <p id ="p2">取消</p> <p id ="p3">确认</p> </div> </body>
let body =document.body let div1 =document.getElementById('div1'); bindEvent(div1,'click',function(e){ const target =e.target; if(target.nodeName === 'A') { //判断是否是a标签 alert('target.innerHTML') } })
事件绑定函数(完善)
function bindEvent(elem,type,selector,fn) { if(fn == null){ fn = selector; selector = null; } elem.addEventListener(type,function(e){ if(selector){ const target= e.target if(target.matches(seletor)){ fn.call(target, e) } }else { fn(e); } }); }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- JS 控件事件小结 2020-03-25
- JS之相等操作符详解 2020-03-12
- 浅谈JS的基础类型与引用类型 2020-02-29
- 分享JavaScript获取网页关闭与取消关闭的事件 2020-02-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash