首页
编程
PHP基础
PHP教程
php框架
JavaScript
asp.net
AJAX
正则表达式
ASP
html代码
css
前端框架
Python
服务器
数据库
mysql
mssql
redis
数据库问题
系统教程
window10教程
window8教程
window11教程
window7教程
windowxp教程
linux教程
U盘教程
操作系统
Windowsxp
windows7
windows8
windows10
其他操作系统
程序下载
企业程序
小说/有声
网站模板
第三方软件
新闻资讯
第三方源码
小程序
商城源码
框架书籍
前端开发
服务器端开发
数据库
开发软件
其他手册
jquery插件库
输入
banner图
图片脚本
导航/分类
播放器
css3
jQuery脚本
jqueryhtml5
进度条
贴图/客服
在线工具
编码转换工具
在线IDE编码工具
开发手册
linux命令大全
Bootstrap
HTML参考手册
css手册/教程
ThinkPHP5.0
ThinkPHP3.2
当前位置：
Gxlcms
>
JavaScript
>
js的onload事件及初始化按钮事件示例代码_javascript技巧
js的onload事件及初始化按钮事件示例代码_javascript技巧
时间：2021-07-01 10:21:17
帮助过：12人阅读
大家常见的肯定都是 这种用法.其实,不仅可以在body 上用它还支持多个HTML标签.用法如下:
onload事件当一个页面或是一张图片加载完成时被触发。
所支持的HTML标签：
,
,
,
, <img>, , <script> <br><br><STRONG>实例：</STRONG> <BR>第一种方法 <BR><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code78976"> <BR><BODY onload="javascript:alert('liuzm.com')"></BODY> <BR></div> <BR>第二种方法 <BR><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code70690"> <BR><script>window.onload=function (){alert('liuzm.com')}</ script> <BR><html> <BR><head> <BR><title>event test</title> <BR></head> <BR><body onload="init()"> <BR><!-- 绑定方式一:在元素中，通过onXXX（事件）设置绑定方法 --> <BR><button id="btn1" onclick="display()" >绑定方式一</button> <br><br><!-- 绑定方式二：在Javascript代码中，通过获得元素，为元素的onXXX（事件）设置绑定方法 --> <BR><button id="btn2">绑定方式二</button> <br><br><BR><!-- 绑定方式三：通过for、event为元素绑定事件（IE4+）。for后面是元素id，event是具体事件 --> <BR><button id="btn3">绑定方式三</button> <br><br><!-- 绑定方式四：通过attachEvent为元素绑定事件（IE5+）。第一个参数是事件名，第二个参数是绑定的方法 --> <BR><button id="btn4">绑定方式四</button> <BR></body> <br><br><script type="text/javascript"> <BR>function init() { <BR>document.getElementById("btn2").onclick = display;//为button2绑定事件 <BR>document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件 <BR>} <BR></div> <BR>实例: <BR><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code48663"> <BR>function display(event) { <BR>var targ;//触发事件的对象引用 <BR>if (!event) { <BR>var event = window.event;//获得当前事件(IE) <BR>} <BR>if (event.target) {//IE没有target <BR>targ = evente.target; <BR>} else if (event.srcElement) {//适用于IE <BR>targ = event.srcElement; <BR>} <br><br>//对触发事件的对象进行操作 <BR>alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX); <BR>targ.disabled="disabled" ; <BR>} <BR></ script> <BR><script for="btn3" event="onclick"> <BR>display();//为button3绑定事件 <BR></ script> <BR></div> </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/JavaScript-222478.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">javascriptdate格式化示例_javascript技巧</p></a> </li> <li class="opt-item ta-r"> <a href='/JavaScript-222480.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">javascriptfullscreen全屏显示页面元素的方法_javascript技巧</p></a> </li> </ul> </div> </div> </div> <div class="g-title fix"> <h2 class="title-txt">人气教程排行</h2> </div> <div class="m-rank u-dashed mb40"> <ul> <li class="rank-item"> <a href="/JavaScript-60002.html" title='vue2 设置router-view默认路径的实例' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">213次</span> <span class="g-sort-num top">1</span> vue2 设置router-view默认路径的实例 </a> </li> <li class="rank-item"> <a href="/JavaScript-56926.html" title='Vue-路由导航菜单栏的高亮设置方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">213次</span> <span class="g-sort-num second">2</span> Vue-路由导航菜单栏的高亮设置方法 </a> </li> <li class="rank-item"> <a href="/JavaScript-56852.html" title='基于Axios 常用的请求方法别名(详解)' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">213次</span> <span class="g-sort-num third">3</span> 基于Axios 常用的请求方法别名(详解) </a> </li> <li class="rank-item"> <a href="/JavaScript-39788.html" title='JavaScript+canvas实现七色板效果实例' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">213次</span> <span class="g-sort-num ">4</span> JavaScript+canvas实现七色板效果实例 </a> </li> <li class="rank-item"> <a href="/JavaScript-281548.html" title='实现vuex的初始化方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">5</span> 实现vuex的初始化方法 </a> </li> <li class="rank-item"> <a href="/JavaScript-238997.html" title='jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">6</span> jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决 </a> </li> <li class="rank-item"> <a href="/JavaScript-234597.html" title='Array.slice()与Array.splice()的返回值类型_基础知识' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">7</span> Array.slice()与Array.splice()的返回值类型_基础知识 </a> </li> <li class="rank-item"> <a href="/JavaScript-60647.html" title='微信小程序使用swiper组件实现层叠轮播图' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">8</span> 微信小程序使用swiper组件实现层叠轮播图 </a> </li> <li class="rank-item"> <a href="/JavaScript-57684.html" title='element-ui 限制日期选择的方法(datepicker)' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">9</span> element-ui 限制日期选择的方法(datepicker) </a> </li> <li class="rank-item"> <a href="/JavaScript-57417.html" title='vue-baidu-map 进入页面自动定位的解决方案(推荐)' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">10</span> vue-baidu-map 进入页面自动定位的解决方案(推荐) </a> </li> <li class="rank-item"> <a href="/JavaScript-54331.html" title='JS实现元素上下左右移动效果' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">11</span> JS实现元素上下左右移动效果 </a> </li> <li class="rank-item"> <a href="/JavaScript-32878.html" title='node.js中的emitter.on方法使用说明' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">212次</span> <span class="g-sort-num ">12</span> node.js中的emitter.on方法使用说明 </a> </li> <li class="rank-item"> <a href="/JavaScript-251986.html" title='在js中如何实现图片左右滑动' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">211次</span> <span class="g-sort-num ">13</span> 在js中如何实现图片左右滑动 </a> </li> <li class="rank-item"> <a href="/JavaScript-65218.html" title='layui button 按钮弹出提示窗口,确定才进行的方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">211次</span> <span class="g-sort-num ">14</span> layui button 按钮弹出提示窗口,确定才进行的方法 </a> </li> <li class="rank-item"> <a href="/JavaScript-53968.html" title='深入理解Vue生命周期、手动挂载及挂载子组件' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">211次</span> <span class="g-sort-num ">15</span> 深入理解Vue生命周期、手动挂载及挂载子组件 </a> </li> <li class="rank-item"> <a href="/JavaScript-32108.html" title='JS 使用for循环遍历子节点查找元素' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">211次</span> <span class="g-sort-num ">16</span> JS 使用for循环遍历子节点查找元素 </a> </li> <li class="rank-item"> <a href="/JavaScript-286609.html" title='bootstrap如何设置表单必填' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">210次</span> <span class="g-sort-num ">17</span> bootstrap如何设置表单必填 </a> </li> <li class="rank-item"> <a href="/JavaScript-286358.html" title='bootstrap4兼容哪些浏览器' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">210次</span> <span class="g-sort-num ">18</span> bootstrap4兼容哪些浏览器 </a> </li> <li class="rank-item"> <a href="/JavaScript-247980.html" title='jQuery实现追加数组并去重功能' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">210次</span> <span class="g-sort-num ">19</span> jQuery实现追加数组并去重功能 </a> </li> <li class="rank-item"> <a href="/JavaScript-215560.html" title='jQuery实现的在线答题功能_jquery' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">210次</span> <span class="g-sort-num ">20</span> jQuery实现的在线答题功能_jquery </a> </li> </ul> </div> </div> </div> <!-- / 教程内容页 --> </div> </div> <!-- 页尾 --> <div class="footer"> 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div> <!-- / 页尾 --> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin"> <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> <form id="regform" action="/user-center-reg.html" method="post"> <div class="login-reg" style="display: none;" id="con_login_2"> <input type="hidden" name="t" id="t"/> <p class="int-text"> <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p> <p class="int-text"> <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p> <p class="int-text"> <input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p> <p class="int-text1"><span class="inputbox"> <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};"> </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p> <p class="int-info"> <label> <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox"> 我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label> </p> <p class="int-btn"><input type="hidden" name="dosubmit"/> <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p> </div> </form> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function() { layui.code({ elem: 'pre', //默认值为.layui-code about: false, skin: 'notepad', title: 'php怎么实现数据库验证跳转代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> </body> </html>
