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


Posted in Javascript onSeptember 25, 2013

大家常见的肯定都是<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>
Javascript 相关文章推荐
JavaScript 图像动画的小demo
May 23 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
jquery实现table鼠标经过变色代码
Sep 25 #Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 #Javascript
仿百度的关键词匹配搜索示例
Sep 25 #Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 #Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 #Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 #Javascript
js读取注册表的键值示例
Sep 25 #Javascript
You might like
php笔记之常用文件操作
2010/10/12 PHP
Admin generator, filters and I18n
2011/10/06 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
python实现多线程采集的2个代码例子
2014/07/07 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python实现杨氏矩阵查找
2019/03/02 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
工程项目经理岗位职责
2013/12/15 职场文书
模范教师事迹材料
2014/02/10 职场文书
班级团队活动方案
2014/08/14 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
vue判断按钮是否可以点击
2022/04/09 Vue.js
JavaScript前端面试组合函数
2022/06/21 Javascript