JavaScript---事件监听

　　JavaScript的事件监听是通过addEventListener()来实现的

　　　　它算是事件绑定的第二种方式。

　　　　　　他的特别之处在于这种绑定事件的方法不会被同名事件覆盖。

　　看具体的demo

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件监听</title>
 6     <script>
 7         window.onload = function(){
 8             /*
 9                 事件绑定的第二中方式：
10                 事件监听addEventListener()
11              */
12             var btn =document.getElementById('btn');
13             var btn2 =document.getElementById('btn2');
14
15             // 这种事件绑定方法同名事件会被覆盖
16             btn.onclick = function(){
17                 console.log('click');
18             }
19
20             btn.onclick = function(){
21                 console.log('第二次click');
22             }
23
24             btn.addEventListener('click',function(){
25                 console.log('第三次click');
26             },false);
27
28             btn.onclick = function(){
29                 console.log('第四次click');
30             }
31
32             // 清除事件
33             btn.onclick = null;
34
35             // 事件监听
36             // addEventListener()
37             btn2.addEventListener('click',function(){
38                 console.log('第1次点击')
39             },false);
40             btn2.addEventListener('click',function(){
41                 console.log('第2次点击')
42             },false);
43
44
45             // 推荐的事件监听方式
46             // 用具名函数
47             function handler(){
48                 console.log('第3次点击')
49             }
50             btn2.addEventListener('click',handler,false);
51
52
53             // 清除事件监听
54             // 参数一定要跟绑定时一样
55             btn2.removeEventListener('click',handler);
56
57
58             // ie8-的事件监听方式
59             // attachEvent('onclick',)
60             // 没有第三个参数
61             // btn2.attachEvent('onclick',handler);
62             //
63             // IE8-清除事件监听
64             // btn2.detachEvent('onclick',handler);
65         }
66     </script>
67 </head>
68 <body>
69     <button id="btn">按钮</button>
70     <button id="btn2">按钮2</button>
71 </body>
72 </html>

　　　　要注意IE-8下的监听方式是attachEvent

转载于:https://www.cnblogs.com/first-time/p/6591102.html

JavaScript---事件监听相关推荐

JavaScript事件监听完整实例（含注释）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
javascript事件监听与事件委托
事件监听与事件委托在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托 ...
转帖 javascript事件监听
原帖地址: http://www.cnblogs.com/AganCN/archive/2008/05/24/1206272.html 考虑这样的情形在IE浏览中处理,需要响应页面的按钮点击事件,有哪 ...
JavaScript事件监听
一.事件event对象 Event事件对象,用来获取事件的详细信息:鼠标位置.键盘按键.在主流浏览器下默认传参给事件函数的第一个参数,ie低版本会挂载在window下的event属性里,保存了触发事件 ...
JavaScript 基础--- (正则表达式 / 事件监听与绑定)
正则表达式创建正则表达式: 方法一: var reg = /pattern/; 方法二:var reg = new RegExp('pattern'); RegExp 对象的常用方法: 示例: &l ...
JavaScript 的addEventListener() 事件监听详解！
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一.on事件为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示: function method1(){console.log('我是方法1 ...
JavaScript原生实现事件监听及手动触发
事件监听标签中的onxxx,比如<button οnclick="btnHandler">按钮</button> js中的onxxx,比如document ...
从jQuery的缓存到事件监听
很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery********* ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...

JavaScript---事件监听

JavaScript---事件监听相关推荐

最新文章

热门文章