你的位置:首页 > 软件开发 > Java > js事件底层原理探究

js事件底层原理探究

发布时间:2017-11-24 11:00:07
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></hea ...

    

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <button>事件监听原理探究</button><script> var btn = document.getElementsByTagName("button")[0];// btn.addEventListener("click",fn1);// btn.addEventListener("click",fn2);   var i=0; fn("click",fn1,btn); fn("click",fn2,btn); fn("click",fn3,btn);   function fn1(){  i++;  console.log("我是第一个监听"+i); } function fn2(){  i++;  console.log("我是第二个监听"+i); } function fn3(){  i++;  console.log("我是第三个监听"+i); }  function fn(str,fn,ele){  //判断位置要注意:如果进入绑定事件本身,那么该事件已经本绑定了  //所以获取旧的事件必须在新的事件绑定之前  var oldEvent = ele["on"+str];  ele["on"+str] = function () {   //不能直接执行函数,因为我们还不知道以前有没有绑定我同样的事件   //进行判断,如果以前有过绑定事件,那么把以前的执行完毕在执行现在的事件,如果没有就直接执行   //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false   //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true   if(oldEvent){    //因为oldEvent本身他就是函数本身,那么后面加一个();就是执行函数    // console.log(oldEvent()+"oldEvent"+i);    oldEvent();    fn();   }else{    //没有绑定过事件    fn();    console.log("没有绑定事件");   }  } }</script></body></html>

 

原标题:js事件底层原理探究

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。