事件处理函数

绑定事件 = 绑定事件的处理函数（事件本身是存在的，绑定的是相应的反馈）
事件 + 事件的反馈 = 前端交互（前端核心）

绑定事件的方式

1. 句柄绑定

默认（只能）是事件冒泡这种事件流
为某一个元素（事件源）指定了一个事件句柄（onclick，事件发生时要进行的操作）

oDiv.onclick = function(){} // 事件句柄 = 处理函数

onclick绑定的事件处理函数内写的其他函数，在非严格模式下，指向的是window
【该方式】一个元素、同一事件、只能绑定一个事件处理函数（绑定多个取最后）

2. 内联事件监听器

在html上绑定，绑定执行（不建议使用，结构和逻辑应当分离），这种按属性绑定的方式优先级更低，会被js覆盖

3. 事件监听器

1） W3C规范，但IE9以下不支持

注册事件监听器/绑定事件监听器
可以绑定多个事件处理函数，都能执行；如果绑定了多次同一事件处理函数，只会执行一次
注意：事件类型没有加on

elem.addEventListener(事件类型,事件处理函数,false);//false事件冒泡  true事件捕获

// 2种都执行
oBtn.addEventListener('click',function(){this.innerHTML = '加载中..'
},false)
oBtn.addEventListener('click',function(){console.log('加载更多事件')
},false)

oBtn.addEventListener('click',test,false);
oBtn.addEventListener('click',test,false);
function test(){console.log(1); // 打印1次
}

2）IE8及以下绑定方法

elem.attachEvent(事件类型,事件处理函数);

注意：事件类型加on

点击事件 + IIFE

在绑定时，console.log(i)并没有执行，i没有保存，绑定的函数在for循环结束后被执行（点击了），访问到的是5

var oLi = document.getElementsByTagName('li'),len = oLi.length,item;
for (var i = 0; i < len; i++) {(function (j) {item = oLi[i];item.addEventListener('click', function () {console.log(i);}, false);}(i))
}

3）事件处理程序的运行环境 / this

谁调用this就指向谁(attachEven是个特例，this指向window)

4) 【兼容】封装绑定事件处理函数

function addEvent(el, type, fn) {if (el.addEventListener) {el.addEventListener(type, fn, false);} else if (el.attachEvent) {el.attachEvent('on' + type, function () {fn.call(el);})} else {el['on' + type] = fn}
}

5）解除事件处理程序

// 句柄
element.onclick=null/false;// W3C规范事件监听器 （add时怎么写remove就得怎么写）
element.addEventListener('click',test,false);
element.removeEventListener('click',test,false)// IE8及以下事件监听器
element.detachEvent('onclick',test);

非严格模式下可以使用方法4

function removeEvent(elem, type, fn) {if (elem.addEventListener) {elem.removeEventListener(type, fn, false)} else if (elem.attachEvent) {elem.detachEvent('on' + type, fn)} else {elem['on' + type] = null}
}

标签嵌套

内联元素写嵌套关系，dom解析出来依然不是嵌套的
a的特殊现象，变成block依然不能嵌套

事件冒泡与捕获

dom结构中/嵌套结构中，从内到外，从下到上，事件从子元素一层一层向上传递的现象是事件冒泡
需绑定相同事件，向上传递时，父级有相同事件则触发
关心的是事件，而非事件处理函数
事件捕获则顺序相反，点击父元素，一直捕获到事件源，事件监听器true
注意：dom结构嵌套，视觉上并不一定嵌套
点击黄色：事件捕获先于事件冒泡执行
点击红色，红色是事件源，事件源是按绑定顺序先后执行的，非冒泡非捕获
focus、blur、change、submit、reset、select这些是没有捕获和冒泡事件的
IE浏览器是没有事件捕获的，除了Chrome以外的老版本浏览器都没有捕获，新版的浏览器（火狐、欧朋）有捕获的，主要和webkit blink内核有关系

取消冒泡

1. e.stopPropagation() (W3C)

2. e.cancelBuble = true (IE)

attach的怎么取消

3. 【兼容】封装

function cacelBubble(e) {var e = e || window.event;if (e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;}
}

取消默认事件

1. 阻止右键菜单弹出

1）阻止右键菜单弹出

2）W3C：e.preventDefault()（IE9不兼容）

3）e.returnValue = false

function preventDefaultEvent(e) {var e = e || window.event;if (e.preventDefault) {e.preventDefault()} else {e.returnValue = false}
}

2. a标签默认事件

跳转和刷新页面

// 1）void(0)相当于return 0
<a href = "javascript:void(0)">百度一下</a>
// 2）
<a href = "javascript:;">百度一下</a>
// 3）锚点方式
<a href = "#">百度一下</a>
// 4）
a.onclick = function(e){e.preventDefault();
}

举例

DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件相关推荐

jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...
浏览器事件捕获冒泡以及阻止冒泡
浏览器事件捕获冒泡以及阻止冒泡一.浏览器的dom事件流 dom事件流有三个阶段,捕获阶段->目标阶段->冒泡阶段,不管是有没有绑定事件,只要发生点击事件,事件的处理将从DOM层次的根开始 ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
vue阻止浏览器默认事件
项目中遇到长按.鼠标右键等操作时,会出发浏览器的默认事件,这时候我们要阻止浏览器默认事件,在vue中阻止默认事件,可以使用 @contextmenu.prevent=""实现
js中冒泡和捕获/阻止冒泡和捕获事件
JavaScript中捕获/阻止捕获.冒泡/阻止冒泡事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...
前端.什么是冒泡和阻止冒泡的原因和方法
咸鱼最近在看微信小程序的开发,在看框架的时候在<button>中有个被用到的属性叫做bindtap,作用是"事件绑定,不阻止冒泡".因为之前搞Html和Css为多,没有 ...
JavaScript停止冒泡和阻止浏览器默认行为
原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 事件兼容 function myfn(e){ var ...
什么是事件冒泡？如何用jquery/js阻止事件冒泡？阻止冒泡有什么作用？小生来抛个砖。...
2019独角兽企业重金招聘Python工程师标准>>> 前言:有时候,当我们给一个外层 div 添加了一个'click'事件,然而在内层的其他元素我们也为它添加了 'click'事件 ...
html 传参阻止冒泡,angular阻止冒泡事件
当元素多层嵌套的时候,每层都有点击事件,它就会发生冒泡,一层一层的触发,但有时候我们只想触发某一层,不想让其他层的事件触发,这就需要阻止冒泡事件了. 以angular项目为例,我们都知道angular ...

DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件

事件处理函数

绑定事件的方式

1. 句柄绑定

2. 内联事件监听器

3. 事件监听器

1） W3C规范，但IE9以下不支持

2）IE8及以下绑定方法

点击事件 + IIFE

3）事件处理程序的运行环境 / this

4) 【兼容】封装绑定事件处理函数

5）解除事件处理程序

标签嵌套

事件冒泡与捕获

取消冒泡

1. e.stopPropagation() (W3C)

2. e.cancelBuble = true (IE)

3. 【兼容】封装

取消默认事件

1. 阻止右键菜单弹出

1）阻止右键菜单弹出

2）W3C：e.preventDefault()（IE9不兼容）

3）e.returnValue = false

2. a标签默认事件

举例

DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件相关推荐

最新文章

热门文章

DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件

事件处理函数

绑定事件的方式

1. 句柄绑定

2. 内联事件监听器

3. 事件监听器

1） W3C规范，但IE9以下不支持

2）IE8及以下绑定方法

点击事件 + IIFE

3） 事件处理程序的运行环境 / this

4) 【兼容】封装绑定事件处理函数

5）解除事件处理程序

标签嵌套

事件冒泡与捕获

取消冒泡

1. e.stopPropagation() (W3C)

2. e.cancelBuble = true (IE)

3. 【兼容】封装

取消默认事件

1. 阻止右键菜单弹出

1）阻止右键菜单弹出

2）W3C：e.preventDefault()（IE9不兼容）

3）e.returnValue = false

2. a标签默认事件

举例

DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件相关推荐

最新文章

热门文章

3）事件处理程序的运行环境 / this