JS 触发器基础.docx

, , ,,,, to , ,, ,<img>,<input>,<ins>,<kbd>,<label>,<legend>,<li>,<object>,<ol>,<pre>,<q>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：button,checkbox,fileUpload,layer,frame,password,radio,reset,submit,text,textarea,window实例1在本例中，我们将在用户离开输入框时执行JavaScript代码：<html><head><scripttype="text/javascript">functionupperCase（）{varx=document.getElementById（"fname"）.valuedocument.getElementById（"fname"）.value=x.toUpperCase（）}</script></head><body>输入您的姓名：<inputtype="text"id="fname"onblur="upperCase（）"/></body></html>2当改变选择时调用的事件句柄。语法selectObject.onchange说明Select对象的onchange属性引用了一个事件句柄函数。当用户选中一个选项，或者取消了对一个选项的选定时，就会调用该句柄。这个事件不会指定新的选项是什么，必须通过Select对象的selectedIndex属性，或者各个Option对象的selected属性来确定这一点。3select（）方法用于选择该元素中的文本。语法textareaObject.onchange说明Textarea的onchange属性引用了一个事件句柄函数，当用户改变文本区域的值然后通过把键盘焦点移动到其他地方“确认”这些改变的时候，调用该句柄。请注意，当一个Text对象的value属性通过JavaScript设置的时候，onchange事件句柄不会调用。还要注意，该句柄是为了处理对输入值的一次完整改变，因此，它不会在逐个按键的基础上调用。4onclick事件会在对象被点击时发生。请注意，onclick与onmousedown不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。语法onclick="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<a>,<address>,<area>,,<bdo>,<big>,<blockquote>,<body>,<button>,<caption>,<cite>,<code>,<dd>,<dfn>,<div>,<dl>,<dt>,,<fieldset>,<form>,<h1>to<h6>,<hr>,,<img>,<input>,<kbd>,<label>,<legend>,<li>,<map>,<object>,<ol>,<pre>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：button,document,checkbox,link,radio,reset,submit实例1在本例中，当按钮被单击时，第一个输入框中的文本会被拷贝到第二个输入框中：<html><body>Field1:<inputtype="text"id="field1"value="HelloWorld!"> Field2:<inputtype="text"id="field2"> 点击下面的按钮，把Field1的内容拷贝到Field2中： <buttononclick="document.getElementById（'field2'）.value=document.getElementById（'field1'）.value">CopyText</button></body></html>5ondblclick事件会在对象被双击时发生。语法ondblclick="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<a>,<address>,<area>,,<bdo>,<big>,<blockquote>,<body>,<button>,<caption>,<cite>,<code>,<dd>,<dfn>,<div>,<dl>,<dt>,,<fieldset>,<form>,<h1>to<h6>,<hr>,,<img>,<input>,<kbd>,<label>,<legend>,<li>,<map>,<object>,<ol>,<pre>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：document,link实例1在本例中，当您双击按钮时，第二个域中内容会根据第一个域的内容而改变：<html><body>Field1:<inputtype="text"id="field1"value="HelloWorld!"> Field2:<inputtype="text"id="field2"> 双击下面的按钮，把Field1的内容拷贝到Field2中： <buttonondblclick="document.getElementById（'field2'）.value=document.getElementById（'field1'）.value">CopyText</button></body></html>6onerror事件会在文档或图像加载过程中发生错误时被触发。在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。语法onerror="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<img>,<object>,<style>支持该事件的JavaScript对象：window,image实例1在本例中，如果装载图像时发生了错误，则显示一个对话框：<imgsrc="image.gif"onerror="alert（'Theimagecouldnotbeloaded.'）"/>7onfocus事件在对象获得焦点时发生。语法onfocus="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<a>,<acronym>,<address>,<area>,,<bdo>,<big>,<blockquote>,<button>,<caption>,<cite>,<dd>,<del>,<dfn>,<div>,<dl>,<dt>,,<fieldset>,<form>,<frame>,<frameset>,<h1>to<h6>,<hr>,,<iframe>,<img>,<input>,<ins>,<kbd>,<label>,<legend>,<li>,<object>,<ol>,<pre>,<q>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：button,checkbox,fileUpload,layer,frame,password,radio,reset,select,submit,text,textarea,window实例在本例中，当输入框获得焦点时，其背景颜色将改变：<html><head><scripttype="text/javascript">functionsetStyle（x）{document.getElementById（x）.style.background="yellow"}</script></head><body>Firstname:<inputtype="text"onfocus="setStyle（this.id）"id="fname"/> Lastname:<inputtype="text"onfocus="setStyle（this.id）"id="lname"/></body></html>8onkeydown事件会在用户按下一个键盘按键时发生。语法onkeydown="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<a>,<acronym>,<address>,<area>,,<bdo>,<big>,<blockquote>,<body>,<button>,<caption>,<cite>,<code>,<dd>,<del>,<dfn>,<div>,<dt>,,<fieldset>,<form>,<h1>to<h6>,<hr>,,<input>,<kbd>,<label>,<legend>,<li>,<map>,<object>,<ol>,<pre>,<q>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：document,image,link,textarea提示和注释浏览器差异：InternetExplorer使用event.keyCode取回被按下的字符，而Netscape/Firefox/Opera使用event.which。实例在本例中，用户无法在输入框中键入数字：<html><body><scripttype="text/javascript">functionnoNumbers（e）{varkeynumvarkeycharvarnumcheckif（window.event）//IE{keynum=e.keyCode}elseif（e.which）//Netscape/Firefox/Opera{keynum=e.which}keychar=String.fromCharCode（keynum）numcheck=/\d/return!numcheck.test（keychar）}</script><form><inputtype="text"onkeydown="returnnoNumbers（event）"/></form></html>9onkeypress事件会在键盘按键被按下并释放一个键时发生。语法onkeypress="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<a>,<acronym>,<address>,<area>,,<bdo>,<big>,<blockquote>,<body>,<button>,<caption>,<cite>,<code>,<dd>,<del>,<dfn>,<div>,<dt>,,<fieldset>,<form>,<h1>to<h6>,<hr>,,<input>,<kbd>,<label>,<legend>,<li>,<map>,<object>,<ol>,<pre>,<q>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：document,image,link,textarea提示和注释浏览器差异：InternetExplorer使用event.keyCode取回被按下的字符，而Netscape/Firefox/Opera使用event.which。实例在本例中，用户无法在输入框中键入数字：<html><body><scripttype="text/javascript">functionnoNumbers（e）{varkeynumvarkeycharvarnumcheckif（window.event）//IE{keynum=e.keyCode}elseif（e.which）//Netscape/Firefox/Opera{keynum=e.which}keychar=String.fromCharCode（keynum）numcheck=/\d/return!numcheck.test（keychar）}</script><form><inputtype="text"onkeypress="returnnoNumbers（event）"/></form></html>10onkeyup事件会在键盘按键被松开时发生。语法onkeyup="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<a>,<acronym>,<address>,<area>,,<bdo>,<big>,<blockquote>,<body>,<button>,<caption>,<cite>,<code>,<dd>,<del>,<dfn>,<div>,<dt>,,<fieldset>,<form>,<h1>to<h6>,<hr>,,<input>,<kbd>,<label>,<legend>,<li>,<map>,<object>,<ol>,<pre>,<q>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：document,image,link,textarea实例当您在例子中的输入域中键入字符时，字符会被更改为大写（逐一地）：<html><head><scripttype="text/javascript">functionupperCase（x）{vary=document.getElementById（x）.valuedocument.getElementById（x）.value=y.toUpperCase（）}</script></head><body>输入您的姓名：<inputtype="text"id="fname"onkeyup="upperCase（this.id）"/></body></html>11onLine属性是一个只读的布尔值，声明了系统是否处于脱机模式。注释：在IE4+中，用户可以在浏览器中选择脱机工作的状态。当脱机工作被选后，系统就进入了脱机状态，内容将从缓存进行读取。语法navigator.onLine实例<html><body><scripttype="text/javascript">document.write（"OnLine:"）document.write（navigator.onLine+""）</script></body></html>12onload事件会在页面或图像加载完成后立即发生。语法onload="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<body>,<frame>,<frameset>,<iframe>,<img>,<link>,<script>支持该事件的JavaScript对象：image,layer,window实例在本例中，文本"Pageisloaded"会被显示在状态栏中：<html><head><scripttype="text/javascript">functionload（）{window.status="Pageisloaded"}</script></head><bodyonload="load（）"></body></html>13onmousedown事件会在鼠标按键被按下时发生。语法onmousedown="SomeJavaScriptCode"参数描述SomeJavaScriptCode必需。规定该事件发生时执行的JavaScript。支持该事件的HTML标签：<a>,<address>,<area>,,<bdo>,<big>,<blockquote>,<body>,<button>,<caption>,<cite>,<code>,<dd>,<dfn>,<div>,<dl>,<dt>,,<fieldset>,<form>,<h1>to<h6>,<hr>,,<img>,<input>,<kbd>,<label>,<legend>,<li>,<map>,<ol>,<pre>,<samp>,<select>,,,,,,<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<tr>,<tt>,<ul>,<var>支持该事件的JavaScript对象：button,document,link实例在本例中，当您点击下面的图片时会弹出一个对话框：<imgsrc="/i/example_mouse2.jpg"onmousedown="alert（'Youclickedthepicture!'）"/>实例2在本例中，对话框将显示出您所点击的元素的标签名：<html><head><scripttype="text/javascript">functionwhichElement（e）{vartargif（!e）vare=window.eventif（e.target）targ=e.targetelseif（e.srcElement）targ=e.sr </div> <div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;">展开阅读全文</div> <script> function showmore() { $(".readmore").hide(); $(".detail-article").css({ "height":"auto", "overflow": "hidden" }); } $(document).ready(function() { var dh = $(".detail-article").height(); if(dh >100) { $(".detail-article").css({ "height":"100px", "overflow": "hidden" }); } else { $(".readmore").hide(); } }); </script> </div> <script> var defaultShowPage = parseInt("20"); var id = "13722357"; var total_page = "28"; var mfull = false; var mshow = false; function DownLoad() { window.location.href='https://m.bingdoc.com/d-13722357.html'; } function relate() { var reltop = $('#relate').offset().top-50; $("html,body").animate({ scrollTop: reltop }, 500); } </script> <div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><a target="_parent" href="https://m.bingdoc.com/p-18943995.html" title="自然辩证法题库（446道）2.docx">自然辩证法题库（446道）2.docx</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18940463.html" title="教师心理减压.ppt">教师心理减压.ppt</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18925259.html" title="社会保障学-赵曼PPT全套课件.pptx">社会保障学-赵曼PPT全套课件.pptx</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18924701.html" title="结直肠癌的护理.pptx">结直肠癌的护理.pptx</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18924700.html" title="深空对地观测现状与发展趋势.ppt">深空对地观测现状与发展趋势.ppt</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18924699.html" title="非洲猪瘟诊断技术研究与应用课件..pptx">非洲猪瘟诊断技术研究与应用课件..pptx</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18924698.html" title="危化品泄露事故现场应急处置.ppt">危化品泄露事故现场应急处置.ppt</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18924697.html" title="中华人民共和国档案法学习解读ppt课件.pptx">中华人民共和国档案法学习解读ppt课件.pptx</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18924696.html" title="[精品]清华大学资料力学范钦珊主讲_专题第十章_能量道理在杆件位移和稳固性剖析中的应用.ppt">[精品]清华大学资料力学范钦珊主讲_专题第十章_能量道理在杆件位移和稳固性剖析中的应用.ppt</a> </li><li><a target="_parent" href="https://m.bingdoc.com/p-18924695.html" title="中国工会十八大报告PPT课件.pptx">中国工会十八大报告PPT课件.pptx</a> </li> </ul> </div> </div> <div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li> <a href="https://m.bingdoc.com/p-13543538.html" target="_parent" title="有色冶金渣有价金属回收资料汇总.docx">有色冶金渣有价金属回收资料汇总.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543539.html" target="_parent" title="最新大学毕业自我鉴定小结精选多篇.docx">最新大学毕业自我鉴定小结精选多篇.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543540.html" target="_parent" title="住房结构分析.docx">住房结构分析.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543541.html" target="_parent" title="院士工作站申请书.docx">院士工作站申请书.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543542.html" target="_parent" title="幼儿园大班社会教案《交通标志》.docx">幼儿园大班社会教案《交通标志》.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543543.html" target="_parent" title="云的造句.docx">云的造句.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543544.html" target="_parent" title="幼儿园奖状怎么写通用17篇.docx">幼儿园奖状怎么写通用17篇.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543545.html" target="_parent" title="云台山导游词.docx">云台山导游词.docx</a></li> <li> <a href="https://m.bingdoc.com/p-13543546.html" target="_parent" title="幼儿园九月份工作计划doc.docx">幼儿园九月份工作计划doc.docx</a></li> </ul> </div> </div> <div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;"> 相关搜索</div> <div class="widget-box pt0" style="border: none; padding:0px 5px;"> <ul class="taglist--inline multi"> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=JS">JS</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=%e8%a7%a6%e5%8f%91%e5%99%a8%e5%9f%ba%e7%a1%80">触发器基础</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=%e8%a7%a6%e5%8f%91%e5%99%a8">触发器</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bingdoc.com/search.html?q=%e5%9f%ba%e7%a1%80">基础</a></li> </ul> </div> <div > 当前位置：<a target="_parent" href="https://m.bingdoc.com/">首页</a> > <a href="https://m.bingdoc.com/booklist-00009.html">求职职场</a> > <a href="https://m.bingdoc.com/booklist-0000900001.html">简历</a> </div> <div class="cssnone"> <iframe title="来源" src="https://m.bingdoc.com/BookRead.aspx?id=g5Pb2aFh%2f9Su%7cKal5Hwtrg%3d%3d&parto=Jr%2f6PejsFg42br%2bav%2bLtjE1bJEwtJAfBG3dp5BLfJqWVaR5VUnrtTVHPlQklAtONkI8RbmqfNYHFBSdYKdkf%2fxf7UroGBnq6q9F0Xigf6S3hUtgIMrHFaXKpebiZ41%2b2zNMOBC5twFokDRUeQDhrEzgS5AtKKsgNjvpv4csiGxgGY3Zjp39igyQ%2fQVSRVaJ0aEsbeLluPctNgvBrJUYDwSEO58kKj7oV" frameborder="0" style="width: 0px; height: 0px">

JS 触发器基础.docx

to