5.17-JS事件与事件对象

原生函数 直接绑定

<input  onclick="alert('陈广安个人网站')"  type="button"  value="点击我，弹出警告框" />

自定义函数绑定

<input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
    function myAlert(){
        alert("陈广安个人网站");
    }
</script>

在JavaScript代码中获取DOMO节点进行绑定

<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
    var demo = document.getElementById("demo");
    demo.onclick=function(){
        alert("陈广安个人网站");
    }
</script>

Jquery获取DOMO节点进行绑定

$("#demo").click(function(){
    alert("陈广安个人网站");
})

onclick  //点击会触发的事件 

onfocus  //获得光标会触发的事件

onblur  //失去光标会触发的事件

onmouseover  //鼠标移上会触发的事件 

onmouseout  //鼠标移出会触发的事件 

onmousemove  //鼠标移动会触发的事件 

onchange  //元素内容发生改变会触发的事件 

onload  //当整网页加载完后，才会触发的事件

onsubmit  //当点击提交按钮时，会触发的事件   绑定在form标签

onmousedown  //当鼠标按下，会触发的事件

onmouseup  //当鼠标释放时，会触发的事件

onkeydown  //当键盘的键按下时会触发的事件

onkeyup  //当键盘的键释放时会触发的事件

onresize  //当浏览器窗口发生改变时触发的事件

onscroll  //拖动滚动条事件，当拖动滚动条的时候，触发的事件  

scroll  //当滚动条拖动的时候产生的值

document.body.scrollTop; //谷歌浏览器获取滚动条拖动的值

document.documentElement.scrollTop; //谷歌浏览器获取滚动条拖动的值：

//兼容性的写法

var data = document.documentElement.scrollTop||document.body.scrollTop;

事件对象

target 事件发生的目标 

keyCode 按键的编码 

pageX 元素在body里的x坐标

pageY 元素在body里的y坐标  

clientX 鼠标移动的x距 离

clientY 鼠标移动的y距离

上一篇：5.14-JS日期对象

下一篇：5.19-DOM文档