焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入。

  我们可以通过一些方式给元素设置焦点

  1、点击

  2、tab

  3、js

  不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点

  焦点事件:

    onfocus : 当元素获取到焦点的时候触发

    onblur : 当元素失去焦点的时候触发

  焦点方法:

    元素.focus() 给指定的元素设置焦点

    元素.blur() 取消指定元素的焦点

    元素.select() 选择指定元素里面的文本内容

event:事件对象  当一个事件发生时,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指    定的地方—event对象,供我们在需要的时候调用。

    //**

    事件对象必须在一个事件调用的函数里面使用才有内容

    事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的决定,而是取决于这个调用的时候

    兼容性:

      ie/chrome:event是一个内置的全局对象

      标准下:事件对象是通过事件函数的第一个参数传入

      如果一个函数是被事件调用的,那么,这个函数定义的第一个参数就是事件对象

    clientX[Y] : 当一个事件发生的时候,鼠标到页面可视区的距离

事件流:事件捕获   事件冒泡

  事件冒泡:当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制

  阻止事件冒泡:当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

  //**

  给一个对象绑定一个事件处理函数的第一种形式:obj.onclick = fn;

  给一个对象的同一个事件绑定多个不同的函数

  给一个元素绑定事件函数的第二种形式:

    ie:obj.attachEvent(事件名称,事件函数);

      1、没有捕获

      2、事件名称有on

      3、事件函数执行顺序:标准ie >>正序    非标准ie  >>  倒序

      4、this指向window

    标准:obj.addEventListener(事件名称,事件函数,是否捕获);  //**是否捕获,默认为false

      1、有捕获

      2、事件名称没有on

      3、事件执行的顺序是正序

      4、this触发该事件的对象

    call():函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部的this的指向,call方法第二个参数开始就是函数的参数列表

  事件捕获:当一个对象接收事件时,事件会先经过父级元素,由父级元素一层一层传递给该对象,这个过程称为事件捕获

  取消事件绑定:

    ie:obj.detachEvent(事件名称,事件函数);

    标准下:obj.removeEventListener(事件名称,事件函数,是否捕获);

键盘事件:

  onkeydown:当键盘按键按下的时候触发

  onkeyup:当键盘按键抬起的时候触发

  event.keyCode:数字类型  键盘按键的值  键值

    功能键:ctrlKey   shiftKey    altKey    布尔值

    当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false

  不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件

  事件默认行为:当一个事件发生时,浏览器自己会默认做的事情

  怎么阻止?

  分析当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;

  oncontentmenu:右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发

js——事件的更多相关文章

  1. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  2. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  3. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  4. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  5. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  6. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  7. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  8. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  9. 特殊js事件

    1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...

  10. js 事件

    事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型 内联模型:事件处理函数是HTML标签的属性 <input type="button&quo ...

随机推荐

  1. STM32F407VG (三)ADC

    12位ADC是一种逐次逼近型模拟数字转换器. 它有多达19个通道,可測量16个外部和2个内部信号源和VBAT通道.各通道的A/D转换能够单次.连续.扫描或间断模式运行. ADC的结果能够左对齐或右对齐 ...

  2. 解决初学者学不懂android,不理解android的设计

    最近在忙着搞一个小项目,所以没有来得及写一些原创性的东西,好容易今天中秋节,就趁现在写一些吧,今天仍然看了些老马的视频,尽管这些东西以前都用过,但是感觉仍然学到了不少东西,说给大家听希望大家也要不要不 ...

  3. 依赖注入及AOP简述(一)——“依赖”的概念 .

    一.入门:依赖注入 作为一种全新的设计模式理念,“依赖注入”这个词汇在软件设计开发中已经是越来越耳熟能详了,而各种流行于开源社区的“依赖注入框架”,也越来越多的被当作软件工程开发过程中使用的基础框架. ...

  4. IOS中的几中观察监听模式

    本文介绍Objective C中实现观察者模式(也被称为广播者/监听者.发布/注册或者通知)的五种方法以及每种方法的价值所在. 该文章将包括: 1 手动广播者和监听者(Broadcaster and ...

  5. (转)轻量级数据库 SQLite

    SQLite Expert – Personal Edition SQLite Expert 提供两个版本,分别是个人版和专业版.其中个人版是免费的,提供了大多数基本的管理功能. SQLite Exp ...

  6. JQ第一篇

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. Git 和 SVN之间的五个基本区别

    GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等.如果你是一个具有使用SVN背景的人,你需要做一定的思想转换,来适应GIT提供的一些概念和特征.所以,这篇文章的主要目的就是 ...

  8. C++容器在遍历时的删除问题

    容器是非常便捷常用的,经常用容器来存储多条数据,然后对数据进行增删查改. 有时要在遍历的同时删除一条数据,但是这样删除的时候程序会导致程序崩溃. 这个问题在GCC 中不会出现,而在VS2008,VS2 ...

  9. python2.X和python3.X在同一平台下的切换技巧

    python2.X和python3.X在同一平台下的切换技巧 最近在自己的电脑上同时安装了python2.7.11和python3.5.1 在网上搜了一些答案,主要还是参照<learning p ...

  10. 对简单的正则表达式的理解V1.0

    [^<]* 我得理解也是基本来自官方的解释 [] 我理解是它其中的内容,是指内容哦, 内容是可以选择的 字符 集合 ,比如说  @"<div style="color: ...