1.绑定事件的两种方式
(1)直接标签绑定
<p id="p" onclick = "func()">标签绑定</p>
(2)先获取DOM对象，然后进行绑定
document.getElementById("i1").onclickdocumnet.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" οnmοuseοver="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" οnclick="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.中示例代码的第二处注释部分。
