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.中示例代码的第二处注释部分。