zoukankan      html  css  js  c++  java
  • JavaScript动态的为元素添加事件

    目前的的页面布局都是基于XHTML,通过DIV+CSS布局,实现DHTML的样式。所以这个JavaScript动态的为元素添加事件因此而普遍了。下面我说说怎样通过javascript为元素动态的添加事件.
    Javascript为元素动态的添加事件包括两种情况:
    不带参数的事件和带参数的事件
    一、不带参数的事件:
    两种方式:直接给对象添加事件,节点添加事件
    例如给一个id为tab1的添加onclick事件
    第一种情况:
    var t = document.getElementById("NewTitle");
    t.onclick = function showmsg(){
        alert('Hello!World');
    }
    第二种情况 这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序),呵呵
       var tb = document.getElementById("NewTitle");
        if(window.addEventListener){ // Mozilla, Netscape, Firefox
            td_value.addEventListener('click', alert('cc'), false);
            td_value.addEventListener('click', alert('cc'), false);
        } else { // IE
            td_value.attachEvent('onclick', function(){alert('changchang');});
            td_value.attachEvent('onclick', function(){alert('changchang');});
        }
    二、带参数的事件
    这里的functionName就是事件处理函数,如果是带参数的那该怎么办,
    有人说是这样:
    element.onclick=function(sb){
             alert(sb);
         }
    是不是上面的那种写法呢?答案是不正确的。
    解决方法:匿名函数:
        element.onclick=function() {
            functionName(param);
        };
    这样就巧妙的通过匿名方法实现了!

    直接在页面上写入

    document.getElementById('secondcanton').innerHTML = document
       .getElementById('secondcanton').innerHTML
       +"<li onClick='changsecond("+xValue+")' color='red'>"+xText+"</li>"

  • 相关阅读:
    GNU计划的起因及其现状
    【KVM新概念】 虚拟机CPU热拔插
    Amazon vs Google 云服务
    【笨木头Cocos2dx 039】战争迷雾效果 第02章_先把地图加进来
    【C++11】新特性——auto的使用
    Netty4 SEDA 事件驱动原理分析
    error ,exception
    Compiling Java with makefile
    (二)Centos7下Yum更新安装PHP5.5,5.6,7.0
    CentOS7.0下安装FTP服务的方法
  • 原文地址:https://www.cnblogs.com/zhangqs008/p/2341191.html
Copyright © 2011-2022 走看看