标签：asc 事件流 相同 cli button 脚本 目标 直接 value
这种是通过指定onclick特性并将一些JavaScript代码作为它的值来定义的。由于这个值是JavaScript，因此不能在其中使用未经转义的HTML语法字符，例如和号(&)、双引号("")、小于号（<）或大于号（>）,为了避免使用HTML实体，这里使用单引号，如果想要使用双引号，就需要使用转义。
这样指定事件处理程序会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，就是事件对象。通过event变量，可以直接访问事件对象，在这个函数内部，this值等于事件的目标元素。
<input type="button" value="Click Me" onclick="alert(‘click‘)"/> <input type="button" value="Click Me" onclick="alert("click")"/> <input type="button" value="Click Me" onclick="alert(event.type)"/> <input type="button" value="Click Me" onclick="alert(this.value)"/> <input type="button" value="Click Me" onclick="alert(value)"/>
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。
<input type="button" value="Click Me" onclick="showMessage()"/> <script> function showMessage(){ alert("Hello word!"); } </script>
使用这种方式的时候，假设showMessage()函数是在按钮下方、页面的最底部定义的，如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。另外HTML和JavaScript代码紧密耦合，如果要更换事件处理程序，就需要同时更改HTML代码和JavaScript代码，因此，现在很多人都不再使用这种方法。
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick，将这种属性的值设置为一个函数，就可以指定事件处理程序。
使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行的，程序中的this引用当前元素,可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
<input type="button" value="Click Me" id="inp"/> <script> var btn = document.getElementById(‘inp‘); btn.onclick = function(){ alert ("Click"); alert(this.id); //inp alert(this.type); //button }; </script>
也可以删除通过DOM0级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设为null即可。
btn.onclick = null;
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含着两个方法，并且它们接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
<input type="button" value="Click Me" id="DOM2"> <script> var DOM2 = document.getElementById("DOM2"); DOM2.addEventListener("click",function(){ alert(this.value); //Click Me },false); DOM2.addEventListener("click",function(){ alert(this.type); //button },false); </script>
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序使用的参数相同，这意味着上面通过addEventListener()添加的匿名函数将无法移除。只能移除下面的事件处理程序。
<script> var DOM2 = document.getElementById("DOM2"); var handler = function(){ alert(this.id); }; DOM2.addEventListener("click",handler,flase); DOM2.removeEventListener("click",handler,flase); </script>
标签：asc 事件流 相同 cli button 脚本 目标 直接 value
原文地址：https://www.cnblogs.com/yuyujuan/p/9265413.html
