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>

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

  • 相关阅读:
    面试准备(集合部分)
    面试准备(算法部分)
    面试准备(sql部分 索引、常用语句 、)
    破解idea软件教程
    40个Java多线程问题详解复习
    面向对象(2)
    开发中容易造成内存泄露的操作
    面向对象(1)
    vue-cli中找不到jquery的原因,以使用ztree为例
    Django中整合Vue-cli,并解决各种路径引用错误和跨域的问题
  • 原文地址:https://www.cnblogs.com/MaxIE/p/972816.html
Copyright © 2011-2022 走看看