js DOM事件
Posted 笨笨的妞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js DOM事件相关的知识，希望对你有一定的参考价值。
事件的绑定
1-1 html事件
直接在html元素标签内添加事件，执行脚本
语法：<tag 事件=“执行脚本”></tag>
this指向
在事件触发的函数中，this是对该dom对象的引用
1-2 DOM 0级事件
DOM 0级事件
1.通过dom获取html元素
2.(获取html元素).事件=执行脚本
说明：
执行脚本可以是封装好的函数，也可以是匿名函数
注意：点击按钮,调用clickBtn这个函数，调用时函数名后不要带(),否则当页面刷新时也会触发这个函数
//获取按钮
btn=document.getElementById("btn");
function clickBtn() {
alert("我是按钮")
}
//****点击按钮 调用clickBtn这个函数，调用时函数名后不要带(),否则当页面刷新时也会触发
btn.onclick=clickBtn;
不建议使用html事件原因：
1.多元素绑定相同事件时，效率低
2.不建议在thml元素中写Js代码
事件类型
2-1 事件类型-onload
鼠标事件
onload :页面加载时触发
onclick：鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onblur：失去焦点时触发
onchange：域内容改变时发生
onload
onload 作用在window上，当页面加载完成后触发
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 页面加载事件</title>
<script>
//页面加载时执行，unload 页面卸载不常用
window.onload=function () {
//获取box
var box=document.getElementById("box")
box.onclick=function () {
alert("wo 被点击了")
}
}
</script>
<!--报错：Cannot set property ‘onclick‘ of null-->
<!--原因：脚本是从上往下执行，当代码执行到获取box时，找不到box-->
<!--解决：将js放在div后边或者使用wondow.onload-->
</head>
<body>
<div id="box">这是一个div</div>
</body>
</html>
2-2事件类型-onfocus和onblur
onfocus用于
input标签type为text、password
textarea标签
2-3事件类型-onchange
一般用于select 元素
或者单选按钮（radio）或复选框（checkbox）
2-4事件类型-onresize和onscroll
onsubmit :表单中的确认按钮被点击时发生 不是加在按钮上的，是加在form表单上的
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时发生
onmouseup：在元素上松开鼠标按钮时触发
onresize：当调整浏览器窗口大小时触发
onscroll：拖动滚动条时触发
键盘事件与keyCode属性
onkeydown：在用户按下一个键盘按键时发生
onkeypress：在键盘被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode属性
返回以上三个事件触发时键的值的字符代码，或键的代码
以上是关于js DOM事件的主要内容，如果未能解决你的问题，请参考以下文章