事件基础
在Javacript中，一个事件包含3个部分
- 事件主角
- 按钮？div元素？其他？
- 事件类型
- 点击？移动？其他？
- 事件过程
- 这个事件都发生了什么
JavaScript中常见的事件
- 鼠标事件
- 键盘事件
- 表单事件
- 编辑事件
- 页面事件
1、事件调用方式
- 在script标签中调用
- 在元素中调用
1.1 在script标签中调用
在<script> </script>中调用事件
obj.eventName = function ()
{
pass
}
window.onclick = function ()
{
var mBtn = document.getElementById("btn")
mBtn.onclick = function ()
{
window.alert("btn clicked")
}
}
从本质上来说，这种事件调用方式用于操作元素的属性。只不过这个属性不是一般的属性，而是“事件属性”。
1.2 在元素中调用事件
function showMsg ()
{
window.alert('show message')
}
<input type="button" value="元素调用事件" onclick="showMsg ()">
2、鼠标事件
| 事件 | 说明 |
|---|---|
onclick |
鼠标点击事件 |
onmouseover |
鼠标移入事件 |
onmouseout |
鼠标移出事件 |
onmousedown |
鼠标按下事件 |
onmouseup |
鼠标松开事件 |
onmousemove |
鼠标移动事件 |
我们可以为任意元素添加鼠标单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onclick = function ()
{
var mP = document.getElementById('test')
mP.onmouseover = function ()
{
this.style.color = 'red'
}
mP.onmouseout = function ()
{
this.style.color = 'black'
}
mP.onmousedown = function ()
{
this.style.color = "blue"
}
mP.onmouseup = function ()
{
this.style.color = 'green'
}
}
</script>
</head>
<body>
<p id="test">这是一个测试</p>
</body>
</html>
3、键盘事件
| 描述 | 事件 |
|---|---|
| 键盘松开 | onkeyup |
| 键盘按下 | onkeydown |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function ()
{
var mInput = document.getElementById('input')
var mNum = document.getElementById('num')
mInput.onkeyup = function ()
{
var str = mInput.value
mNum.innerText = str.length
}
}
</script>
</head>
<body>
<input id="input" type="text">
<div>
字符串长度为：<span id="num">0</span>
</div>
</body>
</html>
4、表单事件
- 常用的表单事件
-
onfocus和onblur onselectonchangeonsubmit
-
焦点事件
onfocus获取焦点时触发的事件
onblur失去焦点时触发的事件
具有焦点事件的元素只有两种。表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）和超链接
判断一个元素是否具有交单，按
Tab键，能够选中的就是具有焦点特性的元素。
焦点事件一般用于单行文本框和多行文本框
一打开界面获得焦点，使用focus()方法
使用
placeholder实现类似效果
“选择事件”
当我们选中“单行文本框”或“多行文本框”中内容时，触发onselect事件
使用select()方法选取文本
多个选项选择事件
onchange事件常用于“具有多个选项的表单元素”的操作
5、编辑事件
-
oncopy-
防止页面内容被复制
document.body.oncopy = function () { return false; }
-
-
onselectstart-
防止页面内容被选取
document.body.onselectstart = function () { return false; }
-
-
oncontextmenu-
禁止使用鼠标右键
document.oncontextmenu = function () { return false; }
-
6、页面事件
-
onload表示文档加载完成后再执行的一个事件 -
onbeforeunload表示离开页面之前触发的一个事件window.onbeforeunload = function(e) { e.returnValue = "下次再来" }
事件进阶
如果要给元素添加一个事件，可以采用以下两种方式
-
事件处理器
mBtn.onclick = function () {...}- 事件处理器不能为一个元素添加多个相同事件
-
事件监听器
事件监听器
使用addEventListener()方法为一个元素添加事件。
调用方法
-
obj.addEventListener(type, fn, false)-
obj一个DOM对象 -
type事件类型，字符串格式 -
fn匿名函数 -
false事件冒泡阶段调用 var mBtn = document.getElementById("btn") mBtn.addEventListener("click", alertMes, false) function alertMes () { window.alert ("Java Script") }
-
-
多次调用
window.onloadwindow.addEventListener("load", function () {...}, false)-
使用
addLoadEvent //装饰者模式 function addLoadEvent (func) { var oldonload = window.onload if (typeof window.onload != "function") { window.onload = func; } else { window.onload = function () { oldonlad() func() } } } //调用方法 addLoadEvent(function()) { ...??? }
-
解绑事件
-
使用
removeEventListener()方法为元素解绑 obj.removeEventListener(type, fn, false)-
如果你想使用
removeEventListener（ ）方法来解除一个事件，那么在使用addEventListener（ ）添加事件的时候，就一定要用定义函数的形式。 -
removeEventListener（ ）只可以解除“事件监听器”添加的事件，不可以解除“事件处理器”添加的事件。如果要解除“事件处理器”添加的事件，我们可以使用obj.事件名 = null;来实现
-
事件
当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。
| 属性 | |
|---|---|
| type | 事件类型 |
| keyCode | 键值对 |
| shiftKey | 是否按下“shift"键 |
| ctrlKey | 是否按下”ctrl”键 |
| altKey | 是否按下“alt”键 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function ()
{
var mInput = document.getElementById('text')
var mLabel = document.getElementById('label')
mInput.addEventListener('keydown', function (e) {
console.log(e.type)
mLabel.innerText = e.type
console.log(e.shi)
mLabel.innerText = e.type + e.keyCode
if (e.shiftKey | e.altKey | e.ctrlKey)
{
mLabel.innerText = '禁止使用shift、alt、 ctrl'
}
}, false)
}
</script>
</head>
<body>
<form>
随便写点什么<input type="text" name="input" id="text">
<br>
<label id="label">触发了..</label>
</form>
</body>
</html>
this
在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
解决闭包问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function myClickEvent (e)
{
this.style.color = "hotpink";
}
window.onload = function ()
{
var mLi = document.getElementsByTagName("li")
for (var i = 0; i < mLi.length; i++)
{
// mLi[i].addEventListener("click", myClickEvent, false)
mLi[i].onclick = function ()
{
// mLi[i].style.color = "hotpink" // 闭包问题
this.style.color = "hotpink"
}
}
}
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
网友评论