事件基础内容

96
wudimingwo
2018.08.28 21:39 字数 260

多数内容来自渡一公开课笔记
另外还有这两篇

javascript事件系统的发展史

javascript event(事件对象)详解

1、ele.onxxx = function (event) {}
兼容性很好,但是一个元素只能绑定一个事件处理程序
基本等同于写在 HTML 行间上
this指向dom
<div onclick='console.log("adg")'></div>

2、 ele.addEventListener(type, fn, false);
可绑定多个事件处理程序,不能给同一个函数绑定多次
this指向dom
3、 ele.attachEvent(‘on’ + type, fn);
ie,一个事件同样可以绑定多个处理程序,同一个函数绑定多次都可以
this指向window

封装兼容版

function addEvent (ele,type,handle) {
            if(ele.addEventListener) {
              ele.addEventListener(type,handle,false);
            }else if(ele.attachEvent) {
              ele.attachEvent('on' + type,function () {
                handle.call(ele);
              });
            }else {
              ele['on'+type] = handle;
            }
          }

javascript事件系统的发展史

感觉这也是个大神,
我刚学事件绑定的时候,也想过能不能用 onclick 绑定两个函数,
或者说,模拟 addEventListener(); 我没想到, 这位大神是这么做的

<p id="aa" onclick="alert('第一次')">能绑定多个同类型函数</p>
 <script type="text/javascript">
   var p = document.getElementById("aa")
   var addEvent = function(el,type,fn) {
     var type = "on"+type
     var old = el[type];
     if (typeof el[type] != 'function') {
       el[type] = fn
     }else {
       el[type] = function() {
         old();
         fn();
       }
     }
   }
   addEvent(p,"click",function(){alert('第二次')});
   addEvent(p,"click",function(){alert('第三次')});

技惊四座有没有?
最亮的实际是这句
var old = el[type];  
因为我潜意识当中,el[type] 只能进行赋值, 压根没想到也能取值.
他把原来的函数提取出来和下一个要绑定的函数放一起了.
这个我还无法消化,因为我没有合适的概念去归纳他.
这个感觉就像是 str += 'a'
又感觉像是 惰性函数 在函数里 重写函数.

这个完成的事情是, 每次执行函数的时候,能把之前的函数提取出来,整合成一个函数?
解除事件处理程序
1、ele.onclick = false/‘’/null; ==> 解除 ele.onxxx = function (event) {}
2、ele.removeEventListener(type, fn, false);==>解除 addEventListener(type, fn, false)
3、ele.detachEvent(‘on’ + type, fn); ==> obj.attachEvent(‘on’ + type, fn);
注:若绑定匿名函数,则无法解除

这你就发现一个小问题了, 如果是匿名函数则无法解除,
我们上面封装事件绑定时,为了保证this指向ele,
兼容ie时,我们用了匿名函数,这就导致,我们无法用detach解除该事件绑定?
事件处理模型 — 事件冒泡、捕获
事件处理的两个模型:事件冒泡、捕获(不能同时存在)
        <div>
            <p>
              <span onclick= 'console.log(1)'></span>
            </p>
        </div>
冒泡: 点击事件 会 依次发生 从 span,p,div,body,html,document,window
捕获:点击事件 发生顺序跟 冒泡方向相反
捕获是 chrome 有,ie没有 addEventListener(type,fn,true) 第三个参数改true就是捕获

触发顺序,先捕获,后冒泡
同一个对象的一个事件处理类型,上面绑定了两个事件处理,分别执行事件冒泡和
事件执行

focus,blur,change,submit,reset,select 等事件不冒泡

阻止冒泡,阻止捕获

封装版本
function stopBubble (e) {
            if(e.stopPropagation) {
              e.stopPropagation();// chrome
            }else {
              e.cancelBubble = true;//ie
            }
          }
e.stopImmediatePropagation(); 这个也可以

用法上有个注意的地方.
想阻止冒泡,应该在子元素上绑定事件,并且阻止冒泡.
想阻止捕获,应该在父元素上绑定捕获事件,并且阻止捕获.
(作为一个小白至今我只碰到过阻止冒泡的需求.)



阻止默认事件(如右键弹出菜单栏,表单提交刷新页面等默认事件)

封装版

function preDefault (e) {
            if(e.preventDefault) {
              e.preventDefault();
            }else {
              e.returnValue = false;
            }
          }

似乎 return false 也能取消默认事件.

a标签的话 还有这种方式.
<a href = "javascript:void(0)">百度</a>
事件对象
事件源,
事件委托:优点:
1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件
dom小白笔记