JavaScript---事件绑定 (多种方式、传递参数）
<div id="content_views" class="htmledit_views"><div id="articleContent" class="content">
<p>事件绑定方式：将对html元素或窗口的操作绑定给响应函数的方式。共四种方式</p>
<ul>
<li>Html级别绑定</li>
<li>符合DOM0 级的事件绑定方式</li>
<li>符合DOM2</li>
</ul>
<h2><strong>Html级别绑定</strong></h2>
<p><span style="color: rgba(128, 0, 0, 1)">无法设置事件流</span></p>
<div class="cnblogs_code">
<pre><script>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> a(){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">好的习惯，把整个网页上所有的事件绑定程序，聚集在一个函数中</span>
alert("nihao"<span style="color: rgba(0, 0, 0, 1)">);
}
</span></script>
<input type="button" value="html级别绑定方式" onclick="a()" /></pre>
</div>
<p> </p>
<h2><strong>符合DOM0 级的事件绑定方式</strong></h2>
<p>将响应程序直接赋值给dom元素的事件属性。这是DOM最早版本的事件绑定方式，被所有浏览器兼容</p>
<p><span style="color: rgba(128, 0, 0, 1)">无法设置事件流</span></p>
<p>1、是用普通函数作为响应程序</p>
<p><span style="color: rgba(0, 128, 0, 1)">document.getElementById("btn1").onclick = sayHellow; 不要带（）, 带着（）表示直接调用·</span></p>
<div class="cnblogs_code">
<pre><h2>DOM0级别的绑定方式</h2>
<input type="button" id="btn1" value="DOM0级别的绑定方式" />
<script><span style="color: rgba(0, 0, 0, 1)">
window.onload</span>=<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
document.getElementById(</span>"btn1").onclick = sayHellow; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注意不要带（）</span>
<span style="color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sayHellow(){
alert(</span>"hi=="<span style="color: rgba(0, 0, 0, 1)">)
}
</span></script></pre>
</div>
<p> </p>
<p>2、是用匿名函数作为响应程序</p>
<div class="cnblogs_code">
<pre>document.getElementById("btn2").onclick = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ alert(</span>"hi："+<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.id) }
或者
document.getElementById("btn2").onclick = _ => console.log("hi123ID："+this);<span style="color: rgba(0, 128, 0, 1)">//参考我的博客：JavaScript箭头函数（Lambda表达式）</span>
</span></pre>
</div>
<p> 弹出 ： btn1</p>
<p>特点：</p>
<ol class="hljs-ln">
<li>在响应函数中this代表目标元素(当前的button对象)</li>
<li>不符合DOM2标准，无法设定事件流</li>
<li>无法直接传递参数，但可以通过其他方式传递</li>
<li>对同一个事件只能绑定一个响应函数，最后绑定的响应函数会执行</li>
<li>通过 obj.onxx = null 可以解除绑定。</li>
</ol>
<p>总结：可以使用匿名函数或普通函数作为响应函数</p>
<p> </p>
<h2>传递参数的方式：</h2>
<p> </p>
<p>传递参数的方法1 ---将参数 作为属性赋 给事件源</p>
<div class="cnblogs_code">
<pre><input type="button" id="btn3" workerNum=987 value="属性传递参数" /><br>
document.getElementById("btn3").onclick = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
alert(</span>"hi："+<span style="color: rgba(0, 0, 255, 1)">this</span>.getAttribute("workerNum"<span style="color: rgba(0, 0, 0, 1)">));
}</span></pre>
</div>
<p> </p>
<p>传递参数方法2</p>
<p>使用绑定函数，专门设置一个函数，实现两重调用（绑定）</p>
<p> </p>
<div class="cnblogs_code">
<pre> <input type="button" id="btn4" workerNum="==属性参数==" value="动态绑定事件并传递参数" />
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">绑定函数</span>
bindEvent(document.getElementById("btn4"),"onclick",onclickWorker,"btn=123"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">响应函数</span>
<span style="color: rgba(0, 0, 255, 1)">function</span>onclickWorker(wNum){ alert("工号为："+<span style="color: rgba(0, 0, 0, 1)"> wNum); }
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">执行事件绑定，将参数传给事件源</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> bindEvent(dom, eventType , fun ,args){
dom </span>=<span style="color: rgba(0, 0, 0, 1)"> handleEvent;
</span><span style="color: rgba(0, 0, 255, 1)">function</span> handleEvent(){ <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">闭包</span>
fun.call(<span style="color: rgba(0, 0, 255, 1)">this</span>,args);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">给响应函数的 this 指针赋值为 dom</span>
<span style="color: rgba(0, 0, 0, 1)"> }
}</span></pre>
</div>
<p>其实综合起来就是一句话：document.getElementById("btn4")["onclick"]= _ => onclickWorker("99999”);</p>
<p> </p>
<p>传递参数方法3</p>
<h2>JS中的call、apply、bind方法详解</h2>
<h2><strong>符合DOM2级别的事件绑定方式：（不兼容）</strong></h2>
<p>绑定后可以设定事件流的顺序，顺序为绑定顺序。</p>
<p><span style="color: rgba(0, 128, 0, 1)">格式：addEventListener("eventType",callback,use-capture); </span></p>
<ol>
<li><span style="color: rgba(0, 128, 0, 1)">eventTye：事件名称。 click 省略on</span></li>
<li><span style="color: rgba(0, 128, 0, 1)">callback：事件处理方法</span></li>
<li><span style="color: rgba(0, 128, 0, 1)">use-capture：false-->冒泡阶段/ture-->捕获阶段。 </span></li>
</ol>
<p><span style="color: rgba(0, 128, 0, 1)">ps:大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器</span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">浏览器可以自动传入一个对象 event对象</span><span style="color: rgba(0, 128, 0, 1)">
/*</span><span style="color: rgba(0, 128, 0, 1)">document.getElementById("outerDiv").addEventListener("click" , function(){
//执行语句
})</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">匿名函数方式</span>
<span style="color: rgba(0, 0, 0, 1)">
document.getElementById(</span>"outerDiv").addEventListener("click" ,handleEvent ); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">绑定函数方式</span></pre>
</div>
<p> </p>
<p>特点 ：</p>
<p>可以使用匿名函数或普通函数</p>
<p>响应函数中this代表目标函数</p>
<p>可以设定事件流</p>
<p>无法传递参数，通过其他方式传递</p>
<p>对同一个事件可以绑定多个形影函数，响应函数执行顺序依据绑定顺序</p>
<p><strong>建议使用jquery <span style="color: rgba(0, 128, 0, 1)">的on方法 </span>解决绑定函数兼容方式</strong></p>
<p><strong>1、可以传递参数</strong></p>
<p><strong>2、实现了事件委托</strong></p>
<p><strong>3、on方法可以实现事件流控制</strong></p>
<p><strong>4、在一般的浏览器都兼容</strong></p>
<div class="ad-wrap"> </div>
</div>
</div>
<p>出处：https://my.oschina.net/u/2991733/blog/800883<br></p>
<p> </p>
<p>=======================================================================================</p>
<h1 class="postTitle">JavaScript绑定事件的方法</h1>
<div id="cnblogs_post_body" class="blogpost-body">
<p><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">在JavaScript中，有三种常用的绑定事件的方法：</span></span></span></p>
<ol style="list-style: none; color: rgba(51, 51, 51, 1); line-height: 22.4px; padding-left: 26px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 0; margin-left: 0; background-color: rgba(252, 252, 252, 1)">
<li style="list-style: decimal">在DOM元素中直接绑定；</li>
<li style="list-style: decimal">在JavaScript代码中绑定；</li>
<li style="list-style: decimal">绑定事件监听函数。</li>
</ol>
<p style="list-style: decimal"><span style="font-size: 16px"><strong><span style="background-color: rgba(255, 255, 0, 1)">一. 在DOM元素中直接绑定</span></strong></span></p>
<p style="list-style: decimal">一. 在DOM元素中直接绑定<span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"> <span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">onXXX="JavaScript Code"<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">其中：</span></span></span></span></span></p>
<ul style="list-style: none; color: rgba(51, 51, 51, 1); line-height: 22.4px; padding-left: 20px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 0; margin-left: 0; background-color: rgba(252, 252, 252, 1)">
<li>onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。</li>
<li>JavaScript Code 为处理事件的JavaScript代码，一般是函数。</li>
</ul>
<p style="list-style: decimal">
<span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">例如，单击一个按钮，弹出警告框的代码有如下两种写法。<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">1. 原生函数</span></span></span></span></span></span></span></p>
<div class="dp-highlighter bg_html">
<div class="bar">
<div class="tools">
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_32638" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><input onclick=</code><code class="javascript string">"alert('谢谢支持')"</code> <code class="javascript plain">type=</code><code class="javascript string">"button"</code> <code class="javascript plain">value=</code><code class="javascript string">"点击我，弹出警告框"</code> <code class="javascript plain">/></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> <span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">2. 自定义函数</span></p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_654128" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><input onclick=</code><code class="javascript string">"myAlert()"</code> <code class="javascript plain">type=</code><code class="javascript string">"button"</code> <code class="javascript plain">value=</code><code class="javascript string">"点击我，弹出警告框"</code> <code class="javascript plain">/></code></div>
<div class="line number2 index1 alt1"><code class="javascript plain"><script type=</code><code class="javascript string">"text/javascript"</code><code class="javascript plain">></code></div>
<div class="line number3 index2 alt2"><code class="javascript keyword">function</code> <code class="javascript plain">myAlert(){</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces"> </code><code class="javascript plain">alert(</code><code class="javascript string">"谢谢支持"</code><code class="javascript plain">);</code></div>
<div class="line number5 index4 alt2"><code class="javascript plain">}</code></div>
<div class="line number6 index5 alt1"><code class="javascript plain"></script></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> </p>
<p><span style="font-size: 18px; background-color: rgba(255, 255, 255, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px">2. this在第一种绑定方式中的用法。this作为形式参数</span></span></p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_335828" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2"> </div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><input type=</code><code class="javascript string">'button'</code> <code class="javascript plain">onclick=</code><code class="javascript string">'ClickOn(this)'</code><code class="javascript plain">></code></div>
<div class="line number3 index2 alt2"><code class="javascript keyword">function</code> <code class="javascript plain">ClickOn(self){</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces"> </code><code class="javascript comments">//self 就代指当前点击的标签</code></div>
<div class="line number7 index6 alt2"><code class="javascript plain">}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p> </p>
<p>实例：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_20825" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter"> </td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><!DOCTYPE html></code></div>
<div class="line number2 index1 alt1"><code class="javascript plain"><html lang=</code><code class="javascript string">"en"</code><code class="javascript plain">></code></div>
<div class="line number3 index2 alt2"><code class="javascript plain"><head></code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><meta charset=</code><code class="javascript string">"UTF-8"</code><code class="javascript plain">></code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces"> </code><code class="javascript plain"><title>Title</title></code></div>
<div class="line number6 index5 alt1"><code class="javascript plain"></head></code></div>
<div class="line number7 index6 alt2"><code class="javascript plain"><body></code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><input type=</code><code class="javascript string">"button"</code> <code class="javascript plain">value=</code><code class="javascript string">"点我"</code> <code class="javascript plain">onclick=</code><code class="javascript string">"myClick(this)"</code><code class="javascript plain">/></code></div>
<div class="line number9 index8 alt2"><code class="javascript spaces"> </code><code class="javascript plain"><script></code></div>
<div class="line number10 index9 alt1"><code class="javascript spaces"> </code><code class="javascript keyword">function</code> <code class="javascript plain">myClick(ths){</code></div>
<div class="line number11 index10 alt2"><code class="javascript spaces"> </code><code class="javascript plain">ths.style.backgroundColor=</code><code class="javascript string">"red"</code><code class="javascript plain">;</code></div>
<div class="line number12 index11 alt1"><code class="javascript spaces"> </code><code class="javascript plain">}</code></div>
<div class="line number13 index12 alt2"><code class="javascript spaces"> </code><code class="javascript plain"></script></code></div>
<div class="line number14 index13 alt1"><code class="javascript plain"></body></code></div>
<div class="line number15 index14 alt2"><code class="javascript plain"></html></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> 效果：</p>
<p><img src="https://images2017.cnblogs.com/blog/1200823/201708/1200823-20170831151307108-234727099.png" alt=""> </p>
<p> </p>
<p> </p>
<h2>二. 在JavaScript代码中绑定</h2>
<p><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">在JavaScript代码中绑定事件的语法为：<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">elementObject.onXXX=function(){ // 事件处理代码 }<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">其中：</span></span></span></span></span></span></p>
<ul style="list-style: none; color: rgba(51, 51, 51, 1); line-height: 22.4px; padding-left: 20px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 0; margin-left: 0; background-color: rgba(252, 252, 252, 1)">
<li>elementObject 为DOM对象，即DOM元素。</li>
<li>onXXX 为事件名称。</li>
</ul>
<p><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">
<span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：</span></span></span></span></span></span></p>
<p> </p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_555342" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><input id=</code><code class="javascript string">"demo"</code> <code class="javascript plain">type=</code><code class="javascript string">"button"</code> <code class="javascript plain">value=</code><code class="javascript string">"点击我，显示 type 属性"</code> <code class="javascript plain">/></code></div>
<div class="line number2 index1 alt1"><code class="javascript plain"><script type=</code><code class="javascript string">"text/javascript"</code><code class="javascript plain">></code></div>
<div class="line number3 index2 alt2"><code class="javascript plain">document.getElementById(</code><code class="javascript string">"demo"</code><code class="javascript plain">).onclick=</code><code class="javascript keyword">function</code><code class="javascript plain">(){</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces"> </code><code class="javascript plain">alert(</code><code class="javascript keyword">this</code><code class="javascript plain">.getAttribute(</code><code class="javascript string">"type"</code><code class="javascript plain">)); </code><code class="javascript comments">// this 指当前发生事件的HTML元素，这里是<input>标签</code></div>
<div class="line number5 index4 alt2"><code class="javascript plain">}</code></div>
<div class="line number6 index5 alt1"><code class="javascript plain"></script></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> </p>
<p> this在第二种绑定方式中的应用： </p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_733426" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><input id=</code><code class="javascript string">'i1'</code> <code class="javascript plain">type=</code><code class="javascript string">'button'</code><code class="javascript plain">></code></div>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="javascript plain">document.getElementById(</code><code class="javascript string">'i1'</code><code class="javascript plain">).onclick=</code><code class="javascript keyword">function</code><code class="javascript plain">(){</code></div>
<div class="line number4 index3 alt1"> </div>
<div class="line number5 index4 alt2"><code class="javascript keyword">this</code> <code class="javascript comments">// 这里的this代指当前点击的标签</code></div>
<div class="line number6 index5 alt1"> </div>
<div class="line number7 index6 alt2"><code class="javascript plain">}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> </p>
<p><span style="font-size: 18px"><strong><span style="background-color: rgba(255, 255, 0, 1)">三. 绑定事件监听函数</span></strong></span></p>
<p> <span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">addEventListener()函数语法：<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">elementObject.addEventListener(eventName,handle,useCapture);<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"></span></span></span></span></p>
<p><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px">addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数。</span></span></span></span></span></p>
<table style="width: 876px; color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; border-collapse: collapse; background-color: rgba(252, 252, 252, 1); height: 218px">
<tbody>
<tr><th style="padding: 7px 5px; border: 1px solid rgba(204, 204, 204, 1); color: rgba(102, 102, 102, 1); width: 120px; border-image: none">参数</th><th style="padding: 7px 5px; border: 1px solid rgba(204, 204, 204, 1); color: rgba(102, 102, 102, 1); border-image: none">说明</th></tr>
<tr>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">elementObject</td>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">DOM对象（即DOM元素）。</td>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">eventName</td>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。</td>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">handle</td>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">事件句柄函数，即用来处理事件的函数。</td>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">useCapture</td>
<td style="padding: 5px; border: 1px solid rgba(204, 204, 204, 1); border-image: none">Boolean类型，是否使用捕获，一般用false 。true:捕获模型；false：冒泡模型</td>
</tr>
</tbody>
</table>
<p><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px"></span></span></span></span><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><span style="color: rgba(178, 34, 34, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)">useCapture: false, true 的实例效果探索<br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"><br style="color: rgba(51, 51, 51, 1); line-height: 22.4px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgba(252, 252, 252, 1)"></span></span></span></span></span></span></p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_859924" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><!DOCTYPE html></code></div>
<div class="line number2 index1 alt1"><code class="javascript plain"><html lang=</code><code class="javascript string">"en"</code><code class="javascript plain">></code></div>
<div class="line number3 index2 alt2"><code class="javascript plain"><head></code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><meta charset=</code><code class="javascript string">"UTF-8"</code><code class="javascript plain">></code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces"> </code><code class="javascript plain"><title>Title</title></code></div>
<div class="line number6 index5 alt1"><code class="javascript plain"></head></code></div>
<div class="line number7 index6 alt2"><code class="javascript plain"><style></code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces"> </code><code class="javascript preprocessor">#main{</code></div>
<div class="line number9 index8 alt2"><code class="javascript spaces"> </code><code class="javascript plain">background-color:red;</code></div>
<div class="line number10 index9 alt1"><code class="javascript spaces"> </code><code class="javascript plain">width:300px;</code></div>
<div class="line number11 index10 alt2"><code class="javascript spaces"> </code><code class="javascript plain">height:400px;</code></div>
<div class="line number12 index11 alt1"><code class="javascript spaces"> </code><code class="javascript plain">}</code></div>
<div class="line number13 index12 alt2"><code class="javascript spaces"> </code><code class="javascript preprocessor">#content{</code></div>
<div class="line number14 index13 alt1"><code class="javascript spaces"> </code><code class="javascript plain">background-color:pink;</code></div>
<div class="line number15 index14 alt2"><code class="javascript spaces"> </code><code class="javascript plain">width:150px;</code></div>
<div class="line number16 index15 alt1"><code class="javascript spaces"> </code><code class="javascript plain">height:200px;</code></div>
<div class="line number17 index16 alt2"><code class="javascript spaces"> </code><code class="javascript plain">}</code></div>
<div class="line number18 index17 alt1"><code class="javascript plain"></style></code></div>
<div class="line number19 index18 alt2"><code class="javascript plain"><body></code></div>
<div class="line number20 index19 alt1"> </div>
<div class="line number21 index20 alt2"><code class="javascript spaces"> </code><code class="javascript plain"><div id=</code><code class="javascript string">"main"</code><code class="javascript plain">></code></div>
<div class="line number22 index21 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><div id=</code><code class="javascript string">"content"</code><code class="javascript plain">></div></code></div>
<div class="line number23 index22 alt2"><code class="javascript spaces"> </code><code class="javascript plain"></div></code></div>
<div class="line number24 index23 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><script></code></div>
<div class="line number25 index24 alt2"><code class="javascript spaces"> </code><code class="javascript keyword">var</code> <code class="javascript plain">mymain=document.getElementById(</code><code class="javascript string">"main"</code><code class="javascript plain">);</code></div>
<div class="line number26 index25 alt1"><code class="javascript spaces"> </code><code class="javascript keyword">var</code> <code class="javascript plain">mycontent=document.getElementById(</code><code class="javascript string">"content"</code><code class="javascript plain">);</code></div>
<div class="line number27 index26 alt2"><code class="javascript spaces"> </code><code class="javascript plain">mymain.addEventListener(</code><code class="javascript string">"click"</code><code class="javascript plain">,</code><code class="javascript keyword">function</code><code class="javascript plain">(){console.log(</code><code class="javascript string">"main"</code><code class="javascript plain">)},</code><code class="javascript keyword">false</code><code class="javascript plain">);</code></div>
<div class="line number28 index27 alt1"><code class="javascript spaces"> </code><code class="javascript plain">mycontent.addEventListener(</code><code class="javascript string">"click"</code><code class="javascript plain">,</code><code class="javascript keyword">function</code><code class="javascript plain">(){console.log(</code><code class="javascript string">"content"</code><code class="javascript plain">)},</code><code class="javascript keyword">false</code><code class="javascript plain">);</code></div>
<div class="line number29 index28 alt2"> </div>
<div class="line number30 index29 alt1"><code class="javascript spaces"> </code><code class="javascript plain"></script></code></div>
<div class="line number31 index30 alt2"><code class="javascript plain"></body></code></div>
<div class="line number32 index31 alt1"><code class="javascript plain"></html></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> </p>
<p> false 效果，从内往外出来，所以是content先出来：</p>
<p><img src="https://images2017.cnblogs.com/blog/1200823/201708/1200823-20170830094703937-859212756.png" alt="" width="509" height="333"></p>
<p> </p>
<p>true效果，从外往内出来，所以是main先出来：</p>
<p> </p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_254654" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain"><!DOCTYPE html></code></div>
<div class="line number2 index1 alt1"><code class="javascript plain"><html lang=</code><code class="javascript string">"en"</code><code class="javascript plain">></code></div>
<div class="line number3 index2 alt2"><code class="javascript plain"><head></code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><meta charset=</code><code class="javascript string">"UTF-8"</code><code class="javascript plain">></code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces"> </code><code class="javascript plain"><title>Title</title></code></div>
<div class="line number6 index5 alt1"><code class="javascript plain"></head></code></div>
<div class="line number7 index6 alt2"><code class="javascript plain"><style></code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces"> </code><code class="javascript preprocessor">#main{</code></div>
<div class="line number9 index8 alt2"><code class="javascript spaces"> </code><code class="javascript plain">background-color:red;</code></div>
<div class="line number10 index9 alt1"><code class="javascript spaces"> </code><code class="javascript plain">width:300px;</code></div>
<div class="line number11 index10 alt2"><code class="javascript spaces"> </code><code class="javascript plain">height:400px;</code></div>
<div class="line number12 index11 alt1"><code class="javascript spaces"> </code><code class="javascript plain">}</code></div>
<div class="line number13 index12 alt2"><code class="javascript spaces"> </code><code class="javascript preprocessor">#content{</code></div>
<div class="line number14 index13 alt1"><code class="javascript spaces"> </code><code class="javascript plain">background-color:pink;</code></div>
<div class="line number15 index14 alt2"><code class="javascript spaces"> </code><code class="javascript plain">width:150px;</code></div>
<div class="line number16 index15 alt1"><code class="javascript spaces"> </code><code class="javascript plain">height:200px;</code></div>
<div class="line number17 index16 alt2"><code class="javascript spaces"> </code><code class="javascript plain">}</code></div>
<div class="line number18 index17 alt1"><code class="javascript plain"></style></code></div>
<div class="line number19 index18 alt2"><code class="javascript plain"><body></code></div>
<div class="line number20 index19 alt1"> </div>
<div class="line number21 index20 alt2"><code class="javascript spaces"> </code><code class="javascript plain"><div id=</code><code class="javascript string">"main"</code><code class="javascript plain">></code></div>
<div class="line number22 index21 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><div id=</code><code class="javascript string">"content"</code><code class="javascript plain">></div></code></div>
<div class="line number23 index22 alt2"><code class="javascript spaces"> </code><code class="javascript plain"></div></code></div>
<div class="line number24 index23 alt1"><code class="javascript spaces"> </code><code class="javascript plain"><script></code></div>
<div class="line number25 index24 alt2"><code class="javascript spaces"> </code><code class="javascript keyword">var</code> <code class="javascript plain">mymain=document.getElementById(</code><code class="javascript string">"main"</code><code class="javascript plain">);</code></div>
<div class="line number26 index25 alt1"><code class="javascript spaces"> </code><code class="javascript keyword">var</code> <code class="javascript plain">mycontent=document.getElementById(</code><code class="javascript string">"content"</code><code class="javascript plain">);</code></div>
<div class="line number27 index26 alt2"><code class="javascript spaces"> </code><code class="javascript plain">mymain.addEventListener(</code><code class="javascript string">"click"</code><code class="javascript plain">,</code><code class="javascript keyword">function</code><code class="javascript plain">(){console.log(</code><code class="javascript string">"main"</code><code class="javascript plain">)},</code><code class="javascript keyword">true</code><code class="javascript plain">);</code></div>
<div class="line number28 index27 alt1"><code class="javascript spaces"> </code><code class="javascript plain">mycontent.addEventListener(</code><code class="javascript string">"click"</code><code class="javascript plain">,</code><code class="javascript keyword">function</code><code class="javascript plain">(){console.log(</code><code class="javascript string">"content"</code><code class="javascript plain">)},</code><code class="javascript keyword">true</code><code class="javascript plain">);</code></div>
<div class="line number29 index28 alt2"> </div>
<div class="line number30 index29 alt1"><code class="javascript spaces"> </code><code class="javascript plain"></script></code></div>
<div class="line number31 index30 alt2"><code class="javascript plain"></body></code></div>
<div class="line number32 index31 alt1"><code class="javascript plain"></html></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> 效果图：</p>
<p><img src="https://images2017.cnblogs.com/blog/1200823/201708/1200823-20170830094928312-398674506.png" alt="" width="691" height="341"></p>
<p> </p>
</div>
<div class="tools"> </div>
</div>
<p> </p>
<p>出处：https://www.cnblogs.com/momo8238/p/7449437.html</p>
<p>=======================================================================================</p>
<div id="article">
<h1 class="title">JavaScript 事件属性绑定带参数的函数</h1>
<div class="summary">在JavaScript中，为了实现表现和控制相分离，可以通过0级的DOM事件属性或者2级的事件模型来实现，不过这两者在针对某个事件类型调用相应的事件句柄的时候，不能给事件句柄提供参数，也就是说，事件属性的值只能是一个函数引用。</div>
<div>例如不能采用以下这种调用方式：</div>
<div>element.onclick = test();</div>
<div>element.onclick = test(arg1,arg2);</div>
<div>只能通过：element.onclick = function(){ ... }; </div>
<div>或者element.onclick = test这种方式来实现，所以无法给函数传递参数。</div>
<div>参考了大量的网上资料，解决这个问题的方式，以代码为例，如下所示：</div>
<div>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Handler() {};
Handler.prototype </span>=<span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
* 把eventType类型的事件绑定到element元素，并使用handler事件句柄进行处理
* 兼容 IE 及 Firefox 等浏览器
*
* @param element 在其上注册事件的对象（Object）
* @param eventType 注册的事件类型（String），不加“on”
* @param handler 事件句柄（Function）
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
registerEvent: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(element, eventType, handler) {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (element.attachEvent) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2级DOM的事件处理</span>
element.attachEvent('on' +<span style="color: rgba(0, 0, 0, 1)"> eventType, handler);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (element.addEventListener) {
element.addEventListener(eventType, handler, </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span> { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">0级DOM的事件处理</span>
element['on' + eventType] =<span style="color: rgba(0, 0, 0, 1)"> handler;
}
},
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
* 获得带参数的事件句柄的引用
*
* @param obj 需要绑定事件处理函数的所有者，null 表示 window 对象
* @param func 需要绑定的事件处理函数名
* @param ... 第三个参数开始为绑定事件处理函数的参数，由 0 到多个构成
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
bind: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(obj, handler) {
obj </span>= obj ||<span style="color: rgba(0, 0, 0, 1)"> window;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> args =<span style="color: rgba(0, 0, 0, 1)"> [];
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 2; i < arguments.length; i++<span style="color: rgba(0, 0, 0, 1)">) {
args.push(arguments);
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
handler.apply(obj, args)
};
}
}可能是使用方式为：
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> show(txtObj) {
alert(txtObj.value);
txtObj.focus();
txtObj.select();
}
window.onload </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> handler = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Handler();
handler.registerEvent($(</span>"txt"), "change", handler.bind(<span style="color: rgba(0, 0, 255, 1)">null</span>, show, $("txt"))); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">采用2级事件模型的方式</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">$("txt").onchange = handler.bind(null,show,$("txt"));//JavaScript事件属性的方式</span>
}</pre>
</div>
<p> </p>
</div>
<div> </div>
<div> </div>
<div><br>
<div class="art_xg">
<strong>您可能感兴趣的文章:</strong>
<ul>
<li>JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法</li>
<li>JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题</li>
<li>js中DOM事件绑定分析</li>
<li>JS 事件绑定、事件监听、事件委托详细介绍</li>
<li>JavaScript给按钮绑定点击事件（onclick）的方法</li>
<li>js创建一个input数组并绑定click事件的方法</li>
<li>javascript事件委托的方式绑定详解</li>
<li>Javascript 事件流和事件绑定</li>
<li>JS动态添加元素及绑定事件造成程序重复执行解决</li>
<li>javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结</li>
<li>js事件on动态绑定数据,绑定多个事件的方法</li>
<li>JavaScript Dom 绑定事件操作实例详解</li>
</ul>
</div>
<p> </p>
<p>出处：https://www.jb51.net/article/17463.htm</p>
</div>
</div>
<p>====================================================================================</p>
<h2>功能优化</h2>
<p>
根据上面的提示，我自己进行了优化，用在自己的项目上。</p>
<p>方便使用，接口方法统一，优化后的代码如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_60c89ad9-074b-4f3d-80cc-3b42e0a86ebe" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_60c89ad9-074b-4f3d-80cc-3b42e0a86ebe" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_60c89ad9-074b-4f3d-80cc-3b42e0a86ebe" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id='txt' placeholder="请输入关键词" />
<input type="button" id="btn1" value="绑定事件函数()" />
<input type="button" id="btn2" value="绑定事件函数(参数)" />
<script>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Handler() {};
Handler.prototype </span>=<span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
* 把eventType类型的事件绑定到element元素，并使用handler事件句柄进行处理
* 兼容 IE 及 Firefox 等浏览器
*
* @param element 在其上注册事件的对象（Object）
* @param eventType 注册的事件类型（String）
* @param fun 事件句柄（Function）
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
registerEvent: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(element, eventType, fun) {
eventType </span>= (eventType.toLowerCase().startsWith("on")?"":"on")+<span style="color: rgba(0, 0, 0, 1)">eventType;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> args =<span style="color: rgba(0, 0, 0, 1)"> ;
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 3; i < arguments.length; i++<span style="color: rgba(0, 0, 0, 1)">) {
args.push(arguments);
}
handler </span>= <span style="color: rgba(0, 0, 255, 1)">this</span>.bindFun.apply(<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">,args);
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (element.attachEvent) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2级DOM的事件处理 </span>
<span style="color: rgba(0, 0, 0, 1)"> element.attachEvent(eventType, handler);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (element.addEventListener) {
element.addEventListener(eventType.substring(</span>2), handler, <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span> { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">0级DOM的事件处理 </span>
element =<span style="color: rgba(0, 0, 0, 1)"> handler;
}
},
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
* 获得带参数的事件句柄的引用
*
* @param obj 需要绑定事件处理函数的所有者，null 表示 window 对象
* @param func 需要绑定的事件处理函数名
* @param ... 第三个参数开始为绑定事件处理函数的参数，由 0 到多个构成
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
bindFun: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(obj, handler) {</span>
<span style="color: rgba(0, 128, 0, 1)">//console.log(this);</span>
obj = obj ||<span style="color: rgba(0, 0, 0, 1)"> window;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> args =<span style="color: rgba(0, 0, 0, 1)"> [];
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 2; i < arguments.length; i++<span style="color: rgba(0, 0, 0, 1)">) {
args.push(arguments);
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
handler.apply(obj, args)
};
}
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">使用方式为：</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> show(txtObj) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> str="normal"<span style="color: rgba(0, 0, 0, 1)">;
str</span>=txtObj?<span style="color: rgba(0, 0, 0, 1)">.id;
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 1; i < arguments.length; i++<span style="color: rgba(0, 0, 0, 1)">) {
str</span>+="\r\n"+<span style="color: rgba(0, 0, 0, 1)">arguments;
}
alert(str);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">txtObj.focus();</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">txtObj.select();</span>
<span style="color: rgba(0, 0, 0, 1)"> }
window.onload </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">() {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> handler = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Handler();
</span><span style="color: rgba(0, 0, 255, 1)">var</span> dom=document.getElementById("txt"<span style="color: rgba(0, 0, 0, 1)">);
handler.registerEvent(dom, </span>"onchange", show, dom,0,1,2,3);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">采用2级事件模型的方式 </span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">dom.onchange = handler.bindFun(null,show,dom,'1111',"aa");//JavaScript事件属性的方式 </span>
<span style="color: rgba(0, 0, 0, 1)">
dom</span>=document.getElementById("btn1"<span style="color: rgba(0, 0, 0, 1)">);
handler.registerEvent(dom, </span>"click"<span style="color: rgba(0, 0, 0, 1)">, show, dom);
dom</span>=document.getElementById("btn2"<span style="color: rgba(0, 0, 0, 1)">);
handler.registerEvent(dom, </span>"click", show,dom,1,2,3,4,5<span style="color: rgba(0, 0, 0, 1)">);
}
</span></script>
</body>
</html></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<div class="div_masklayer" id="div_masklayer"></div>
<div class="div_popup" id="Div_popup">
<div style="float:left;width:50%">
<img class="img_zfb" id="img_zfb" src="https://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png" />
</div>
<div style="float:left;width:50%">
<img class="img_zfb" id="img_zfb" src="https://images.cnblogs.com/cnblogs_com/mq0036/508398/o_200921131119o_12.png">
</div>
<p class="mid">您的资助是我最大的动力！<br>金额随意,欢迎来赏！<br>
<span style="color: #f9f">付</span>款后有任何问题请给我留言。</p>
</div>
<div class="autograph">
<p> <span style="display: none"> 如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【<strong>推荐</strong>】按钮。<br>
</span> 如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的【<strong>关注我</strong>】。(●'◡'●)</p>
<p>因为，我的写作热情也离不开您的肯定与支持，感谢您的阅读，我是【<strong>Jack_孟</strong>】！</p>
<div class="blogds">
<b style="color:#f00;font-size: 22px">如果对你有所帮助，赞助一杯咖啡！打</b>
<b style="color: #f00; font-size: 22px">付款后有任何问题请给我留言!!!</b>
</div>
<p>本文来自博客园，作者：jack_Meng，转载请注明原文链接：https://www.cnblogs.com/mq0036/p/14333403.html</p>
<p>【免责声明】本文来自源于网络，如涉及版权或侵权问题，请及时联系我们，我们将第一时间删除或更改！</p>
</div><br><br>
来源：https://www.cnblogs.com/mq0036/p/14333403.html
頁:
[1]