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>

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

  • 相关阅读:
    AWS 监控服务(六)
    PB赋值粘贴
    oracle中的替换函数replace和translate函数
    instr函数
    The test form is only available for requests from the local machine
    ORACLE提交事务回滚
    PB开发境界 多个DW进行update
    plsql使用技巧
    pb 11 数据窗口空白,预览pb崩溃解决方案
    oracle函数
  • 原文地址:https://www.cnblogs.com/MaxIE/p/972816.html
Copyright © 2011-2022 走看看