1.绑定事件的两种方式
(1)直接标签绑定
<p id="p" onclick = "func()">标签绑定</p>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.中示例代码的第二处注释部分。