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人围观)

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

相关阅读