博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS学习笔记(一)DOM事件和监听
阅读量:6690 次
发布时间:2019-06-25

本文共 1431 字,大约阅读时间需要 4 分钟。

  将事件绑定到元素身上的三种方法:

  1、HTML事件处理程序(不推荐使用)

1 

  2、传统的DOM事件处理程序

  即在目标DOM事件的基础上绑定事件。如果在声明函数时加上括号,函数会立即调用,去掉括号,函数不会立即调用。

1  function change(){2      //code 3 } 4 var name = document.getElementById("name"); 5 name.onclick = change; //

  3、设置事件监听器。

  即为addEventListener()函数,该函数有三个参数,第一个参数指定事件名称,第二个参数是发生事件时要调用的函数,第三个参数是指定事件响应的方式,为布尔值。当第三参数为true时为冒泡方式,当参数为false时为捕获方式。

1 element.addEventListener('event',functionName,Boolean);

   因为在注册事件处理程序和事件监听器时,在函数名的后面是没有小括号的,因此需要采用其他的手段来传递参数。

  如果需要向事件处理程序或事件监听器所调用的函数传递参数,就需要把方法调用封装在匿名函数中。

1 el.addEventListener('event',function(){2    changename(5); 3 },false);

   说到这里,就很要必要解释一下事件流以及什么是事件冒泡、事件捕获了。

  事件流:描述从页面中接受事件的顺序。

  HTML元素都位于另一些元素中。当一个元素发生某个事件时,它的父元素同样会发生该事件。

  当代码在一个元素和其祖先元素或者后代元素上都有事件处理程序时,事件流就会变得很重要。

  事件冒泡:指的是事件从最具体的节点开始向外传播到最宽泛的节点。这是事件流的默认类型,被绝大多是浏览器支持。

  事件捕获:指的是事件从最宽泛的节点开始向内传播到最具体的节点。这种方式在IE8和更早版本的IE中不被支持。

  支持旧版本的事件监听器

  IE5~IE8中不支持addEventListener()方法。但支持attachEvent()方法,让事件监听器在旧版本的IE浏览器中同样能运行。

  使用事件监听器之前,应检测addEventListener()方法能否使用,不能使用则选择attachEvent()方法。

1 el = document.getElementById('mybutton'); 2 if(el.addEventListener) 3 { 4 el.addEventListener('blur',function(){ 5 checkUsername(5); 6 },false); 7 }else{ 8 el.attachEvent('onblur',function(){ 9 checkUsername(5); 10 }); 11 }

  要注意的是attachEvent()方法中,事件的名称前面应该加上on,

   事件冒泡过程是可以被阻止的,是为了防止事件冒泡带来错误。阻止事件冒泡就是使用stopPropagation()方法。

1 event.stopPropagation();

  其中event指的是事件对象。

转载于:https://www.cnblogs.com/suvllian/p/5461509.html

你可能感兴趣的文章
判断是否是微信中打开网页
查看>>
单例模式的有缺点
查看>>
perl基础1
查看>>
chrome浏览器如何通过js判断是否安装了某扩展?
查看>>
奔驰的罪恶
查看>>
redhat 6.5 mysql主从同步
查看>>
js 变量、作用域和内存问题
查看>>
Android actionBar 修改背景色
查看>>
项目质量管理,人力资源管理作业
查看>>
Android中HttpClient网络请求
查看>>
我的友情链接
查看>>
Backbone
查看>>
asterisk架构
查看>>
python sys模块
查看>>
PHP基础(三)函数
查看>>
我的友情链接
查看>>
linux shell脚本的使用
查看>>
c语言使用DES_ncbc_encrypt以及段错误 (核心已转储) 解决
查看>>
mockplus软件审阅功能界面图
查看>>
马哥笔记第二天
查看>>