事件(上）

什么是事件？

事件可以理解为用户的一些操作和浏览器形成的一个交互

如何绑定事件处理函数？

1.ele.onxxx = fucntion(){}

        #兼容性好，但是一个元素的同一个事件只能绑定一个处理程序

        #基本等同于写在HTML行间

例

2.ele.addEventListener(type,fn,flase)

IE9以下不兼容，可以为一个事件绑定多个处理程序

3.ele.attachEvent("on"+type,fn)

IE独有，同样可以为以一个事件绑定多个处理程序

例题

给每个li绑定一个事件，并输出他们的顺序

事件处理程序运行的环境

ele.onxxx = function(){}

程序this指向是dom元素本身

ele.addEventListener(type,fn,flase)

程序this指向是dom元素本身

ele.attachEvent("on"+type,fn)

程序this指向是Window

封装一个方法，来处理不同浏览器的兼容问题

我们能绑定事件，所以也可以解除事件

ele.onclick = false/null;

ele.removeEventListener(type,fn,false)

ele.detachEvent('on'+type,fn)

注意：如果绑定的是匿名函数则无法解除

例

这个解除函数中的function(){}是匿名函数，根本没法表示，所以必须把函数写到外面，留一个引用能找到它，例：

事件处理模型 ——事件冒泡、捕获

事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上/自里向外）

事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素(事件源元素)。（自顶向下/自外向里）
怎么事件捕获？

把参数false变成true

注意：是代码结构上存在嵌套关系

先捕获后冒泡

怎么取消冒泡?

两个方法

W3C标准 event.stopPropagation();但不支持IE9以下版本

event.cancelBubble,IE独有（chrome现在也有这个方法）

如何封装一个取消冒泡的方法？

   function stopBubble(event) {if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble = true;}}

阻止默认事件

默认事件有哪种?

比如 表单提交，a标签跳转，右键菜单等

1.return false;以对象属性的方式注册的事件才有效（ele.onxxx = fucntion(){}）

 document.oncontextmenu = function(){ // 这个就是右键出菜单事件console.log('a');return false;}

2.event.preventDefault();W3C标准，IE9以下不兼容

3.event.returnValue = false;兼容IE

封装一个方法

  document.oncontextmenu = function(e){ //e是什么意思呢？console.log('a');cancelHandler(e);}function cancelHandler(event) {if(event.preventDefault) {event.preventDefault();}else{event.returnValue = false;}}
//e 的意思是，在每一个事件处理函数里面，我们可以写一个形参，系统会帮我们传一个事件对象，这个事件对象记载了事件发生时的一切数据，以供我们使用。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！