1. navigator

userAgent: 包含浏览器名称,内核,版本号的字符串

鄙视: 如何判断浏览器名称和版本号

2. 定时器: 2种:

1. 周期性定时器:

什么是: 让程序每隔一段时间间隔,反复执行一项任务

何时: 只要让程序每隔一段时间,反复执行一项任务

如何: 3件事:

1. 定义任务函数: 定时器每次反复调用的函数

2. 将任务函数,放入定时器中,启动定时器:

var timer=setInterval(task, 间隔ms)

timer是唯一标识该定时器的序号,专门用于停止定时器

3. 停止定时器: clearInterval(timer)

2种: 1. 手动停止:

2. 自动停止: 在任务函数中判断临界值,如果没有达到临界值,则继续执行。如果达到临界值,则自动调用clearInterval()

2. 一次性定时器:

什么是: 让程序先等待一段时间,再延迟执行一项任务。

执行完一次后,自动停止。

何时: 只要希望一段程序延迟执行时

如何: 3件事:

1. 定义任务函数: 定时器延迟执行的任务

2. 启动定时器: 启动等待

timer=setTimeout(task, 等待ms);

3. 停止定时器: 停止等待,不再执行

clearTimeout(timer);

定时器原理:

1. 启动定时器时,都不会立刻执行任务函数。仅是创建定时器对象,封装任务函数的定义。

2. 定时器执行时,不会立刻执行任务函数,而是将任务函数添加到回调队列中等待。

3. 只有主程序执行完,回调队列中的任务函数才会执行

结论: 定时器的任务函数,只能在主程序执行完才能执行

3. 事件:

什么是: 浏览器自动触发的或用户手动触发的页面内容状态的改变

事件处理函数: 当事件发生时,自动执行的函数

何时: 如果希望事件发生时,自动执行一项任务时

如何绑定: 3种:

1. 在HTML中: <ANY  on事件名="js语句"

问题: 不符合内容与行为分离的原则,不便于维护

2. 在js中动态绑定: 赋值方式:

elem.on事件名=function(){

//this->当前elem

}

触发事件: elem.on事件名();

问题: 一个事件属性,只能绑定一个处理函数

3. 在js中动态绑定: 添加事件监听方式:

elem.addEventListener("事件名",handler)

elem.removeEventListener("事件名",handler)

强调: removeEventListener必须和addEventListener时写的内容完全一样。且,必须能够找到原处理函数对象。

所以: 如果一个处理函数可能被移除,则绑定时,就不能用匿名函数。必须用有名称的函数。

事件模型: 事件发生时经历的过程:3个阶段

1. 捕获: 由外向内,逐级记录各级父元素上绑定的处理函数

2. 目标触发: 优先触发目标元素上的处理函数

目标元素: 最初触发事件的第一个元素

3. 冒泡: 由内向外,按捕获阶段的反向,触发各级父元素上的处理函数。

为什么: 所有浏览器开发者,都认为,点在内层子元素上,也等效于点在外层元素上。

事件对象:

什么是: 事件发生时,自动创建的,封装事件信息的对象,并提供了操作事件行为的API。

何时: 1. 获取事件信息

2. 修改事件的默认行为

如何:

获取: DOM: 事件对象总是作为处理函数的第一个参数自动传入

elem.onclick=function(e){

//当事件发生时,e会自动获得事件对象

}

API:

1. 取消冒泡/停止蔓延:

e.stopPropagation()

2. 利用冒泡:

优化: 尽量减少事件监听的个数:

为什么: 浏览器触发事件处理函数是通过遍历的方式,查找所有监听对象。如果监听对象多,则遍历慢。

何时: 多个子元素需要绑定同一事件处理函数时

如何: 只需要在父元素上绑定一次处理函数即可

问题:

1. this不再指向目标元素,而是指向父元素

2. 鉴别目标元素

解决:

1. 不能用this, 应该用e.target

e.target始终保存着目标元素,不随冒泡而改变

2. 在事件处理函数中,先判断e.target的特征(标签名, class...)。只有目标元素满足要求,才能继续执行

不利用冒泡 vs 利用冒泡:

1. 绑定位置: 不利用冒泡 直接绑在每个子元素上

利用冒泡   绑在父元素上

2. 监听个数: 不利用冒泡 多

利用冒泡   少

3. 效率: 不利用冒泡  低

利用冒泡    高

4. 对动态添加的新元素:

不利用冒泡   不能自动获得事件处理函数

利用冒泡     可以自动获得父元素上的处理函数

3. 阻止默认行为:

为什么: 浏览器为了用户体验的考虑,可能增加了个别默认的行为。默认行为可能和我们添加的事件冲突

何时: 只要希望不要触发浏览器默认的行为时

典型场景:

1. 用a元素当按钮时

2. 用submit按钮也能实现自定义表单提交:

组合1:

<input type="button"  onclick()    form.submit()

组合2:

<input type="submit"

form.onsubmit()

e.preventDefault();

3. 使用HTML5中的拖拽API前,都要阻止默认行为

如何: e.preventDefault();

navigator - 定时器 - event的更多相关文章

  1. MySQL 定时器EVENT学习

    原文:http://blog.csdn.net/lifuxiangcaohui/article/details/6583535 MySQL 定时器EVENT学习 MySQL从5.1开始支持event功 ...

  2. JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

    DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...

  3. MySQL数据库 Event 定时执行任务.

    一.背景 由于项目的业务是不断往前跑的,所以难免数据库的表的量会越来越庞大,不断的挤占硬盘空间.即使再大的空间也支撑不起业务的增长,所以定期删除不必要的数据是很有必要的.在我们项目中由于不清理数据,一 ...

  4. mysql的定时器

    mysql定时器是系统给提供了event,而oracle里面的定时器是系统给提供的job.废话少说,下面创建表: create table mytable ( id int auto_incremen ...

  5. Mysql 简单的使用定时器调用存储过程

    1.创建测试的表 CREATE TABLE mytable (    id INT auto_increment NOT NULL,    NAME VARCHAR (100) NOT NULL DE ...

  6. MySQL 开启事件 使用定时器调用存储过程

      mysql定时器是系统给提供了event,而oracle里面的定时器是系统给提供的job.废话少说,下面创建表:create table mytable (id int auto_incremen ...

  7. mysql定时器,定时查询数据库,把查询结果插入到一张表中

    1.有两张表order_repayment_detail,msg_sim ,需要把前者中的按时间过滤出来的信息插入到短信发送表中,可以每晚12点钟查询执行一次查询. 创建存储过程,这里的存储过程主要提 ...

  8. mysql事件【定时器】

    一,借鉴[luo奔的蜗牛] 1.创建一张表 create table mytable ( id int auto_increment not null, name ) not null default ...

  9. mysql 创建定时器

    mysql定时器是系统给提供了event,而oracle里面的定时器是系统给提供的job.废话少说,下面创建表: create table mytable ( id int auto_incremen ...

随机推荐

  1. 解决ie浏览器下载apk或ipa变为zip

    Tomcat/conf/web.xml <mime-mapping> <extension>apk</extension> <mime-type>app ...

  2. jenkin、SVN、archery集成openLDAP

    jenkins: 1.下载.安装插件 LDAP .Matrix Authorization Strategy 2. 系统管理 —> 全局安全配置 点击 启用安全,并且选择 LDAP 认证,这里有 ...

  3. pta7-20 畅通工程之局部最小花费问题(Kruskal算法)

    题目链接:https://pintia.cn/problem-sets/15/problems/897 题意:给出n个城镇,然后给出n×(n-1)/2条边,即每两个城镇之间的边,包含起始点,终点,修建 ...

  4. Mybatis抛出 Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@f54509]异常

    今天在做Springmvc和spring 时 mybatis 是抛出异常 Closing non transactional SqlSession [org.apache.ibatis.session ...

  5. 打印低头思故乡 java

    public static void main(String args[][){ char poet[] = str.tocharArray(); int pos = 18; while(true){ ...

  6. CentOS 7搭建Fabric,测试network_setup例子

    更新内核 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org rpm -Uvh http://www.elrepo.org/elrep ...

  7. Delphi: RTTI与ini配置文件

    项目以Rtti特性做文件参数配置,简化每项读写ini操作,记录以做备忘,代码如下: unit uGlobal; interface uses Windows, Messages, SysUtils, ...

  8. bbs项目富文本编辑器实现上传文件到media目录

    media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...

  9. day 20 类与类之间的关系,继承2

    类与类之间的关系: 依赖关系 关联关系 聚合关系 组合关系 依赖关系: 大象与冰箱的例子 # 依赖关系,冰箱依赖大象打开 class Elephant: def __init__(self,name) ...

  10. AngularJS——第2章 模块化

    第2章 模块化 使用AngularJS构建应用时是以模块化的方式组织的,即将整个应用划分成多个小模块,各个模块有各自的职责,最终实现完整的应用. 2.1 定义应用 通过为任一HTML标签添加ng-ap ...