1.绑定事件的两种方式
(1)直接标签绑定
<p id="p" onclick = "func()">标签绑定</p>
(2)先获取DOM对象,然后进行绑定document.getElementById("i1").onclick
documnet.getElementById("i2").onfocus
以下给出由第二种绑定方式实现行为、结构、样式相分离的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行为、结构、样式相分离的页面</title>
<style>
#separate{
background-color: #92a3ff;
color: #ff5358;
font-size: 20px;
}
</style>
</head>
<body>
<input type="button" value="行为、结构、样式相分离" id="separate">
<script>
var butt = document.getElementById("separate");
butt.onclick = function () {
console.log("分离成功!")
}
// butt.onclick = console.log("分离能成功吗?");
// 上句为测试代码,其运行结果为测试者还未点击按钮时"分离能成功吗?"字样便已输出在控制台,且之后再点击按钮,该字样也不再输出
</script>
</body>
</html>
2.鼠标监听绑定事件
用法和onclick并无区别,也一样是1.中提到的两种常规绑定方式。
onmouseover //鼠标悬停时在相应标签内容时触发事件
onmouseout //鼠标悬停在别处时触发事件
以下给出简单的示例代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this概念的引入</title>
</head>
<body>
<p id="i1" onmouseover="stay();">鼠标是否悬停在我上方?!</p>
<script>
function stay() { //第一种常规绑定方式
console.log("已悬停在我上方");
}
var p_tag = document.getElementById("I1");
p_tag.onmouseout = function () { //第二种常规绑定方式,可用于行为与样式相分离的操作中
console.log("它离开了");
}
</script>
</body>
</html>
3.第三种非常规的绑定事件方式
该方式需要通过事件监听器来实现
addEventListener //对相应标签增加鼠标监听器
以下给出具体的代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用鼠标监听器绑定事件</title>
</head>
<body>
<p>第三种绑定方式</p>
<script>
var third = document.getElementsByTagName("p");
//请注意虽然third中只含一个<p>标签,但其实它是一个数组结构!
third[0].addEventListener("click",function () {
third[0].style.backgroundColor = "red";
// this.style.backgroundColor = "red";这是运用this的绑定方法,作用与上局相同
},false)
</script>
</body>
</html>
4.this概念的引入
this,指向当前触发事件的标签
(1)第一种运用this的绑定方式(常规1)
<input id="i1" type="button" onclick="clickon(this)">
<script>
function onclick(self){
//self 即当前点击的标签
}
</script>
(2)第一种运用this的绑定方式(常规2)
<input id="i1" type="button">
<script>
document.getElementById("i1").onclick = function(){
//this 即当前点击的标签
}
</script>
以下给出完成的示例详细的示例代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this概念的引入</title>
</head>
<body>
<table border="1" width="300px" height ="100px">
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
<script>
var tr_list = document.getElementsByTagName("tr");
console.log(tr_list);
for (var i=0;i<tr_list.length;i++) {
tr_list[i].onmouseover = function () {
this.style.backgroundColor="blue";
// 此处必须用this,而不能用tr_list[i]!因为JS在执行前会先进行词法分析,经过词法分析后i会最终被赋值为2,
// 且不可改变,而this则始终指向调用它的对象。
}
tr_list[i].onmouseout = function () {
this.style.backgroundColor=""; //此处的双引号中间不能留空格,否则会被视为鼠标悬停在别处时不做操作!!
}
}
</script>
</body>
</html>
(3)第一种运用this的绑定方式(非常规3)可参见3.中示例代码的第二处注释部分。