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 相关文章推荐
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
js中less常用的方法小结
Aug 09 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 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
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python动态进度条的实现代码
2019/07/03 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
教师评优事迹材料
2014/01/10 职场文书
公司保密承诺书
2014/03/27 职场文书
家长会开场白和结束语
2015/05/29 职场文书
工作收入证明范本
2015/06/12 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android