基礎焦點 | 事件 | 健盤 | 移動

焦点事件

txt1.onfocus = function () {
  if (this.value == 'please input something') {
    this.value = ''
  }
}
txt1.onblur = function () {
  if (this.value == '') {
    this.value = 'please input something'
  }
}

// obj.focus()//给指定元素设置焦点
// obj.blue() //取消元素焦点
// obj.select() /选择指定元素的文本

btn1.onclick = function () {   txt1.select() }

事件对象
1、event:事件对象，当一个事件发生时，和当前对象发生的这个事件有关的一些详细的信息都会保存到一个指定地方：event对象供我们在需要时调用
2、如果一个函数被事件调用，那么这个函数定义的第一个参数就是事件对象

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

FF无even内部定义全局对象
div鼠标移动

document.onmousemove = function (ev) {
  var ev = ev || event;
  var sct = document.documentElement.scrollTop || document.body.scrollTop;
  var scl = document.documentElement.scrollLeft || document.body.scrollLeft;
  box.style.left = ev.clientX + scl + 'px'
  box.style.top = ev.clientY + sct + 'px'
}

事件流：1、事件冒泡；2、事件捕获

function fn1() {
  alert(this.id)
}
box1.onclick = fn1; //给元素加函数；//告诉box1，如果他接收到一个点击事件，那么他就去执行fn1  //事件函数绑定
box2.onclick = fn1;
box3.onclick = fn1;

//从中间截断，即不会再有冒泡，box3也冒泡不到box1
box2.onclick = function (ev) {
  var ev = ev || event
  ev.cancelBubble = true;
}

var box = document.getElementById('box')
var inp = document.getElementById('btn')
inp.onclick = function (ev) {
  box.style.display = 'block'
  //阻止inp的冒泡 阻止当前对象的当前事件冒泡  即只阻止onclick,如onmouseover等都会有冒泡
  var ev = ev || event
  ev.cancelBubble = true;
}
document.onclick = function () {
  box.style.display = 'none'
}

//FB显示隐藏
var div1 = document.getElementById('div1')
div1.onmouseover = function () { //移到div2时，冒泡到div1了，所以能显示
  this.style.left = 0
}
div1.onmouseout = function () {
  this.style.left = - 100 + 'px'
}

1、事件绑定第一种形式：obj.onclick = fn; 多个绑定会覆盖前面绑定；
2、事件绑定第二种形式：

IE:obj.attachEvent(事件名,事件函数) document.attachEvent('onclick',fn1) IE7下顺序会相反
   <blockquote> 1)无捕获
    2)事件名称有on
    3)IE7下事件执行顺序相反
    4)this指向window
    5)使用call，函数下一个方法,改变一个函数运行中this指向,第二个开始就是原来函数的参数
ockquote>
标准下：obj.addEventListener(事件名，事件函数，是否捕获？) obj.addEventListener('click','fn1', true)
ckquote> 1)有捕获<br />
    2)事件名称无on<br />
    3)顺序正常<br />
    4)this指向触发该函数的对象</blockquote>

//事件绑定方法封装
function on(obj, evt, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false)
  } 
  else {
    obj.attachEvent('on' + evt, function () {
      fn.call(obj);
    })
  }
}
on(document, 'click', fn1)
function fn1() {
  alert(this)
}

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

//先出后进
box1.addEventListener('click', function () {
  alert(1)
}, false)
box1.addEventListener('click', function () {
  alert(3)
}, true)
box3.addEventListener('click', function () {
  alert(2)
}, false)

取消事件绑定
ie:obj.adttachEvent(事件名称，事件函数)
标准： obj.removeEventListener(事件名称，事件函数，是否捕获)

document.onclick = null;
document.removeEventListener('click',fn1,false)

健盘事件
onkeydown:按按下时触发
onkeyup:按健抬起时触发
event.keyCode:数字类型,健值
ctrlKey,shiftKey altKey ,boolean值,当一个事件发生时，如果ctrl || shift || alt是按下的状态返回true,否则返回false

document.onkeydown = function (ev) {
  var ev = ev || event
  alert(ev.keyCode)
}
document.onclick = function (ev) {
  var ev = ev || event
  alert(ev.ctrlKey)
}

txt1.onkeyup = function (ev) {
  var ev = ev || event
  //alert(this.value)
  if (this.value != '') {
    if (ev.keyCode == 13) {
      var oli = document.createElement('li')
      oli.innerHTML = this.value;
      if (ul1.children[0]) { //如果存在子元素
        ul1.insertBefore(oli, ul1.children[0])
      } 
      else { //如果不存在子元素
        ul1.appendChild(oli)
      }
    }
  }
}

移動元素，按健連續觸發延遲問題

<div id="div1" style="width: 100px; height: 100px; background: #bf0000; position: absolute;"></div>

var div1 = document.getElementById('div1')
//有焦点的元素才能够接收健盘事件；
var timer = null;
var onoff = true; //設置開關
var clw = document.documentElement.clientWidth;
var clh = document.documentElement.clientHeight;
document.onkeydown = function (e) { //把健盘事件加到document上
  e = e || event;
  switch (e.keyCode) {
    case 37: //左
      if (onoff) {
        timer = setInterval(function () {
          var dl = div1.offsetLeft;
          if (dl < 10) {
            dl = 10
          }
          onoff = false
          div1.style.left = dl - 10 + 'px'
        }, 14)
      }
      break;
    case 38://上
      if (onoff) {
        timer = setInterval(function () {
          var dt = div1.offsetTop
          if (dt < 10) {
            dt = 10
          }
          onoff = false
          div1.style.top = dt - 10 + 'px'
        }, 14)
      }
      break;
    case 39://右
      if (onoff) {
        timer = setInterval(function () {
          var dl = div1.offsetLeft;
          if (dl > (clw - div1.offsetWidth - 10)) {
            dl = clw - div1.offsetWidth - 10
          }
          onoff = false
          div1.style.left = dl + 10 + 'px'
        }, 14)
      }
      break;
    case 40://下
      if (onoff) {
        timer = setInterval(function () {
          var dt = div1.offsetTop
          if (dt > (clh - div1.offsetHeight - 10)) {
            dt = clh - div1.offsetHeight - 10
          }
          onoff = false
          div1.style.top = dt + 10 + 'px'
        }, 14)
      }
      break;
  }
}
document.onkeyup = function () {
  onoff = true;
  clearInterval(timer);
}

事件默認行為： return false;
自定義右健菜單

document.oncontextmenu = function (e) {
  var e = e || event;
  var scl = document.documentElement.scrollLeft || document.body.scrollLeft;
  var sct = document.documentElement.scrollTop || document.body.scrollTop;
  box.style.display = 'block'
  box.style.left = e.clientX + scl + 'px'
  box.style.top = e.clientY + sct + 'px'
  return false;
}
document.onclick = function () {
  box.style.display = 'none'
}

元素拖拽，方法封裝
拖拽過程如果有文字被選中會產生問題：
原因：默認行為
標準下：阻止拖拽默認行為；return false;
ie：全局捕獲 obj.setCapture() ; 當給一個元素設置全局捕獲以後，此元素會監聽後續發生的所有事件，當有事件發生時就會被當前設置了全局捕獲的元素觸發；

inp1.onclick = function(){
    alert(1);
}
inp2.onclick = function(){
    alert(2);
}
if(inp1.setCapture){
inp1.setCapture()
}  //第一次點任意地方都將觸發alert(1);

function drag(obj) {
  var cw = document.documentElement.clientWidth;
  var ch = document.documentElement.clientHeight;
  obj.onmousedown = function (e) {
    var e = e || event;
    var disW = e.clientX - this.offsetLeft;
    var disH = e.clientY - this.offsetTop;
    //解決IE文字選中後移動問題：
    if (obj.setCapture) {
      obj.setCapture();
    }
    document.onmousemove = function (e) {
      var e = e || event;
      var cw_w = e.clientX - disW;
      var ch_h = e.clientY - disH
      if (cw_w < 0) {
        cw_w = 0
      } 
      else if (ch_h < 0) {
        ch_h = 0
      } 
      else if (cw_w > cw - obj.offsetWidth) {
        cw_w = cw - obj.offsetWidth
      } 
      else if (ch_h > ch - obj.offsetHeight) {
        ch_h = ch - obj.offsetHeight
      }
      obj.style.left = cw_w + 'px'
      obj.style.top = ch_h + 'px'
    }
    document.onmouseup = function () {
      document.onmousemove = null;
      //解決IE8抬起鼠標，釋放全局捕獲 releaseCapture();
      if (obj.releaseCapture) {
        obj.releaseCapture()
      }
    }
    return false; //down事件觸發時陰止默認行為；
  }
}

基礎焦點 | 事件 | 健盤 | 移動 | 拖拽筆記

最新文章

最近回复

分类

归档

其它