JavaScript(10):行为(HTML)、结构(CSS)、样式(JS)相分离的页面

    1.绑定事件的两种方式

    (1)直接标签绑定

标签绑定

    (2)先获取DOM对象,然后进行绑定
document.getElementById("i1").onclick
documnet.getElementById("i2").onfocus

    以下给出由第二种绑定方式实现行为、结构、样式相分离的页面




    
    行为、结构、样式相分离的页面
    


    

    


    2.鼠标监听绑定事件

    用法和onclick并无区别,也一样是1.中提到的两种常规绑定方式。

onmouseover         //鼠标悬停时在相应标签内容时触发事件
onmouseout          //鼠标悬停在别处时触发事件
    以下给出简单的示例代码:



    
    this概念的引入


    

鼠标是否悬停在我上方?!


    3.第三种非常规的绑定事件方式

    该方式需要通过事件监听器来实现

addEventListener            //对相应标签增加鼠标监听器

    以下给出具体的代码示例:




    
    用鼠标监听器绑定事件


    

第三种绑定方式




    4.this概念的引入

    this,指向当前触发事件的标签

    (1)第一种运用this的绑定方式(常规1)


    (2)第一种运用this的绑定方式(常规2)


    以下给出完成的示例详细的示例代码:



    
    this概念的引入


    
    (3)第一种运用this的绑定方式(非常规3)
    可参见3.中示例代码的第二处注释部分。

你可能感兴趣的:(JavaScript)