当前位置：首页 > Web开发 > 正文

html与js代码耦合度高

2024-03-31 Web开发

深入理解js Dom事件机制（一）——事件流

事件就是当用户或者浏览器自身执行的某种行动，诸如 click、mou搜索引擎优化ver等都是事件的名称，那响应个事件的函数就称为事件措置惩罚惩罚措施（事件措置惩罚惩罚函数、事件句柄）。事件措置惩罚惩罚措施的名字都是以on+事件名称定名，好比 click事件的事件措置惩罚惩罚措施就是onclick，为某个事件指定事件措置惩罚惩罚措施的方法大抵分为三种。 1、HTML事件措置惩罚惩罚措施这个很简单，大家根基初学js的时候都应该用过，就不再赘述，直接看实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html事件措置惩罚惩罚措施</title> </head> <body>  <input type="button" value="clcik me">   <input type="button" value="happy"> </body> <script type="text/javascript"> function happy() { console.log(this === window); // true } </script> </html> 以上代码展示了两种html指定事件措置惩罚惩罚措施的要领，需要注意的是第一种做法的this指向的是元素自己，所以我们可以很容易的访谒元素自己的属性，而第二种做法的this指向的window东西。 错误谬误：

存在时差问题，当用户在元素呈此刻页面就触发事件，但有可能这个时候事件措置惩罚惩罚措施不具备执行的条件。

html与js代码耦合度高，这正是很多开发者放弃html事件措置惩罚惩罚措施的原因。

2、DOM0级事件措置惩罚惩罚措施这种方法首先需要取得一个dom元素东西的应用，然后将一个函数赋值给一个事件措置惩罚惩罚措施，这种方法在第四代浏览器中就已经呈现，至今仍然为此刻浏览器所撑持，原因一是简单，二是具有跨浏览器的优势。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOMO级事件措置惩罚惩罚措施</title> </head> <body> <input type="button" value="happy"> </body> <script type="text/javascript"> var btn = document.getElementById(‘happy‘); btn.onclick = function () { console.log(this.value); // happy } </script> </html> 通过上面的代码可以看出，这种要领指定的事件措置惩罚惩罚措施中this是指向元素自己。相对应的这种要领也可以删除指定的事件措置惩罚惩罚措施： btn.onclick = null. 3、DOM2级事件措置惩罚惩罚措施 DOM2级事件界说了两个要领，用于措置惩罚惩罚指定和删除事件措置惩罚惩罚措施的操纵：addEventListener()、removeEventListener(),它们都接受三个参数：要措置惩罚惩罚的事件名、事件措置惩罚惩罚函数、布尔值（true：在捕获阶段挪用事件措置惩罚惩罚函数，false:在冒泡阶段挪用事件措置惩罚惩罚函数）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM2级事件措置惩罚惩罚措施</title> </head> <body> <input type="button" value="happy"> </body> <script type="text/javascript"> var btn = document.getElementById(‘happy‘); btn.addEventListener(‘click‘,function happy() { console.log(‘事件捕获阶段被单击‘) },true) btn.addEventListener(‘click‘,function happy() { console.log(‘事件冒泡阶段被单击‘) },false) btn.addEventListener(‘mou搜索引擎优化ver‘,function happy() { console.log(‘鼠标移入啦‘) }) </script> </html> 从上述代码中可以看出：

addEventListener可以对一个元素添加多个事件措置惩罚惩罚措施，并可以声明是将事件措置惩罚惩罚措施添加到哪一个阶段（为了保证兼容性、建议都将事件措置惩罚惩罚措施添加到冒泡阶段）。

需要出格注意的是：removeEventListener移除事件措置惩罚惩罚函数的时候，传入的事件事件措置惩罚惩罚函数必需和addEventListener传入的不异，方可移除，这就意味着如果addEventListener中使用了一个匿名函数来作为事件措置惩罚惩罚函数，那么removeEventListener将无法移除。

4、IE事件措置惩罚惩罚措施（IE8 && IE8 - && Opera） IE实现了类似DOM中的两个要领：attacheEvent()、detachEvent(),它们接受两个参数：事件措置惩罚惩罚措施名称、事件措置惩罚惩罚函数。由于IE8以及更早的浏览器只撑持冒泡事件流，所以通过attacheEvent（）添加的事件措置惩罚惩罚措施都将在会被添加到冒泡阶段。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IE事件措置惩罚惩罚措施</title> </head> <body> <input type="button" value="happy"> </body> <script type="text/javascript"> var btn = document.getElementById(‘happy‘); btn.attachEvent(‘click‘,function happy() { console.log(‘事件冒泡阶段被单击‘) }) btn.attachEvent(‘mou搜索引擎优化ver‘,function happy() { console.log(‘鼠标移入啦‘) }) </script> </html>

与DOM2级要领的异同

不异：

1、都可以添加和移除事件措置惩罚惩罚措施，匿名函数均不成移除。 2、都可以添加多个事件措置惩罚惩罚措施。

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31520.html

上一篇：剩下的事情交给 httpclient替你完成
下一篇：后期维护起来相对来说比较麻烦

html与js代码耦合度高

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢