javascript中的事件学习总结
一、实例:
一段用js实现的固定边栏滚动特效代码(跨浏览器使用):

二、总结:
由于事件处理在不同浏览器之间存在差异(主要是要考虑ie8及以下浏览器的兼容性),所以在使用处理事件的方法之前,先要判断当前使用的浏览器是否含有该方法(这种方法也叫平稳退化,防止我们写的页面因为在某些不兼容我们在页面中写的js,而不能正常显示我们写的页面的情况)。
1.两种事件处理的方法:addEventListener()和attachEvent();

addEventListener('event',evenfunction,boolean)中的三个参数分别为事件处理程序、函数、指定事件是以前远后近模式还是冒泡模式处理(false为冒泡模式,true为前远后近)。
2.事件冒泡:
事件冒泡分为前远后近(事件捕获)和冒泡模式(事件冒泡)两种:

不防止事件冒泡带来的问题:

在实际的项目开发中,选中表格中的某一行然后执行删除操作,必须要先传当前行的id值到后台服务器然后才能够完成删除操作,当表格的数据不只一行时,
因为多个元素绑定的是同一个事件,所以如果不防止冒泡就会有出现点击一次多个元素的事件被触发的情况。最后就不能正确地将当前选中的行删除。
javascript中的事件学习总结的更多相关文章
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 了解javascript中的事件(二)
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
随机推荐
- js中this和回调方法循环-我们到底能走多远系列(35)
我们到底能走多远系列(35) 扯淡: 13年最后一个月了,你们在13年初的计划实现了吗?还来得及吗? 请加油~ 主题: 最近一直在写js,遇到了几个问题,可能初入门的时候都会遇到吧,总结下. 例子: ...
- sprintf 用法
字符串格式化命令,主要功能是把格式化的数据写入某个字符串中 试试下面的代码就知道了 #include<cstdio> #include<cstdlib> using names ...
- iOS学习笔记---oc语言第七天
类的扩展 NSDate是Cocoa中用于处理日期和时间的基础类,封装了某一给定的时刻,具体的日期 时间和时区 使用+date方法获取当前日期和时间 NSDate *date = [NSDate dat ...
- Debian中如何切换默认Python版本
当你安装 Debian Linux 时,安装过程有可能同时为你提供多个可用的 Python 版本,因此系统中会存在多个 Python 的可执行二进制文件,你可以按照以下方法使用 ls 命令来查看你的系 ...
- 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...
- java List 排序 Collections.sort() 对 List 排序
class User { String name; String age; public User(String name,String age){ this.name=name; this.a ...
- 常用的phpstorm设置
1.始终在项目编辑器中显示行号[Show line numbers],可以通过File->Setting->Editor->Appearance->Show line numb ...
- Codeforces Round #339 Div.2 C - Peter and Snow Blower
Peter got a new snow blower as a New Year present. Of course, Peter decided to try it immediately. A ...
- printf 格式化输出符号详细说明(转)
%a 浮点数.十六进制数字和p-记数法(C99)%A 浮点数.十六进制数字和p-记法(C99)%c 一个字符(char) %C 一个ISO宽字符 %d 有符 ...
- Python 基础语法(四)
Python 基础语法(四) --------------------------------------------接 Python 基础语法(三)------------------------- ...