javascript-事件绑定和普通事件

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

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

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

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

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

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

## 3. 事件绑定的方法 ##

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

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

(3.1.2)在JavaScript代码中绑定

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

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

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

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

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

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

dom.removeEventListener(事件,方法名)

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

## 4. 事件绑定的案例 ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>绑定事件和普通事件</title>
        </head>
        <body>
            <a href='#' id='clickMe'>点击我</a>
        </body>
        <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>
    </html>

## 5.jquery的事件绑定方法 ##

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

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

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

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

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

[http_www.runoob.com_jsref_met-element-addeventlistener.html]: http://www.runoob.com/jsref/met-element-addeventlistener.html