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

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;
　　}

二、事件切换机制

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件切换机制demo</title>

    <style type="text/css">

        .red{

            width: 100px;

            height: 100px;

            background: red;

        }

        .blue{

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

    <script type="text/javascript">

        window.onload=function(){

            var div=document.getElementById("div");

            div.onclick=onBlue;//1、把onBlue函数付给当前事件 this：是当前点击的对象

            /*

            div.onclick=function(){ //通过匿名函数执行的事件 this：是window

                alert(this);

            }

            */

        }

        function onRed(){

            this.className="red";

            this.onclick=onBlue;//3、把onBlue函数赋给当前事件

        }

        function onBlue(){

            this.className="blue";

            this.onclick=onRed;//2、把onRed函数赋给当前事件

        }

    </script>

</head>

<body>

    <div id="div" class="red">事件切换</div>

</body>

</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. Git常用

    创建本地库 mkdir [dirname] cd [dirname] git init 1.创建项目目录 2.进入目录 3.git初始化 [dirname]为自己取的文件夹名字,例如mkdir myd ...

  2. 升级react 15.4，常见的错误及解决方案

    最近项目由react0.14.X升级到react 15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对:来说react升级之后 ...

  3. 使用CSS设置行间距，字间距.

    字间距1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离 ...

  4. 在 Mac OS X 上创建的 .NET 命令行程序访问数据库 （使用Entity Framework 7 ）

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  5. 为Page添加INotifyPropertyChanged功能

    在Page页面里面, DataContext 更新后,前台数据要求会自动更新. 但前台的绑定如果用x:bind 语法. 它要求强类型.直接关联到DataContext上就不行了. 需要为Page 添加 ...

  6. C#将科大讯飞语音合成文件转换为MULAW音频格式

    任务描述:通过科大讯飞语音合成组件在线完成文本转语音的合成,然后再转换为电话系统IVR要求的音频格式: wave mu-law 16位 8kHZ 64kbps. 完成步骤: 首先,我们要先通过科大讯飞 ...

  7. 关于H5本部缓存localStorage，sessionStorage

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  8. C#中调用python方法

    最近因为项目设计,有部分使用Python脚本,因此代码中需要调用python方法. 1.首先,在c#中调用python必须安装IronPython,在 http://ironpython.codepl ...

  9. 个人博客作业week3——案例分析

    1.调研 & 评测 1.我的用户体验 win10应用版: Bug1:例句经过翻译与其给出的译文相差太多 上图是应用给出的每日一句及其译文. 将其复制入翻译,就可以看出翻译过后的句子一点也不通顺 ...

  10. 02、AngularJs的数据绑定

    我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码. <!DOCTYPE html> ...