BOM/EVENT学习笔记(2)

Event事件详解

焦点事件

焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点时，就可以接收用户的输入
可以通过一些方式给元素设置焦点：
1.点击
2.tab键
3.js
注意：不是所有元素都能够接收焦点，能够响应用户操作的元素才有焦点

<input type="text" id="text1" value="请输入内容">
<input type="button" value="全选" id="btn">
<script>
  var oText = document.getElementById('text1');

  //onfocus: 当元素获取到焦点时触发
  oText.onfocus = function(){
    if(this.value == '请输入内容'){
      this.value = '';
    }
  }

  //onblur: 当元素失去焦点时触发
  oText.onblur = function(){
    if(this.value == ''){
      this.value == '请输入内容';
    }
  }

  //obj.foucs() 给指定的元素设置焦点
  //obj.blur() 取消指定元素的焦点
  //obj.select() 选择指定元素里面的文本内容
  oText.foucs();

  var oBtn = document.getElementById('btn');
  oBtn.onclick = function(){
    oText.select(); //select 能操作可交互元素的文本内容
  }
</script>

参考：
1.HTML DOM Event 对象
2.onfocus 事件
3.onblur 事件
4.onselect 事件

event事件对象和clientX,clientY

event：事件对象，当一个事件发生的时候，和当前的这个对象发生的这个事件有关的一些详细的信息都会被保存到一个指定地方–event对象中，以供在需要时调用。

事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数
//一个函数是不是事件函数并不是在函数定义时决定的，而是函数调用时决定

兼容
ie/chrome：event是一个内置全局对象
// firefox：事件对象是通过事件函数的第一个参数传入
标准浏览器下：事件对象是通过事件函数的第一个参数传入

如果一个函数是被事件调用的，那么，这个函数定义的第一个参数就是事件对象

clientX/clientY: 当一个事件发生的时候，鼠标到页面可视区的距离

<script>
alert(event); // 这里没有事件发生
// ie/chrome undefined
// firefox 报错 event is not defined

function fn1(ev){
  // alert(event);
  // alert(ev);
  var ev = ev || event;
  alert(ev);

  for(var attr in ev){
    console.log(attr + '=' + ev[attr]);
  }
}

fn1();  // 不是事件调用的函数
document.onclick = fn1(); // 是事件调用的函数，event有内容
</script>

<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;}
</style>
<div id="div1"></div>
<script>
  window.onload = function(){
    // onmousemove: 当鼠标在一个元素上移动时触发
    // 触发频率不是像素，而是间隔时间，在一个指定的时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

    var i = 0;
    var oDiv = document.getElementById('div1');

    document.onmousemove = function(ev){
      // document.title = i++;

      var ev = ev || event;

      oDiv.style.left = ev.clientX + 'px';
      oDiv.style.top = ev.clientY + 'px';

    }
  }
</script>

示例：点击查看

事件流、事件冒泡机制

事件流

• 事件冒泡
  • 取消冒泡：ev.cancelBubble=true
  • 例子：仿select控件
• 事件捕获
  • IE下是没有的，在绑定事件中，标准下是有的

<style>
  div{padding: 40px;}
  #div1{background: red;}
  #div2{background: green;}
  #div3{background: blue;position: absolute;top: 300px;}
</style>
<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>
<script>
  window.onload = function() {
    /**
     * 事件冒泡机制：当一个元素接收到事件的时候，会把它接收到的所有传给它的父级，一直到顶层window。
     */

    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    function fn1(){
      alert(this.id);
    }
    // oDiv1.onclick = fn1;  通常说的给XXX加事件，其实是给元素加事件处理函数
    // 事件函数绑定
    oDiv1.onclick = fn1;  //告诉div1，如果它接收到了一个点击事件，那么它就去执行fn1
    // oDiv2.onclick = fn1;  // 这句话注释掉后，事件发生后不做任何处理，但是不影响接收事件
    oDiv3.onclick = fn1;

  }
</script>

阻止冒泡：在当前要阻止冒泡的事件函数中调用 ev.cancelBubble=true;

<style>
div{width: 100px;height: 200px; border: 1px solid red;}
</style>
<input type="button" value="按钮" id="btn">
<div id="div1"></div>
<script>
window.onload = function(){
  var oBtn = document.getElementById('btn');
  var oDiv = document.getElementById('div1');

  oBtn.onclick = function(ev){
    var ev = ev || event;
    ev.cancelBubble = true; // 阻止当前对象的当前事件的冒泡

    oDiv.style.display = 'block';
  }

  oBtn.onmouseover = function(ev){
    var ev = ev || event;
    ev.cancelBubble = true; // 阻止当前对象的当前事件的冒泡
  }

  document.onclick = function(){
    //setTimeout(function(){
    //    oDiv.style.display = 'none';
    //}, 1000);
    oDiv.style.display = 'none';
  }
}
</script>

事件绑定的第二种形式

给一个对象绑定一个事件处理函数的第一种形式：赋值

doucument.onclick = fn1;
doucument.onclick = fn2;  //会覆盖fn1

后面的赋值会把前面的赋值覆盖掉

给一个对象的同一个事件绑定多个不同的函数
给一个对象绑定一个事件处理函数的第二种形式：函数

• IE：obj.attachEvent(事件名称, 事件函数);

  • 没有捕获
  • 事件名称有on
  • 事件函数执行的顺序：标准IE->正序；非标准IE->倒序；
  • this指向window

    document.attachEvent('onclick', fn1);
    document.attachEvent('onclick', function(){
        fn1.call(document);
    });
    document.attachEvent('onclick', fn2);

• 标准：obj.addEventListener(事件名称, 事件函数, 是否捕获);
  是否捕获：默认是false false：冒泡 true：捕获

  • 有捕获
  • 事件名称没有on
  • 事件执行的顺序是正序
  • this指向触发该事件的对象

    document.addEventListener('onclick', fn1, false);
    document.addEventListener('onclick', fn2, false);

call 函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表
第一个参数为空，不会改变this指向

function bind(obj, evname, fn){
  if(obj.addEventListener){
    obj.addEventListener(evname, fn, false);
  }else{
    obj.attachEvent('on' + evname, function(){
      fn.call(obj);
    });
  }
}
bind(doucument, 'click', fn1);

参考：
1.HtmlDocument.AttachEvent Method)
2.EventTarget.addEventListener()