07-JavaScrpit-事件

DOM事件介绍

  • 点击一个DOM元素
  • 键盘按一下一个键
  • 输入框输入内容
  • 页面加载完成

编写一个通用的事件监听函数

描述事件冒泡流程

  • DOM树形结构
  • 事件冒泡
  • 阻止冒泡
  • 冒泡的应用

对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

  • 使用代理
  • 知道代理的有点
通用事件绑定
  1. var btn = document.getElementById('btn1');
  2. btn.addEventListener('click',function (event) {
  3.   console.log('clicked');
  4. })
  6. function bindEvent(elem,type,fn) {
  7.   elem.addEventListener(type,fn);
  8. }
  9. var a = document.getElementById('link1')
  10. bindEvent(a,'click',function(e){
  11.   e.preventDefault(); //阻止默认行为
  12.   alert('clicked');
  13. });

事件冒泡

  1. <body>
  2.   <div id="div1">
  3.     <p id="p1">激活</p>
  4.     <p id="p2">取消</p>
  5.     <p id="p3">取消</p>
  6.     <p id="p4">取消</p>
  7.   </div>
  8.   <div id="div2">
  9.     <p id="p5">取消</p>
  10.     <p id="p6">取消</p>
  11.   </div>
  12. </body>
  1. var p1 = document.getElementById('p1');
  2. var body = document.body;
  3. bindEvent(p1,'click',function (e) {
  4.   e.stopPropatation();
  5.   alert('激活');
  6. });
  7. bindEvent(body,'click',function(e){
  8.   alert('取消');
  9. })

代理

  1. <div id="div1">
  2.   <a href="#">a1</a>
  3.   <a href="#">a2</a>
  4.   <a href="#">a3</a>
  5.   <a href="#">a4</a>
  6.   <!-- 会随时新增更多a标签 -->
  7. </div>
  1. var div1 = document.getElementById('div1');
  2. div1.addEventListener('click',function (e) {
  3.   var target = e.target;
  4.   if (target.nodeName === 'A') {
  5.     alert(target.innerHTML);
  6.   }
  7. })

完善通用绑定事件的函数

  1. //使用代理
  2. var div1 = document.getElementById('div1');
  3. bindEvent(div1,'click','a',function (e) {
  4.   console.log(this.innerHTML);
  5. })
  1. function bindEvent(elem,type,selector,fn) {
  2.   if (fn == null) {
  3.     fn = selector;
  4.   }
  5.   elem.addEventListener(type,function (e) {
  6.     var target;
  7.     if (selector) {
  8.       target = e.target;
  9.       if (target.matches(selector)) {
  10.         fn.call(target,e);
  11.       }
  12.     }else {
  13.       fn(e);
  14.     }
  15.   })
  16. }