js给对象绑定事件
1、要学习js给对象绑定事件，首先我们得了解什么是事件？
一个事件由 事件源 ，事件类型 ， 事件处理函数 组成，其中：
事件源——谁来触发事件
事件类型——触发什么事件
事件处理函数——触发之后做什么
2、事件类型有哪些？
（1）鼠标事件（⻚⾯所有标签都可以触发）
click： 当用户单击鼠标按钮或按下回车键时触发
dblclick： 当用户双击主鼠标按钮时触发。
mousedown：当用户按下了鼠标还未弹起时触发。
mouseup： 当用户释放鼠标按钮时触发。
mouseover： 当鼠标移到某个元素上方时触发。
mouseout： 当鼠标移出某个元素上方时触发。
mousemove： 当鼠标指针在元素上移动时触发。
mouseenter：当鼠标移入某个元素上方时触发
mouseleave：当鼠标移出某个元素上方时触发
【注】* 这里有两套鼠标移入移出事件，它们的区别是：
mouseover、mouseout在鼠标经过子节点时会重复触发
mouseenter、mouseleave在鼠标经过子节点时不会重复触发（也就是说不会冒泡（bubble），当指针从它的⼦层物理空间移到它的物理空间上时不会触发）*
代码如下
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload = function(){
var nodes = document.getElementsByTagName("button");
nodes[0].onclick = function(){
alert("点击");
}
nodes[1].ondblclick = function(){
alert("双击");
}
nodes[2].onmousedown = function(){
nodes[2].innerHTML = "按下";
}
nodes[2].onmouseup = function(){
nodes[2].innerHTML = "抬起";
}
nodes[3].onmouseover = function(){
nodes[3].innerHTML = "移入";
}
nodes[3].onmouseout = function(){
nodes[3].innerHTML = "移出";
}
var oDiv = document.getElementById("div1");
var i = 0;
oDiv.onmousemove = function(){
oDiv.innerHTML = i++;
}
}
</script>
</head>
<body>
<button>单击</button>
<button>双击</button>
<button>按钮</button>
<button>按钮</button>
<div id = 'div1'></div>
</body>
（2）键盘事件（表单和全局window）
keydown： 当用户按下键盘上任意键触发，如果按住不放，会重
复触发。
keypress： 当用户按下键盘上的字符键触发，如果按住不放，会
重复触发。
keyup： 当用户按下了鼠标还未弹起时触发。
代码如下
window.onload = function(){
var i = 0;
// window.onkeydown = function(){
// document.title = i++;
// }
//只支持字符键，不支持，功能，ctrl+shift+大小写切换的键位（不支持）
window.onkeypress = function(){
document.title = i++;
}
window.onkeyup = function(){
document.title = "抬起";
}
}
（3）window事件（全局window）
load： 当页面完全加载后在 window 上面触发，或当框架集加载完毕后在
框架集上触发。
unload：当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架
集上触发。（ 【注】只有IE兼容）
scroll： 当用户滚动带滚动条的元素时触发。
resize： 当窗口或框架的大小变化时在 window 或框架上触发。
代码如下
<script>
window.onload = function(){
var i = 0;
window.onscroll = function(){
document.title = i++;
}
window.onresize = function(){
document.title = i++;
}
}
</script>
</head>
<body style = 'height: 3000px'>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
</body>
（4）表单事件（表单）
blur： 当页面或元素失去焦点时在 window 及相关元素上触发。
focus： 当页面或者元素获得焦点时在 window 及相关元素上面触发
。
select： 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。
change： 当文本框(input 或 textarea)内容改变且失去焦点后触发。
submit： 当用户点击提交按钮在元素上触发。【注】必须绑定在form这个元素节点上
reset： 当用户点击重置按钮在元素上触发。【注】必须绑定在form这个元素节点上
代码如下
<script>
window.onload = function(){
var oInput1 = document.getElementById("input1");
var oInput2 = document.getElementById("input2");
var oInput3 = document.getElementById("input3");
var oInput4 = document.getElementById("input4");
oInput1.onblur = function(){
oInput1.value = '失去焦点';
}
oInput2.onfocus = function(){
oInput2.value = '获取焦点';
}
oInput3.onselect = function(){
alert("选中文本");
}
oInput4.onchange = function(){
alert("文本内容发生改变，并且失去焦点");
}
}
</script>
</head>
<body>
<input type="text" id = 'input1' value = '默认文本'>
<input type="text" id = 'input2' value = '默认文本'>
<input type="text" id = 'input3' value = '默认文本'>
<input type="text" id = 'input4' value = '默认文本'>
</body>
3、js给对象绑定事件的方法
1、内联模式（直接将事件添加到元素上）
学过css的同学听着这个词一定很熟悉，因为我们在引用css代码是时一定用过css的内联模式，而js给对象绑定事件时用的内联模式跟css的内联是一样的用法。我们来看一下下面的代码
<script>
function btnClick(){
alert("内联模式");
}
</script>
</head>
<body>
<button onclick = "btnClick();">内联模式</button>
</body>
这就是内联模式的写法，最后点击按钮，网页输出“内联模式”。
2、外联模式（将事件作为属性添加到对象上）
外联模式跟css的内嵌和外联有些相似，它可以写在当前html的script里面，也可以引用外部的js文件
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
alert("外联模式");
}
}
</script>
</head>
<body>
<button id = 'btn1'>外联模式</button>
</body>
</html>
<script>
window.onload = function(){
var oF1 = document.getElementById("f1");
oF1.onsubmit = function(){
alert("提交");
}
oF1.onreset = function(){
alert("重置");
}
}
</script>
</head>
<body>
<form action="" id = f1>
<input type="submit">
<input type="reset">
</form>
</body>
3、事件监听器
前两种事件绑定方式其实是有局限的，比如我要重复给一个事件，绑定多个函数，后面绑定的函数会把前面的函数覆盖掉，而我又没有办法删除某一个元素节点上指定事件下的某一个函数。这时我们就需要用到事件监听器。
事件绑定：（低版本IE浏览器不支持）
addEventListener
格式：
元素节点.addEventListener()
参数：
第一参数：绑定的事件类型 click mouseover
第二参数：绑定的函数 函数名/匿名函数
第三参数：默认是false （事件冒泡(false) 事件捕获(true)）
removeEventListener
格式：
元素节点.removeEventListener()
参数：
第一个参数：删除事件类型
第三个参数：删除的函数 必须传入函数名
我们来看一下代码的编写
<script>
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
//添加事件
function addEvent(node, eventType, funcName){
if(node.addEventListener){
node.addEventListener(eventType, funcName, false);
}else{
//click onclick
node.attachEvent("on" + eventType, funcName);
}
}
//删除事件
function removeEvent(node, eventType, funcName){
if(node.removeEventListener){
node.removeEventListener(eventType, funcName);
}else{
node.detachEvent("on" + eventType, funcName);
}
}
addEvent(aBtns[1], "click", function(){
alert("默认事件");
});
function show(){
alert("后添加的行为");
}
aBtns[0].onclick = function(){
addEvent(aBtns[1], "click", show);
}
aBtns[2].onclick = function(){
removeEvent(aBtns[1], "click", show);
}
}
</script>
</head>
<body>
<button>添加事件</button>
<button>按钮</button>
<button>删除事件</button>
</body>
打开网页我们发现，当我们点击“按钮“时是，网页只弹出了“默认事件”的警告框。
先点击“添加事件”，再点击“按钮”时，网页先后弹出了“默认事件”的警告框，在弹出了“后添加的行为”的警告框。
再点击“删除事件”和“按钮”，网页就又只弹出了“默认事件”的警告框。
另外解释一下，代码中addEvent方法和removeEvent方法是兼容写法，它可以兼容低版本IE浏览器。
4、事件对象属性
（1）button属性
值 说明
0 表示主鼠标按钮（常规一般是鼠标左键）
1 表示中间的鼠标按钮（鼠标滚轮）
2 表示主鼠标按钮（常规一般是鼠标右键）
（2）获取⿏标坐标的属性
clientX clientY 原点位置，窗口可视区域左上角为原点
pageX pageY 原点位置，整个页面的左上角（带滚动高度）
screenX screenY 原点位置，整个屏幕的左上角
offsetX offsetY 相对于当前被按下标签的左上角
好了，关于js给对象绑定事件就先写这些吧。我是第一次发表文章，如有写的不对或不足的地方，欢迎指出。如果觉得不错，可以点个赞吗？感兴趣的同学我们也可以互相关注一起学习H5。就酱，拜拜~~
1693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
