JavaScript学习笔记04

键盘鼠标事件-小游戏

一、事件绑定

• 主流浏览器

1、绑定
addEventListener(ev, func, false);
    oDiv.addEventListener('click', demo, false);
    oDiv.addEventListener('click', yangyang, false);
    //事件是不带on的
2、解绑
removeEventListener(ev, func);
    oDiv.removeEventListener('click', yangyang);

• 垃圾浏览器

1、绑定
    attachEvent(ev, func);
        oDiv.attachEvent('onclick', demo);
        //事件是带 on的
2、解绑
    detachEvent(ev, func);
        oDiv.detachEvent('onclick', demo);

• 兼容性写法

//ev  是不带 on的
    function addEvent(obj, ev, func)
    {
        if (obj.addEventListener) {
            obj.addEventListener(ev, func, false);
        } else {
            obj.attach('on'+ev, func);
        }
    }

    function removeEvent(obj, ev, func)
    {
        if (obj.removeEventListener) {
            obj.removeEventListener(ev, func, false);
        } else {
            obj.detach('on'+ev, func);
        }
    }

二、事件冒泡

就是触发子级事件的时候 会同时触发父级对象的事件

如何取消事件冒泡呢？？？

请看下文

三、事件对象

1、主流
    oDiv.onlcick = function (ev) {
        alert(ev);
    }
2、低级浏览器
    oDiv.onclick = function () {
        alert(window.event);
        alert(event);
    }
3、兼容性写法
    oDiv.onclick = function (ev) {
        var oEvent = ev || event;
    }

• 取消事件冒泡（重要）

oSon.onclick = function (ev) {
  var oEvent = ev || event;
  oEvent.cancelBubble = true;
  alert('儿子就是儿子');
}
说明：
    1、cancel   取消
    2、Bubble    冒泡
    3、cancelBubble  取消冒泡 是事件对象中的一个属性
    4、取消事件冒泡 一定要写在 子级事件当中

四、鼠标事件

获取鼠标的坐标

document.onmousemove = function (ev) {
  var oEvent = ev || event;
  console.log(oEvent.clientX, oEvent.clientY);
}
1、clientX   X坐标
2、clientY   Y坐标

五、事件源对象

事件源： 当前事件 操作的元素

通过事件对象找到事件源

通过事件源找到 原对象

oDiv.onclick = function (ev) {
  var oEvent = ev || event;
  //谷歌和垃圾
  //alert(oEvent.srcElement);
  //火狐只支持这个
  //alert(oEvent.target);
  oEvent.srcElement.style.backgroundColor = '#c90';
}

六、键盘事件

1、键盘事件  onkeydown
2、oEvent.keyCode        按键对应的 阿斯科码
   window.event.keyCode
3、ctrl       window.event.ctrlKey
4、禁用 ctrl  + c
document.onkeydown = function (ev) {
  var oEvent = ev || event;
  if (oEvent.ctrlKey && oEvent.keyCode == 67) {
    return false;
  }
}

七、杂项

• 鼠标右键事件 oncontextmenu

//禁用鼠标右键默认的动作
document.oncontextmenu = function (ev) {
  //return false;
  var oEvent = ev || event;
  //火狐专用
  //oEvent.returnValue  = false;
  //基本都支持的
  oEvent.preventDefault();
}

• 自定义鼠标右键菜单

document.oncontextmenu = function (ev) {
  var oEvent = ev || event;
  oEvent.preventDefault();
  var x = oEvent.clientX;
  var y = oEvent.clientY;
  oDiv.style.position = 'absolute';
  oDiv.style.left = x + 'px';
  oDiv.style.top = y + 'px';
  oDiv.style.display = 'block';
}

• window对象

方法	说明
window.open(‘1.html’)	打开1.html
window.close();	关闭页面只有经由js打开的才能使用js关闭
window.history.back();	打开历史前一页
window.history.go(1);	打开历史后一页
window.location.href=’http://www.baidu.com’	跳转到百度
window.print();	打印

- js正则

定界符 原子 元字符 模式修正符

g global 全局匹配

方法	说明
str.match(reg)	返回匹配到的结果
str.search(reg)	返回匹配到结果的下标
str.replace(reg, ‘鸡’)	匹配替换

- form表单

1、可以通过form的name值 找到这个标签对象
    document.name值
2、可以通过找到页面中所有的form 在通过下标确定某一个
    document.forms      //这是一个form的集合
    document.forms[0]
3、可以直接通过input的name值找到input
    document.form的name值.input的name值
4、js提交form
    document.form的name值.submit();

• 下拉框

1、onchange      当下拉框的值改变时就触发
oSel.onchange = function () {
        //console.log(oSel.value);
        console.log(oSel.options[this.selectedIndex].value);
    }