js的onload事件及初始化按钮事件示例代码_javascript技巧

大家常见的肯定都是<body onload=""> 这种用法.其实,不仅可以在body 上用它还支持多个HTML标签.用法如下:

onload事件当一个页面或是一张图片加载完成时被触发。

所支持的HTML标签:
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

实例:
第一种方法

复制代码 代码如下:

<BODY onload="javascript:alert('liuzm.com')"></BODY>

第二种方法

复制代码 代码如下:

<script>window.onload=function (){alert('liuzm.com')}</script>
<html>
<head>
<title>event test</title>
</head>
<body onload="init()">
<!-- 绑定方式一:在元素中,通过onXXX(事件)设置绑定方法 -->
<button id="btn1" onclick="display()" >绑定方式一</button>

<!-- 绑定方式二:在Javascript代码中,通过获得元素,为元素的onXXX(事件)设置绑定方法 -->
<button id="btn2">绑定方式二</button>

<!-- 绑定方式三:通过for、event为元素绑定事件(IE4+)。for后面是元素id,event是具体事件 -->
<button id="btn3">绑定方式三</button>

<!-- 绑定方式四:通过attachEvent为元素绑定事件(IE5+)。第一个参数是事件名,第二个参数是绑定的方法 -->
<button id="btn4">绑定方式四</button>
</body>

<script type="text/javascript">
function init() {
document.getElementById("btn2").onclick = display;//为button2绑定事件
document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件
}

实例:

复制代码 代码如下:

function display(event) {
var targ;//触发事件的对象引用
if (!event) {
var event = window.event;//获得当前事件(IE)
}
if (event.target) {//IE没有target
targ = evente.target;
} else if (event.srcElement) {//适用于IE
targ = event.srcElement;
}

//对触发事件的对象进行操作
alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
targ.disabled="disabled" ;
}
</script>
<script for="btn3" event="onclick">
display();//为button3绑定事件
</script>

时间: 2025-01-02 19:35:24

js的onload事件及初始化按钮事件示例代码_javascript技巧的相关文章

Js+Jq获取URL参数的集中方法示例代码_javascript技巧

JQ取值方法: jquery本身也不存在取得URL参数的方法,但是已经存在插件,可以直接取得URL等参数 插件连接主页:https://github.com/allmarkedup/jQuery-URL-Parser 下载链接:http://download.github.com/allmarkedup-jQuery-URL-Parser-bb2bf37.zip Examples of use Using the current page's url (for these examples ht

js禁止页面复制功能禁用页面右键菜单示例代码_javascript技巧

<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在

使用js对select动态添加和删除OPTION示例代码_javascript技巧

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

js判断选择时间不能小于当前时间的示例代码_javascript技巧

复制代码 代码如下: var controldate; function checkDate(){ controldate= document.getElementById("sendDate").value; if(controldate==""){ alert('日期不能为空'); return false; }else{ var day = new Date(); var Year = 0; var Month = 0; var Day = 0; var Cu

JS清空多文本框、文本域示例代码_javascript技巧

点击按钮用Javascript清空页面上所有的文本框|文本域,代码如下: 复制代码 代码如下: <script type="text/javascript"> <!-- function cls(){ var sum=0; var t = document.getElementsByTagName("INPUT"); for (var i=0; i <t.length;i++){ if (t[i].type=='text'){ ++sum;

Js实现双击鼠标自动滚动屏幕的示例代码_javascript技巧

如下所示: 复制代码 代码如下: <html><head> <script language="javascript" type="text/javascript">//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){  timer=setInterval("scrollwindow()",30);}function sc(){  clearInter

js 判断js函数、变量是否存在的简单示例代码_javascript技巧

复制代码 代码如下: //是否存在指定函数 function isExitsFunction(funcName) {    try {        if (typeof(eval(funcName)) == "function") {            return true;        }    } catch(e) {}    return false;}//是否存在指定变量 function isExitsVariable(variableName) {    try

JS将制定内容复制到剪切板示例代码_javascript技巧

复制代码 代码如下: function copyText() { //复制内容 var txt = document.getElementById("table2").rows[1].cells[0].innerHTML; //去除空格 txt = txt.replace(/ /," "); //去除换行 txt = txt.replace(/<BR><BR>/," "); if (window.clipboardData

JS弹出层的显示与隐藏示例代码_javascript技巧

复制代码 代码如下: <!--弹出层的显示与隐藏--> <script type="text/javascript"> //弹出层的显示 //overlays:为遮罩层的ID //wins:弹出层窗体的ID //弹出层中用于拖动的ID function popDIV_show(overlays,wins,wins_title) { var oLays = documentgetElementById(overlays); var oWins = document

js函数返回多个返回值的示例代码_javascript技巧

复制代码 代码如下: var w = getClientSize().width; var h = getClientSize().height - 97; 复制代码 代码如下: function getClientSize() { var a = h = 0; if (window.innerHeight) { a = window.innerWidth; h = window.innerHeight } else { if (document.documentElement && do