事件：一般用于浏览器与用户操作进行交互

js事件的三种模型：内联模型、脚本模型、DOM2模型

　　内联模型：事件处理函数是HTML标签的属性

<input type="button" value="点击" onclick="test()" />

脚本模型：事件处理函数谢谢脚本中从而达到层次分离的原则

document.onclick=function(){ //处理逻辑 }

DOM2模型：

一、如何获得事件函数

　　function testEvt(){
　　　　var len=arguments.length;//获得参数个数
　　　　//实际上我们并没有传参 len=1 是应为在事件处理函数中，浏览器会默认传递一个参数 这个参数是事件对象(event)
　　　　var arg=arguments[0];//获得这个事件对象event
　　}

　　//获得事件对象的兼容写法  （ 参数evt也可以写成event）
　　function getEvt(evt){
　　　　var e=evt || window.event;// window.event IE的规范
　　　　return e;
　　}

二、事件切换机制

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件切换机制demo</title>
  6.     <style type="text/css">
  7.         .red{
  8.             width: 100px;
  9.             height: 100px;
  10.             background: red;
  11.         }
  12.         .blue{
  13.             width: 100px;
  14.             height: 100px;
  15.             background: blue;
  16.         }
  17.     </style>
  18.     <script type="text/javascript">
  19.         window.onload=function(){
  20.             var div=document.getElementById("div");
  21.             div.onclick=onBlue;//1、把onBlue函数付给当前事件 this：是当前点击的对象
  22.             /*
  23.             div.onclick=function(){ //通过匿名函数执行的事件 this：是window
  24.                 alert(this);
  25.             }
  26.             */
  27.         }
  28.         function onRed(){
  29.             this.className="red";
  30.             this.onclick=onBlue;//3、把onBlue函数赋给当前事件
  31.         }
  32.         function onBlue(){
  33.             this.className="blue";
  34.             this.onclick=onRed;//2、把onRed函数赋给当前事件
  35.         }
  36.     </script>
  37. </head>
  38. <body>
  39.     <div id="div" class="red">事件切换</div>
  40. </body>
  41. </html>

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 ...

随机推荐

  1. Arcgis API For IOS扩展AGSDynamicLayer新旧版API对比

    AGSDynamicLayer(ForSubclassEyesOnly) Category Reference Description This category organizes the meth ...

  2. IE 浏览器 如何关闭令人讨厌的“此网站需要运行以下加载项：XXX。如果您信任该网站和该加载项并允许运行该加载项，请单击这里...

    1.运行gpedit.msc 2.在打开的组策略中打开用户配置——管理模板——Windows组件——Internet Explorer 3.选择“关闭ActiveX选择启用提示”,将其状态改为“已启用 ...

  3. CAP定理

    from wikipedia CAP定理 CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致 ...

  4. 如何解决SoftekBarcode.dll加载失败的问题

    本文转自:慧都控件网 Softek Barcode Reader Toolkit是专门从事于条形码读取技术的软件公司Softek旗下一款著名的条码读取工具包.最近有部分用户反映在运行此工具包时会遇到“ ...

  5. 基于Axure的快速原型方法

    Axure是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档.作为专业的原型设计工具,它能快速.高效的创建原型 ...

  6. Linux环境变量配置

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置./etc/bashrc:为每一个运 ...

  7. python学习八皇后问题

    0 # -*- coding: utf-8 -*- 1 import random #冲突检查,在定义state时,采用state来标志每个皇后的位置,其中索引用来表示横坐标,基对应的值表示纵坐标,例 ...

  8. [ASE][Daily Scrum]12.15

    这两周事情好多~ 组里面的事情,出国的申请出国………… 不过整体来说我们sprint3并没有安排太多的工作,所以完成情况尚可. 大地图和AI花费了不少时间,

  9. hander消息机制原理

    基本原理 线程中调用Handler.sendMsg()方法(参数是Message对象),将需要Main线程处理的事件 添加到Main线程的MessageQueue中,Main线程通过MainLoope ...

  10. linux下用rpm包安装默认配置

    rpm安装默认目录:数据文件:/var/lib/mysql/配置文件模板:/usr/share/mysqlmysql客户端工具目录:/usr/bin日志目录:/var/log/pid,sock文件目录 ...