javascript-事件绑定和普通事件

╰+攻爆jí腚メ 2022-06-12 11:09 317阅读 0赞

1.什么是事件绑定,什么是普通事件？

事件绑定:针对dom绑定的事件.
普通事件:没有针对dom绑定的事件.

2.为什么要使用事件绑定?

普通事件有一个缺点,如果在普通事件里对某个节点进行两次委托事件（onclick）操作时会出现覆盖的问题,因此需要使用到事件绑定.

  1. //普通事件
  2. html:
  3.         <a href='#' id='clickMe'>点击我</a>
  4. javascript:
  5.         var dom=document.getElementById('clickMe'); 
  6.         dom.onclick=function(){ 
  7.             alert(2)//输出了2
  8.         }
  9.         dom.onmouseout=function(){ 
  10.             alert(3)//3
  11.         }

3. 事件绑定的方法

(3.1)事件绑定类型
(3.1.1)在dom元素中直接绑定(onclick,onmouseout,onmouseover等)

  1. <a href='javascript:void(0)' onclick='alert(111)'>我是绑定事件</a>

(3.1.2)在JavaScript代码中绑定

  1. html结构: 
  2.     <input type='text' id='pointMe'/>
  3.     javascript结构：
  4.     document.getElementById('pointMe').onclick=function(){
  5.         alert('我被点了')
  6.     }

(3.1.3)绑定事件监听函数
考虑到兼容问题:
—IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。
—addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；
兼容老版本的写法:

  1. var x = document.getElementById('myBtn');
  2. if (x.addEventListener) {
  3.    //所有主流浏览器，除了 IE 8 及更早 IE版本
  4.     x.addEventListener('click', myFunction);
  5. } else if (x.attachEvent) {
  6.    // IE 8 及更早 IE 版本
  7.     x.attachEvent('onclick', myFunction);
  8. }

(3.1.3.1)监听事件的补获和冒泡:

dom.addEventListener(事件,方法,布尔值)

当布尔值为false的时候是冒泡事件,事件执行的次序是先执行子节点的事件在执行父节点的事件
当布尔值是true的时候是补获事件.事件执行的次序是先执行父节点的事件在执行子节点的事件
(3.1.3.2)移除监听事件:

  1. dom.removeEventListener(事件,方法名)

参考网站:http://www.runoob.com/jsref/met-element-addeventlistener.html

4. 事件绑定的案例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset='UTF-8'>
  5.         <title>绑定事件和普通事件</title>
  6.     </head>
  7.     <body>
  8.         <a href='#' id='clickMe'>点击我</a>
  9.     </body>
  10.     <script type='text/javascript'> var dom=document.getElementById('clickMe'); //普通事件 dom.onclick=function(){ alert(1)//没有输出 } dom.onclick=function(){ alert(2)//输出了2 } //绑定事件 dom.addEventListener('click',function(){ alert(1)//输出了1 }) dom.addEventListener('click',function(){ alert(2)//输出了2 }) </script>
  11. </html>

5.jquery的事件绑定方法

bind:只能对已有的元素绑定事件(现在摒弃了)
unbind:移除事件

  1. /*可以放多个事件*/
  2. $('.dom').bind('click mouseenter',function(){ })

live: 能对未来插入的元素绑定事件(现在摒弃了)
die:移除事件

delegate:事件处理程序适用于当前或未来的元素
undelegate:事件移除

on:事件处理程序适用于当前或未来的元素
off():事件移除事件

发表评论

表情：
评论列表 （有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读