input内容改变的触发事件

1. onchange

• 定义和用法
  onchange 事件会在域的内容改变时发生。
  onchange 事件也可用于单选框与复选框改变后触发的事件。
• 语法

HTML 中&＃xff1a;

<input onchange&＃61;"SomeJavascriptCode">

Javascript 中&＃xff1a;

object.onchange&＃61;function(){SomeJavascriptCode};

• 浏览器支持
  Internet Explorer、Firefox、Opera、Google Chrome、Safari
• 支持 onchange 事件的 HTML 标签
  onchange 属性可以使用于&＃xff1a;、、</code> 。</li><li><strong>注意</strong> <ol><li>在元素的值改变了且失去焦点时触发&＃xff08;两次的值一样不会触发&＃xff09;。</li><li>通过js代码改变<code>DOM</code>的值不会触发&＃xff0c;解决在js代码里改值了调用其<code>change</code> 的<code>function()</code> 或者调<code>.change()</code>方法。</li></ol> </li></ul> <br><h2>2. onpropertychange</h2> <br><ul><li><strong>定义和用法</strong><br /> onpropertychange会实时触发&＃xff0c;会在元素的属性改变时就触发事件。</li><li><strong>语法</strong></li></ul> <p><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">&＃61;</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">onpropertychange</span><span class="token attr-value"><span class="token punctuation">&＃61;</span><span class="token punctuation">"</span>functionName()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> <br><ul><li><strong>浏览器支持</strong><br /> <code>Internet Explorer</code></li><li><strong>注意</strong><br /> 当元素<code>disable&＃61;true</code>时不会触发。</li></ul> <br><h2>3. output</h2> <br><ul><li><strong>定义和用法</strong> <ol><li><code>oninput</code> 事件在用户输入时触发。</li><li>该事件在 <code><input></code> 或 <code><textarea></code> 元素的值发生改变时触发。</li><li><strong>提示&＃xff1a;</strong> 该事件类似于<code>onchange</code> 事件。不同之处在于 <code>oninput</code> 事件在元素值发生变化是立即触发&＃xff0c;<br /> onchange 在元素失去焦点时触发。另外一点不同是 <code>onchange</code> 事件也可以作用于 <code><keygen></code> 和 <code><select></code> 元素。</li></ol> </li><li><strong>语法</strong></li></ul> <p>HTML&＃xff1a;</p><p><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">oninput</span><span class="token attr-value"><span class="token punctuation">&＃61;</span><span class="token punctuation">"</span>myScript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre> <p>Javascript&＃xff1a;</p><p><code class="prism language-js">object<span class="token punctuation">.</span><span class="token function-variable function">oninput</span><span class="token operator">&＃61;</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>myScript<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre> <p>Javascript 中, 使用 addEventListener() 方法&＃xff1a;</p><p><code class="prism language-js">object<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> myScript<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> <br><ul><li><strong>浏览器支持</strong></li></ul> <br><table><thead><tr><th>事件</th><th><code>Internet Explorer</code></th><th><code>Firefox</code></th><th><code>Opera</code></th><th><code>Google Chrome</code></th><th><code>Safari</code></th></tr></thead><tbody><tr><td>output</td><td>9.0</td><td>4.0</td><td>yes</td><td>yes</td><td>5.0</td></tr></tbody></table><br><ul><li><strong>注意</strong></li></ul> <br><table><thead><tr><th align="left">是否支持冒泡:</th><th align="left">Yes</th></tr></thead><tbody><tr><td align="left">是否可以取消:</td><td align="left">NO</td></tr><tr><td align="left">事件类型:</td><td align="left">Event</td></tr><tr><td align="left">支持的 HTML 标签:</td><td align="left"><code><input type&＃61;"password"></code>, <code><input type&＃61;"search"></code>, <code><input type&＃61;"text"></code> 和 <code><textarea></code></td></tr></tbody></table><br><h2>4. addEventListener</h2> <br><ul><li><strong>定义和用法</strong><br /> <code>addEventListener()</code> 方法用于向指定元素添加事件句柄。<br /> <strong>提示&＃xff1a;</strong> 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。</li><li><strong>语法</strong></li></ul> <p><code>element.addEventListener(event, function, useCapture)<br></code></pre> <br><ul><li><strong>参数</strong></li></ul> <br><table><thead><tr><th align="left">参数</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">event</td><td align="left"><strong>必须。</strong> 字符串&＃xff0c;指定事件名。<strong>注意:</strong> 不要使用 “on” 前缀。 例如&＃xff0c;使用 “click” ,而不是使用 “onclick”。<strong>提示&＃xff1a;</strong> 所有 HTML DOM 事件&＃xff0c;可以查看我们完整的 HTML DOM Event 对象参考手册。</td></tr><tr><td align="left">function</td><td align="left"><strong>必须。</strong> 指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如&＃xff0c; “click” 事件属于 MouseEvent(鼠标事件) 对象。</td></tr><tr><td align="left">useCapture</td><td align="left"><strong>可选。</strong> 布尔值&＃xff0c;指定事件是否在捕获或冒泡阶段执行。<strong>可能值:</strong> true - 事件句柄在捕获阶段执、false- false- 默认。事件句柄在冒泡阶段执行</td></tr></tbody></table><br><ul><li><strong>浏览器支持</strong></li></ul> <br><table><thead><tr><th>方法</th><th><code>Internet Explorer</code></th><th><code>Firefox</code></th><th><code>Opera</code></th><th><code>Google Chrome</code></th><th><code>Safari</code></th></tr></thead><tbody><tr><td>addEventListener()</td><td>9.0</td><td>1.0</td><td>7.0</td><td>1.0</td><td>1.0</td></tr></tbody></table><br><ul><li><strong>注意</strong></li></ul> <br><table><thead><tr><th align="left">DOM 版本:</th><th align="left">DOM Level 2 Events</th></tr></thead><tbody><tr><td align="left">返回值:</td><td align="left">没有返回值</td></tr><tr><td align="left">记录:</td><td align="left">在 <code>Firefox 6</code> 和 <code>Opera 11.60</code> 中 useCapture 参数是可选的。 &＃xff08;在 <code>Chrome</code>、<code>IE</code> 和 <code>Safari</code> 中一直都是可选的&＃xff09;。</td></tr></tbody></table></div></div> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/input" target="_blank" title="input">input</a></li> <li><a href="https://www.php1.cn/tag/list" target="_blank" title="list">list</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/java" target="_blank" title="java">java</a></li> <li><a href="https://www.php1.cn/tag/ip" target="_blank" title="ip">ip</a></li> <li><a href="https://www.php1.cn/tag/object" target="_blank" title="object">object</a></li> <li><a href="https://www.php1.cn/tag/function" target="_blank" title="function">function</a></li> <li><a href="https://www.php1.cn/tag/int" target="_blank" title="int">int</a></li> <li><a href="https://www.php1.cn/tag/firefox" target="_blank" title="firefox">firefox</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了
  会员登录 | 用户注册