zoukankan      html  css  js  c++  java
  • JavaScript中对事件的三种监听方式

    第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果:

    <table>
    <
    tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text1</td><td>text2</td></tr>
    <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text3<
    /td><td>text4</td></tr>
    <
    tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text5</td><td>text5</td></tr>
    <
    /table>

    第二种监听方式,是使用DOM的方式获取对象,并加载事件:

    <table>
    <
    tr><td>text1</td><td>text2</td></tr>
    <tr><td>text3<
    /td><td>text4</td></tr>
    <
    tr><td>text5</td><td>text5</td></tr>
    <
    /table>
    <
    script>
    doms = document.getElementsByTagName('tr');
    for(i=0;i<doms.length;i++)
    {
        
    doms[i].onmouseover = function()
        
    {
            
    this.style.backgroundColor = "red";
        
    }
        
    doms[i].onmouseout = function()
        
    {
            
    this.style.backgroundColor = "";
        
    }
    }
    <
    /script>

    第三种监听方式,是使用标准的addEventListener方式和IE私有的attachEvent方式,因为IE的attachEvent方式在参数传递时的缺陷,这个问题被搞得稍许有些复杂了:

    <table>
    <
    tr><td>text1</td><td>text2</td></tr>
    <tr><td>text3<
    /td><td>text4</td></tr>
    <
    tr><td>text5</td><td>text5</td></tr>
    <
    /table>
    <
    script>
    doms = document.getElementsByTagName('tr');
     
    function show_color(where)
    {
        
    this.tagName ? where = this : null
        
    where.style.backgroundColor = "red";
    }
     
    function hide_color(where)
    {
        
    this.tagName ? where = this : null
        
    where.style.backgroundColor = "";
    }
     
    function for_ie(where,how)
    {
        
    return function()
        
    {
            
    how(where);
        
    }   
    }
     
    for(i=0;i<doms.length;i++)
    {
        
    try
        
    {
            
    doms[i].addEventListener('mouseover',show_color,false);
            
    doms[i].addEventListener('mouseout',hide_color,false);
        
    }
        
    catch(e)
        
    {
            
    doms[i].attachEvent('onmouseover',for_ie(doms[i],show_color));
            
    doms[i].attachEvent('onmouseout',for_ie(doms[i],hide_color));
        
    }
    }
    <
    /script>

    在绑定多个相同的事件的时候,前两种方法会产生覆盖,而第三中方法则会同时执行多个事件。

  • 相关阅读:
    PHP小案例
    PHP函数
    PHP基础语法
    PHP基础知识
    tp5.1前台模板的系统变量输出
    PHP常用方法很有意义的博客网址
    VS 2010(2005)Unicode使用cximage库Load函数问题
    坑爹的CFile::Remove
    固定CDockablePane的一些小技巧
    (转)理解Bitblt、StretchBlt与SetDIBitsToDevice、StretchDibits
  • 原文地址:https://www.cnblogs.com/MaxIE/p/972816.html
Copyright © 2011-2022 走看看